大家先看图
点击按钮 隐藏的内容会显示出来 , 相隔若干秒后内容会被隐藏掉 其中我们要用到 setTimeout({ })在JS中定时器非常好用,在小程序里面也是按照原来的方式执行的。
来看一下我具体怎么做的吧
wxml代码
<view class="goodsshow-20">
<view bindtap="popup" data-id="{{item.id}}" class="{{0==item.number?'active-show':'active-hidden'}} active-posres">
<view class="active-abso {{currentItem1==item.id?'show1':''}}">当前的库存不足,请及时补货</view>
<image src="{{warn}}"></image>
</view>
<view class="{{0==item.number?'active-red':''}}">{{item.number}}件</view>
</view>
数据是动态的加载进去的,首先会在数据里面定义id,然后他的父元素里面 wx:key=”{{item.id}}”,之后再添加自定义属性data-id=“{{item.id}}”方便之后判断是否是操作当前元素非常有用。
wxss样式
.active-show{
display: block;
}
.active-hidden{
display: none;
}
.active-posres{
position: relative;
}
/*小小的弹出框的样式*/
.active-abso{
padding: 0 10rpx;
border-radius: 5%;
color: #ffffff;
font-size: 24rpx;
background-color: #bbbbbb;
position: absolute;
left: -50rpx;
bottom: -50rpx;
width: 300rpx;
height: 50rpx;
line-height: 50rpx;
display: none;
}
.show1{
display: block;
}
css样式没啥说的!重要的是js部分,我们直接上代码
data: {
currentItem1:null
}
popup: function (options) {
var that = this;
var id = options.currentTarget.dataset.id;
// 获取自定义属性的id值
var currentItem1 = that.data.currentItem1;
that.setData({
'currentItem1': id
// 自定义属性的id值赋值给currentItem1
})
// 顺序执行,当已经执行完上面的代码就会开启定时器
setTimeout(function(){
that.setData({
'currentItem1': null
});
that.update();
},3000);
},
好了我们来总结一下吧!本文中{{currentItem1==item.id?’show1’:”}}是核心,通过点击事件动态的修改currentItem1的值实现显示的效果,在函数内部顺序执行,定时器在动态的修改currentItem1的值,从而达到延迟执行的效果。