小程序页面需要滑动功能

下拉时滑动，展示整个会员卡内容， 下拉view里包含了最近播放：有scrollview，加了下拉功能后，scrollview滑动失败了。

 

<view class="cover-section" catchtouchstart="handletouchstart" catchtouchmove="handletouchmove"
        catchtouchend="handlettouchend"
        style="transform:{{coverTransform}};transition:{{coverTransition}};">

 <view class="latest-section">
      <view class="lat_title">最近播放</view>
      <scroll-view class="scroll1" scroll-x enable-flex="true">
        <view class="item" wx:for="{{playlist}}">
          <image class="item-img" src="{{item.song.al.picUrl?item.song.al.picUrl:'/static/images/recommendSong/02.jpg'}}"/>
          <text class="item-value">{{item.song.al.name}}</text>
        </view>
      </scroll-view>
</view>
</view

 

问题所在：父元素使用了touchstart,touchmove,touchend三个事件，导致作为子元素的scroll-view组件无法滑动
解决办法：父元素绑定touchstart事件时不要使用catch绑定，使用capture-bind:touchstart="fn"绑定，也就是捕获模式，touchmove和touchend还是使用catch绑定
小知识1：为什么不用bind绑定touchstart,touchmove,touchend呢，因为使用bind会导致拖动元素时元素卡顿问题
小知识2：为什么touchmove和touchend不需要更改为使用capture-bind绑定呢，这个我试了一下，会导致scroll-view滑动事件和touchmove事件冲突,然后你滑动scroll-view组件时你添加了touchmove的那个元素(这是是scroll-view的父元素)也会动

解决：

catchtouchstart="handletouchstart" 改成：

capture-bind:touchstart="handletouchstart" 

滚动视图滑动正常了。

<view class="cover-section" capture-bind:touchstart="handletouchstart" catchtouchmove="handletouchmove"
        catchtouchend="handlettouchend"
        style="transform:{{coverTransform}};transition:{{coverTransition}};">
 
<view class="latest-section">
      <view class="lat_title">最近播放</view>
      <scroll-view class="scroll1" scroll-x enable-flex="true">
        <view class="item" wx:for="{{playlist}}">
          <image class="item-img" src="{{item.song.al.picUrl?item.song.al.picUrl:'/static/images/recommendSong/02.jpg'}}"/>
          <text class="item-value">{{item.song.al.name}}</text>
        </view>
      </scroll-view>
</view>
</view>