アプレットページにはスライド機能が必要です
プルダウン時にスワイプすると、会員カードのコンテンツ全体が表示されます。ドロップダウン ビューには、最近再生したものが含まれています。スクロールビューがありますが、プルダウン機能を追加した後、スクロールビューがスライドできなくなります。
<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 の 3 つのイベントを使用しているため、子要素としてのスクロールビュー コンポーネントがスライドに失敗します。解決策: 親要素が touchstart イベントをバインドするときに catch バインディングを使用せず、catch バインディングを使用します
。 Capture-bind:touchstart= "fn" binding、つまりキャプチャ モード、touchmove、touchend は引き続き catch バインディングを使用します。
ヒント 1: touchstart、touchmove、touchend をバインドでバインドしないのはなぜですか。バインドを使用すると要素をドラッグするときに要素がフリーズするためです。
2: キャプチャ バインド バインディングを使用するために touchmove と touchend を変更する必要がないのはなぜですか。これを試してみると、スクロール ビューのスライディング イベントと touchmove イベントの競合が発生し、スクロールをスライドするときに touchmove を追加します。 view コンポーネント要素 (scroll-view の親要素) も移動します
解決する：
catchtouchstart="handletouchstart" は次のように変更されました。
Capture-bind:touchstart="ハンドルタッチスタート"
スクロールビューがうまくスライドするようになりました。
<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>