小程序怎么實(shí)現(xiàn)列表滾動(dòng)上下聯(lián)動(dòng)效果？下面本篇文章給大家介紹一下微信小程序開發(fā)列表滾動(dòng)上下聯(lián)動(dòng)效果的方法，希望對(duì)大家有所幫助！

1、背景

最近在做公司的一款小程序，其中有一塊的設(shè)計(jì)的是在列表做上下滾動(dòng)的是時(shí)候，頂部的tab欄跟著一起聯(lián)動(dòng)，當(dāng)點(diǎn)擊tab欄的時(shí)候，列表數(shù)據(jù)也跟隨聯(lián)動(dòng)。

下面是實(shí)現(xiàn)的一個(gè)效果圖：

頂部的頭部區(qū)域不跟隨列表滾動(dòng)； 頭部區(qū)域以下屬于滾動(dòng)區(qū)域。

2、實(shí)現(xiàn)

2.1 原理介紹

這個(gè)地方的實(shí)現(xiàn)主要借助了微信小程序原生的scroll-view組件。

使用它的 scroll-into-view 屬性，可以實(shí)現(xiàn)點(diǎn)擊頂部的tab欄，將頁(yè)面滾動(dòng)到指定的列表位置；

使用 bindscroll 事件，可以知道當(dāng)前頁(yè)面滾動(dòng)的距離，根據(jù)滾動(dòng)的距離做tab欄的切換操作；

2.1 頁(yè)面布局代碼

先說下界面的整體布局，主要分為兩部分，頭部固定區(qū)域 可滾動(dòng)列表區(qū)域。

可滾動(dòng)的列表區(qū)域的標(biāo)題欄當(dāng)滾動(dòng)一定的距離后，它也要固定在頂部。

代碼實(shí)現(xiàn)：

<!--index.wxml-->
<view class="list">

<!--頂部固定區(qū)域-->
<view style="height: 88rpx;width: 100%;background-color: burlywood;text-align: center;">頭部區(qū)域</view>

<!--可滾動(dòng)區(qū)域-->
<scroll-view scroll-y="true" style="width: 100%; height: {{scrollAreaHeight}}px;" bindscroll="scroll" scroll-into-view="{{scrollToItem}}" scroll-with-animation="true"  scroll-top="{{scrollTop}}">

   <!--水平滾動(dòng)的tab欄-->
  <scroll-view scroll-x="true" style="height: 88rpx;width: 100%;">
  <view class="head-area {{float ? &#39;head-float&#39; : &#39;&#39;}}" >
    <view class="head-area-item {{curSelectTab === index ? &#39;head-area-item-select&#39; : &#39;&#39;}}" wx:for="{{appGroupList}}" bindtap="tabClick" data-index="{{index}}">
    {{item.name}}
  </view>
  </view>

  </scroll-view>

<!--數(shù)據(jù)列表-->
<view class="list-group" style="height: {{listGroupHeight}}px;">
  <view class="list-group-item" id="v_{{index}}" wx:for="{{appGroupList}}" data-index="{{index}}">
    <view class="group-name">
      {{item.name}}
    </view>
    <view class="group-children" >
      <view wx:for="{{item.children}}" class="group-children-item" style="width: {{itemWidth}}px;">
      <image src="{{item.url}}"></image>
      <view>{{item.name}}</view>
    </view>
    </view>

  </view>
</view> 
</scroll-view>

</view>

在布局代碼中有幾個(gè)點(diǎn)需要注意：

1、scrollAreaHeight 滾動(dòng)區(qū)域的高度計(jì)算。 --- 通過獲取當(dāng)前設(shè)備的窗口高度減去頂部固定區(qū)域的高度

2、水平tab欄是否置頂。 --- 根據(jù)頁(yè)面的滾動(dòng)距離來判斷，如果滾動(dòng)距離 大于或者等于 水平tab欄的高度，則置頂；

3、設(shè)置數(shù)據(jù)列表的id="v_{{index}}" id，后續(xù)點(diǎn)擊tab欄滾動(dòng)到指定的位置就是根據(jù)這個(gè)id去實(shí)現(xiàn)的。

2.2 樣式代碼

/**index.wxss**/
.list{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.head-area{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 88rpx;
  width: 100%;
  padding: 0 10;
}

.head-area-item{
  display: flex;
  height: 88rpx;
  text-align: center;
  width: 150rpx;
  align-items: center;
  justify-content: center;
}

.head-area-item-select{
  color: #09bb07;
}

image{
  width: 88rpx;
  height: 88rpx;
}

.list-group{
  display: flex;
  width: 100%;
  height: 1000%;
  flex-direction: column;
}

.list-group-item{
  display: flex;
  width: 100%;
  background-color: #aaa;
  flex-direction: column;
}

.group-name{
  height: 88rpx;
  display: flex;
  text-align: center;
  align-items: center;
  margin-left: 20rpx;
}

.group-children{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.group-children-item{
  height: 160rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.head-float{
  position: fixed;
  top: 88rpx;
  background-color: #ffffff;
}

2.3 邏輯代碼

// index.js
Page({
  heightArr: [],
  //記錄scroll-view滾動(dòng)過程中距離頂部的高度
  distance: 0,
  data: {
    appGroupList:[
      {name:"分組01",children:[{"name":"測(cè)試0","url":"/images/bluetooth.png"},
      {"name":"測(cè)試1","url":"/images/bluetooth.png"},
      {"name":"測(cè)試2","url":"/images/bluetooth.png"},
      {"name":"測(cè)試3","url":"/images/bluetooth.png"},
      {"name":"測(cè)試4","url":"/images/bluetooth.png"},
      {"name":"測(cè)試5","url":"/images/bluetooth.png"},
      {"name":"測(cè)試6","url":"/images/bluetooth.png"},
      {"name":"測(cè)試7","url":"/images/bluetooth.png"}]},
      {name:"分組02",children:[{"name":"測(cè)試0","url":"/images/bluetooth.png"},
      {"name":"測(cè)試1","url":"/images/bluetooth.png"},
      {"name":"測(cè)試2","url":"/images/bluetooth.png"},
      {"name":"測(cè)試3","url":"/images/bluetooth.png"},
      {"name":"測(cè)試4","url":"/images/bluetooth.png"},
      {"name":"測(cè)試5","url":"/images/bluetooth.png"},
      {"name":"測(cè)試6","url":"/images/bluetooth.png"},
      {"name":"測(cè)試7","url":"/images/bluetooth.png"}]},
      {name:"分組03",children:[{"name":"測(cè)試0","url":"/images/bluetooth.png"},
      {"name":"測(cè)試1","url":"/images/bluetooth.png"},
      {"name":"測(cè)試2","url":"/images/bluetooth.png"},
      {"name":"測(cè)試3","url":"/images/bluetooth.png"},
      {"name":"測(cè)試4","url":"/images/bluetooth.png"},
      {"name":"測(cè)試5","url":"/images/bluetooth.png"},
      {"name":"測(cè)試6","url":"/images/bluetooth.png"},
      {"name":"測(cè)試7","url":"/images/bluetooth.png"}]},
      {name:"分組04",children:[{"name":"測(cè)試0","url":"/images/bluetooth.png"},
      {"name":"測(cè)試1","url":"/images/bluetooth.png"},
      {"name":"測(cè)試2","url":"/images/bluetooth.png"},
      {"name":"測(cè)試3","url":"/images/bluetooth.png"},
      {"name":"測(cè)試4","url":"/images/bluetooth.png"},
      {"name":"測(cè)試5","url":"/images/bluetooth.png"},
      {"name":"測(cè)試6","url":"/images/bluetooth.png"},
      {"name":"測(cè)試7","url":"/images/bluetooth.png"}]},
      {name:"分組05",children:[{"name":"測(cè)試0","url":"/images/bluetooth.png"},
      {"name":"測(cè)試1","url":"/images/bluetooth.png"},
      {"name":"測(cè)試2","url":"/images/bluetooth.png"},
      {"name":"測(cè)試3","url":"/images/bluetooth.png"},
      {"name":"測(cè)試4","url":"/images/bluetooth.png"},
      {"name":"測(cè)試5","url":"/images/bluetooth.png"},
      {"name":"測(cè)試6","url":"/images/bluetooth.png"},
      {"name":"測(cè)試7","url":"/images/bluetooth.png"}]},
    ],
    itemWidth: wx.getSystemInfoSync().windowWidth / 4,
    scrollAreaHeight:wx.getSystemInfoSync().windowHeight - 44,
    float:false,
    curSelectTab:0,
    scrollToItem:null,
    scrollTop: 0, //到頂部的距離
    listGroupHeight:0,
  },

  onReady: function () {
    this.cacluItemHeight();
  },

  scroll:function(e){
    console.log("scroll:",e);
    if(e.detail.scrollTop>=44){
      this.setData({
        float : true
      })
    } else if(e.detail.scrollTop<44) {
      this.setData({
        float : false
      })
    }
    let scrollTop = e.detail.scrollTop;
    let current = this.data.curSelectTab;
    if (scrollTop >= this.distance) {
      //頁(yè)面向上滑動(dòng)
      //列表當(dāng)前可視區(qū)域最底部到頂部的距離 超過 當(dāng)前列表選中項(xiàng)距頂部的高度（且沒有下標(biāo)越界），則更新tab欄
      if (current + 1 < this.heightArr.length && scrollTop >= this.heightArr[current]) {
        this.setData({
          curSelectTab: current + 1
        })
      }
    } else { 
      //頁(yè)面向下滑動(dòng)
      //如果列表當(dāng)前可視區(qū)域最頂部到頂部的距離 小于 當(dāng)前列表選中的項(xiàng)距頂部的高度，則切換tab欄的選中項(xiàng)
      if (current - 1 >= 0 && scrollTop < this.heightArr[current - 1]) {
        this.setData({
          curSelectTab: current - 1
        })
      }
    }
    //更新到頂部的距離
    this.distance = scrollTop;
  },

  tabClick(e){
    this.setData({
      curSelectTab: e.currentTarget.dataset.index,
      scrollToItem: "v_"+e.currentTarget.dataset.index
    })
  },

  //計(jì)算每一個(gè)item高度
  cacluItemHeight() {
    let that = this;
    this.heightArr = [];
    let h = 0;
    const query = wx.createSelectorQuery();
    query.selectAll(&#39;.list-group-item&#39;).boundingClientRect()
    query.exec(function(res) {
      res[0].forEach((item) => {
        h += item.height;
        that.heightArr.push(h);
      })
      console.log(that.heightArr);
      that.setData({
        listGroupHeight: that.heightArr[that.heightArr.length - 1 ]
      })
    })
  },
})

在邏輯代碼中最主要的有兩個(gè)地方：

1、cacluItemHeight ?計(jì)算列表中item的高度數(shù)組，并將最終計(jì)算的結(jié)果保存在 heightArr數(shù)組中。

heightArr數(shù)組中的每一項(xiàng)的值是在前一項(xiàng)的基礎(chǔ)之上進(jìn)行累加。

2、scroll 中判斷當(dāng)前的滾動(dòng)方向，根據(jù)滾動(dòng)判斷當(dāng)前的方向，然后根據(jù)滾動(dòng)的距離設(shè)置當(dāng)前選擇的tab。

好了，就這么多，基于以上的內(nèi)容基本可以實(shí)現(xiàn)想要的滾動(dòng)聯(lián)動(dòng)、切換tab聯(lián)動(dòng)效果。

【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

以上是淺談小程序怎么實(shí)現(xiàn)列表滾動(dòng)上下聯(lián)動(dòng)效果的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！