微信小程序?qū)崿F(xiàn)頂部,底部滑動(dòng)聯(lián)動(dòng)

這個(gè)場(chǎng)景一般用于展示數(shù)據(jù)時(shí)，數(shù)據(jù)過(guò)多，每條一行顯示不下，表頭可以橫向滑動(dòng)，下面要顯示的數(shù)據(jù)部分橫向縱向都可以滑動(dòng)。表頭或下面數(shù)據(jù)部分橫向滑動(dòng)的時(shí)候，兩部分可以進(jìn)行聯(lián)動(dòng)

說(shuō)說(shuō)原理，主要是使用兩個(gè)scroll-view組件，然后監(jiān)聽(tīng)兩個(gè)scroll-view的滑動(dòng)事件，然后根據(jù)滑動(dòng)的scroll-view橫向滑動(dòng)的距離，通過(guò)scroll-left來(lái)設(shè)置另一個(gè)scroll-view滑動(dòng)的距離

首先WXML代碼：

<scroll-view style='width:100%;height:100rpx;border:1px solid #f00;' scroll-x scroll-left='{{title_x}}' bindscroll='titlebindscroll' bindtouchstart='bindtouchstart' data-types='title'>
<view style='height:300rpx;background:#00f;width:1000rpx;margin-bottom:10rpx;float:left;color:#fff;'>12122665566546546546512346846546465465466666666666666666666666644444444444488888888888888888888999999999999999995555555555555553333333333333333222222222222222777777777776666666666666666666666555555555555533333333332222222</view>
</scroll-view>
<scroll-view style='width:100%;height:1000rpx;border:1px solid #f00;' scroll-x scroll-yscroll-left='{{title_x}}' bindscroll='bindscroll' bindtouchstart='bindtouchstart' data-types='data'>
<view style='height:300rpx;background:#f00;width:1000rpx;margin-bottom:10rpx;float:left;' wx:for='{{[1,1,1,11,1,1,1,1,1,11,1,1,1]}}'>12122665566546546546512346846546465465466666666666666666666666644444444444488888888888888888888999999999999999995555555555555553333333333333333222222222222222777777777776666666666666666666666555555555555533333333332222222</view>
</scroll-view>
然后JS代碼：

let ifs=true;//這里添加一個(gè)開(kāi)關(guān)，因?yàn)樵谠O(shè)置一個(gè)scroll的滑動(dòng)距離的時(shí)候會(huì)觸發(fā)這個(gè)scroll的滑動(dòng)事件，從而執(zhí)行里面的事件，這樣會(huì)做很多多余的操作，影響性能
Page({
  data: {
    title_x:0
  },
  //在開(kāi)發(fā)者工具上前幾次滑動(dòng)會(huì)很慢，估計(jì)幾秒后另一個(gè)才會(huì)滑動(dòng)，手機(jī)上不會(huì)，在手機(jī)和開(kāi)發(fā)者工具上滑動(dòng)的時(shí)候有大概幾百毫秒延遲，可以忽略不計(jì)，我覺(jué)得是因?yàn)閮蓚€(gè)地方的滑動(dòng)都要頻繁的使用setData操作，所以會(huì)出現(xiàn)這些情況，如果大家發(fā)現(xiàn)是其他原因引起的、有錯(cuò)誤或有其他好的方法，請(qǐng)留言，謝謝
  //判斷是那個(gè)部分在滑動(dòng)
  bindtouchstart(e){
    const types=e.currentTarget.dataset.types;
    ifs=(types=='title');//
    console.log(ifs);
  },
  //下面紅色部分滑動(dòng)
  bindscroll(e){
    let move = e.detail.scrollLeft,//獲取下面紅色部分的橫向滑動(dòng)距離
        title_x=this.data.title_x;
    if (title_x!=move&&!ifs){//監(jiān)聽(tīng)srcoll滑動(dòng)事件，判斷下面紅色部分與左邊的距離和藍(lán)色部分與左邊的距離是否相等，相等的話就是縱向滑動(dòng)，否則就是橫向滑動(dòng)，只有橫向滑動(dòng)的時(shí)候才改變藍(lán)色部分滑動(dòng)的距離
      this.setData({//這里需要實(shí)時(shí)渲染
        title_x: move
      });
    }
  },
  //藍(lán)色部分滑動(dòng)
  titlebindscroll(e){
    const move = e.detail.scrollLeft;//獲取藍(lán)色部分滑動(dòng)的距離
    if(ifs){
      this.setData({//更新下面紅色距離左邊的距離，這里是滑動(dòng)藍(lán)色部分然后設(shè)置下面滑動(dòng)的距離，所以要用setData進(jìn)行渲染
        title_x:move
      });
    }
  },
  onLoad: function (options) {
  }
})
在開(kāi)發(fā)者工具上前幾次滑動(dòng)會(huì)很慢，估計(jì)幾秒后另一個(gè)才會(huì)滑動(dòng)，手機(jī)上不會(huì)。
在手機(jī)和開(kāi)發(fā)者工具上滑動(dòng)的時(shí)候有大概幾百毫秒延遲，可以忽略不計(jì)，

我覺(jué)得是因?yàn)閮蓚€(gè)地方的滑動(dòng)都要頻繁的使用setData操作，所以會(huì)出現(xiàn)這些情況。 

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

文章題目：微信小程序?qū)崿F(xiàn)頂部,底部滑動(dòng)聯(lián)動(dòng)
文章轉(zhuǎn)載：http://muchs.cn/news16/322266.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、App開(kāi)發(fā)、網(wǎng)站改版、網(wǎng)站內(nèi)鏈、網(wǎng)站維護(hù)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)