公告列表
公告列表
收藏
回答

连续tap事件设置scroll-view的位置会导致tap事件触发延迟和卡死

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug scroll-view 客户端 6.7.2 2.23

- 当前 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 个回答

请 登录 后发表内容
相关问题
相关文档