收藏
回答

scroll-into-view与默认页面滚动事件冲突?IOS异常,android正常

在主页面上做横向滚动分页,通过监听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 个回答

登录 后发表内容
问题标签