连续tap事件设置scroll-view的位置会导致tap事件触发延迟和卡死
发布于 7 年前 作者 fhuang 9867 次浏览 来自 问答
  • 当前 Bug 的表现

    点击view触发tag事件，该事件只设置scroll-view属性scroll-into-view或scroll-top所需的值，连续点击两次以上会出现延迟，根据timeStamp显示至少会多出300，连续点击超过三次，前两次正常触发，中间点击的都无法触发，最后一次延迟触发

  • 预期表现

    每次点击都能按时触发tag事件

  • 提供一个最简复现 Demo

js

Page({
 
  data: {
    ids: ["a", "b", "c", "d", "e", "f"],
    id: 'a',
    idTops: []
  },
 
  onLoad: function (options) {
    var that = this
    var query = wx.createSelectorQuery()
    for (var i = 0; i < that.data.ids.length; i++) {
      query.select('#' + that.data.ids[i]).boundingClientRect()
    }
    query.exec(function (res) {
      var idTops = {}
      for (var i = 0; i < res.length; i++) {
        idTops[res[i].id] = res[i].top
      }
      that.setData({
        idTops: idTops
      })
    })
  },
 
  switchClickEvent: function(e) {
    console.log(e)
    this.setData({
      id: e.currentTarget.dataset.id
    })
  }
 
})

wxml

<view class='container'>
  <view class='left'>
    <view class='category {{id == item ? "category-selected" : ""}}' wx:for='{{ids}}' wx:key bindtap='switchClickEvent' data-id='{{item}}'>ID：{{item}}</view>
  </view>
  <!-- 测试scroll-into-view属性 -->
  <scroll-view class='right' scroll-y scroll-into-view='{{id}}' scroll-top='{{idTops[id]}}'>
    <view id='{{item}}' wx:for='{{ids}}' wx:key style='height: 500px; padding: 30rpx; background: #{{item + item + item}}'>ID:{{item}}</view>
  </scroll-view>
  <!-- 测试scroll-top属性 -->
  <!-- <scroll-view class='right' scroll-y scroll-top='{{idTops[id]}}'>
    <view id='{{item}}' wx:for='{{ids}}' wx:key style='height: 500px; padding: 30rpx; background: #{{item + item + item}}'>ID:{{item}}</view>
  </scroll-view> -->
</view>

wxss

.container {
  display: flex;
  flex-direction: row;
  position: absolute;
  width: 100%;
  height: 100%;
}
.left {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: whitesmoke;
}
.right {
  height: 100%;
  flex: 1;
}
.category {
  font-size: 30rpx;
  line-height: 30rpx;
  padding: 30rpx;
  width: 100rpx;
  color: #888;
}
.category-selected {
  background: white;
  color: #333;
  font-weight: bold;
}
1 回复

你好，请提供一下出现问题的机型和微信版本，以及能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。

回到顶部