微信小程序爬坑之路-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的值，从而达到延迟执行的效果。