微信小程序爬坑之路-2 定时器延迟执行

大家先看图

点击按钮 隐藏的内容会显示出来 ， 相隔若干秒后内容会被隐藏掉 其中我们要用到 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的值，从而达到延迟执行的效果。