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

最新推荐文章于 2024-08-29 16:53:43 发布

原创最新推荐文章于 2024-08-29 16:53:43 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#scroll-view #scroll-into-view #scroll-top #小程序 #tap事件触发延迟和卡死

微信小程序专栏收录该内容

16 篇文章

订阅专栏

博客指出在小程序中，点击view触发tap事件，当该事件仅设置scroll - view属性scroll - into - view或scroll - top所需值时，连续点击两次以上会出现延迟，超过三次时中间点击无法触发，最后一次延迟触发，预期是每次点击都能按时触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

- 当前 Bug 的表现

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

- 预期表现

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

- 提供一个最简复现 Demo

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-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-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;

}