鳕鱼天空

This is Mr Wang's Tech Blog.

wx.nextTick(function callback)延迟一部分操作到下一个时间片再执行

wx.nextTick(function callback)

基础库 2.2.3 开始支持,低版本需做兼容处理

延迟一部分操作到下一个时间片再执行。(类似于 setTimeout)

参数

function callback

说明

因为自定义组件中的 setData 和 triggerEvent 等接口本身是同步的操作,当这几个接口被连续调用时,都是在一个同步流程中执行完的,因此若逻辑不当可能会导致出错。

一个极端的案例:当父组件的 setData 引发了子组件的 triggerEvent,进而使得父组件又进行了一次 setData,期间有通过 wx:if 语句对子组件进行卸载,就有可能引发奇怪的错误,所以对于不需要在一个同步流程内完成的逻辑,可以使用此接口延迟到下一个时间片再执行。

示例代码

Component({
  doSth() {
    this.setData({ number: 1 }) // 直接在当前同步流程中执行

    wx.nextTick(() => {
      this.setData({ number: 3 }) // 在当前同步流程结束后,下一个时间片执行
    })

    this.setData({ number: 2 }) // 直接在当前同步流程中执行
  }
})

微信小程序列表项的右侧带箭头怎么做

在.wxml文件中新增一个标签


<view class='list'>
  <view class='list1'>
    <image src='../../images/list.jpg'></image>
    <text>我的发布</text>
    <view class='arrow'></view>
  </view>
</view>

然后在.wxss中修饰

.arrow {
  width: 10px;
  height: 10px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  position: absolute;
  right: 20rpx;
  transform: rotate(45deg);
  margin-top: 10rpx;
}

原文链接:https://blog.csdn.net/qq_39702981/article/details/84286228