欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 杂项:自定义弹窗,开发小技巧,使用一像素边框样式

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:511

HTML5自适应律师工作室类网

2020-04-04   浏览:505

HTML5影视传媒文化公司类网

2020-05-12   浏览:502

杂项:自定义弹窗,开发小技巧,使用一像素边框样式

发布时间:2020-12-20  

 

 


首先wxml代码:

 

<viewclass="myToast"hidden="{{nullHouse}}">暂无有关信息</view>

<viewbindtap="clickArea">点击此处</view>  

注:hidden属性用于切换比较频繁的地方。

wxss代码设置弹窗样式:

 

.myToast{

width:240rpx;

height:130rpx;

line-height:130rpx;

margin:80rpx35%;

border-radius:20rpx;

background-color: rgb(114,113,113);

color:rgb(255,255,255);

font-size:36rpx;

text-align: center;

position: absolute;

z-index:100;

opacity:0.85;

}

js:

 

Page({

 

data:{

nullHouse:true,//先设置隐藏

},

onLoad:function(options){

// 页面初始化 options为页面跳转所带来的参数

},

onReady:function(){

// 页面渲染完成

},

onShow:function(){

// 页面显示

},

onHide:function(){

// 页面隐藏

},

onUnload:function(){

// 页面关闭

},

clickArea:function(){

var that =this;

this.setData({

nullHouse:false,//弹窗显示

})

setTimeout(function(){

that.data.nullHouse =true,//1秒之后弹窗隐藏

},1000)

},

})

注:setTimeout()函数是异步的,当计算机执行到setTimeout时,此任务先暂停并保存,继续执行后续未完成的任务,当条件满足时,再将setTimeout的执行任务放回任务队列的后面,等待执行。

 

二:开发小技巧

1、js里面如何获取data里面定义的值:this.data.参数名,例如在data里面定义了一个num = 1,我要得到一个num,应该这样写this.data.num;

2、将内容存为全局的:在app.js,里面定义一个变量a,在存的页面 getApp().globalData.a = 你要存的信息;

3、取全局变量:也是一样的getApp().globalData.a

4、如果是渲染层报错:可能原因是:xml页面里面调用了方法,或者{{}}没有配对。

5、跳转页面代码:

① wx.navigateTo({url:"跳转的路径"}); 例如:wx.navigateTo({url:"../shopcar/shopcar"});这个自带返回上一页的功能,但是只能最多打开五个页面。  ②wx.redirectTo({url:"跳转的路径"});会关闭当前页面再跳转到另外一个页面

6、返回上一个页面:wx.navigateBack({delta: 1});delta:后面接返回的页面层数