本文为一些杂项的聚合;
首先wxml代码:
<view class = "myToast" hidden = "{{nullHouse}}" > 暂无有关信息 </view>
<view bindtap = "clickArea" > 点击此处 </view>
注:hidden属性用于切换比较频繁的地方。
wxss代码设置弹窗样式:
. myToast {
width : 240rpx ;
height : 130rpx ;
line - height : 130rpx ;
margin : 80rpx 35 %;
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:后面接返回的页面层数
三:自用样式解决方案:使用一像素边框
作者:haoranw,原文地址 import 'common.scss'
在需要1px边框的元素样式的开头添加@include px-border(#color,(some_position));
。 其中color为边框颜色,some_position中填入需要边框的方位(不填则默认为所有方向), 例如:@include px-border(#000,(top,right));
,将会生成上方和右方的黑色边框;@include px-border(#000);
,将在四周生成黑色边框。 使用任何你喜欢的构建工具或编辑器插件将.scss产出为.wxss。 common.scss:
// 1px border
@mixin px - border ( $color , $border : all ) {
position : relative ;
&: after {
content : " " ;
position : absolute ;
top : 0 ;
left : 0 ;
@if $border == all {
border : 1px solid $color ;
}
@else {
@each $member in $border {
border -#{ $member }: 1px solid $color ;
};
}
width : 200
邀请
原作者: 模板之家
来自: 网络收集