scroll-into-view与默认页面滚动事件冲突？IOS异常，android正常
发布于 5 年前 作者 qiangxu 7291 次浏览 来自 官方Issues

在主页面上做横向滚动分页，通过监听touchstart和touchend判断横向滑动动作，通过横向滑动动作切换分页。在开发者平台下和安卓真机下，均能够实现scroll-into-view准确定位到指定的分页，但在IOS真机下，每次scroll-into-view定位到指定分页后会继续执行横向滑动动作，导致分页定位不准。尝试将bindtouch变成catchtouch后，横向定位问题正常，但纵向又无法执行正常滚动了。代码如下，求解！！！

js：

touchStart: function (e) {
    touchDot = e.touches[0].pageX; // 获取触摸时的原点
  },
  // 触摸结束事件
  touchEnd: function (e) {
    var touchMove = e.changedTouches[0].pageX;
    // 向左滑动  
    if (touchMove - touchDot <= -20) {
      //执行切换页面的方法
      console.log("向左滑动");
      if (this.data.intoview == 'board1') {
        this.setData({
          intoview: 'board2',
        })
      }
      else if (this.data.intoview == 'board2') {
        this.setData({
          intoview: 'board3',
        })
      }
      else if (this.data.intoview == 'board3') {
        this.setData({
          intoview: 'board4',
        })
      }
    }
    // 向右滑动  
    else if (touchMove - touchDot >= 20) {
      //执行切换页面的方法
      console.log("向右滑动");
      if (this.data.intoview == 'board2') {
        this.setData({
          intoview: 'board1'
        })
      }
      else if (this.data.intoview == 'board3') {
        this.setData({
          intoview: 'board2'
        })
      }
      else if (this.data.intoview == 'board4') {
        this.setData({
          intoview: 'board3'
        })
      }
    }
  }

wxml：

<scroll-view class="scroll-board" scroll-into-view="{{intoview}}" scroll-x scroll-with-animation='true' bind:touchend="touchEnd" bind:touchstart="touchStart">
  <view class="scroll-content" >
    <view id="board1">
      <template is="board" data="{{board:board1}}"/>
    </view>
    <view id="board2">
      <template is="board" data="{{board:board2}}"/>
    </view>
    <view id="board3">
      <template is="board" data="{{board:board3}}"/>
    </view>
    <view id="board4">
      <template is="board" data="{{board:board4}}"/>
    </view>
  </view>
</scroll-view>
1 回复

麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）

回到顶部