本文为一些杂项的聚合;
首先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:后面接返回的页面层数
三:自用样式解决方案:使用一像素边框
-
// 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%;
-
height: 200%;
-
-webkit-transform: scale(0.5);
-
transform: scale(0.5);
-
@media (-webkit-min-device-pixel-ratio:2.5) {
-
width: 300%;
-
height: 300%;
-
-webkit-transform: scale(.33333);
-
transform: scale(.33333);
-
}
-
-webkit-transform-origin: 0 0;
-
transform-origin: 0 0;
-
box-sizing: border-box;
-
}
-
}