小程序
小游戏
企业微信
微信支付
扫描小程序码分享
在iphone下, 轻触并划动页面下的scroll-view组件无法触发touchstart响应。只有当手指接触时间稍长时，才会触发touchstart。请问，有何解决方案？谢谢！
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
应该是scroll-view滚动条的优先级高于touchstart，比如scroll-y='true'时，当手指上下滑动时，就不会触发子项的touch事件，而被scroll-view滚动条占用了。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
<scroll-view style="height:100vh;" scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation="true" class="previewImageContainer">
<block wx:for="{{pages}}" wx:for-index="pn" wx:for-item="page">
<block wx:if="{{page.status != 'loaded'}}">
<view class="empty-page" id="page{{pn}}" capture-bind:touchstart="bindTouchPage">
<image src="../../images/yanjiu_blue.svg" />
</view>
</block>
<block wx:else>
<block wx:if="{{page.imageInfo.pageKeyPos}}">
<view id="page{{pn}}" capture-bind:touchstart="bindTouchPage" style="background:url({{page.imageInfo.url}})no-repeat;width:750rpx;height:{{page.imageInfo.pageKeyPos.pageSize.h*(750/page.imageInfo.pageKeyPos.pageSize.w)}}rpx;background-size:100% 100%;margin-bottom:10rpx;">
<block wx:for="{{keywords}}" wx:for-index="ki" wx:for-item="keyword">
<canvas canvas-id='ki{{ki}}pn{{pn}}' style="position:absolute;width:100%; height:100%;margin-left:{{ keywordHighlightMap[ki] == true ? 0 : '5000rpx'}};"></canvas>
<image id="page{{pn}}" mode="widthFix" src="{{page.imageInfo.url}}" />
</scroll-view>
bindTouchPage: function(event){
console.log(JSON.stringify(event));
let current = parseInt(event.currentTarget.id.substr(4));
console.log(current);
let index = -1;
let end = current + 10;
if(end > this.data.numPage){
end = this.data.numPage;
}
let pages = this.data.pages;
for (let pn = current; pn < end; pn++){
if (pages[pn].status == 'unload'){
index = pn;
break;
if(index == -1){
return;
this.loadHighlightedView(index, current + 10 - index, true);
},
.previewImageContainer{
width: 750rpx;
min-height: 100vh;
padding-bottom: 15vh;
background-color: #ffffff;
.previewImageContainer image{
width: 100%;
height: auto;
.empty-page{
height: 750rpx;
margin-bottom: 10rpx;
.empty-page image{
width: 300rpx;
height: 300rpx;
margin: 225rpx;
未复现，提供一下代码片段。
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
应该是scroll-view滚动条的优先级高于touchstart，比如scroll-y='true'时，当手指上下滑动时，就不会触发子项的touch事件，而被scroll-view滚动条占用了。
<scroll-view style="height:100vh;" scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation="true" class="previewImageContainer">
<block wx:for="{{pages}}" wx:for-index="pn" wx:for-item="page">
<block wx:if="{{page.status != 'loaded'}}">
<view class="empty-page" id="page{{pn}}" capture-bind:touchstart="bindTouchPage">
<image src="../../images/yanjiu_blue.svg" />
</view>
</block>
<block wx:else>
<block wx:if="{{page.imageInfo.pageKeyPos}}">
<view id="page{{pn}}" capture-bind:touchstart="bindTouchPage" style="background:url({{page.imageInfo.url}})no-repeat;width:750rpx;height:{{page.imageInfo.pageKeyPos.pageSize.h*(750/page.imageInfo.pageKeyPos.pageSize.w)}}rpx;background-size:100% 100%;margin-bottom:10rpx;">
<block wx:for="{{keywords}}" wx:for-index="ki" wx:for-item="keyword">
<canvas canvas-id='ki{{ki}}pn{{pn}}' style="position:absolute;width:100%; height:100%;margin-left:{{ keywordHighlightMap[ki] == true ? 0 : '5000rpx'}};"></canvas>
</block>
</view>
</block>
<block wx:else>
<image id="page{{pn}}" mode="widthFix" src="{{page.imageInfo.url}}" />
</block>
</block>
</block>
</scroll-view>
bindTouchPage: function(event){
console.log(JSON.stringify(event));
let current = parseInt(event.currentTarget.id.substr(4));
console.log(current);
let index = -1;
let end = current + 10;
if(end > this.data.numPage){
end = this.data.numPage;
}
let pages = this.data.pages;
for (let pn = current; pn < end; pn++){
if (pages[pn].status == 'unload'){
index = pn;
break;
}
}
if(index == -1){
return;
}
this.loadHighlightedView(index, current + 10 - index, true);
},
.previewImageContainer{
width: 750rpx;
min-height: 100vh;
padding-bottom: 15vh;
background-color: #ffffff;
}
.previewImageContainer image{
width: 100%;
height: auto;
}
.empty-page{
width: 750rpx;
height: 750rpx;
margin-bottom: 10rpx;
}
.empty-page image{
width: 300rpx;
height: 300rpx;
margin: 225rpx;
}
未复现，提供一下代码片段。