【移動(dòng)應(yīng)用開發(fā)技術(shù)】小程序如何實(shí)現(xiàn)列表滾動(dòng)上下聯(lián)動(dòng)效果

【移動(dòng)應(yīng)用開發(fā)技術(shù)】小程序如何實(shí)現(xiàn)列表滾動(dòng)上下聯(lián)動(dòng)效果

這篇文章主要為大家展示了“小程序如何實(shí)現(xiàn)列表滾動(dòng)上下聯(lián)動(dòng)效果”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓在下帶領(lǐng)大家一起研究并學(xué)習(xí)一下“小程序如何實(shí)現(xiàn)列表滾動(dòng)上下聯(lián)動(dòng)效果”這篇文章吧。最近在做公司的一款小程序，其中有一塊的設(shè)計(jì)的是在列表做上下滾動(dòng)的是時(shí)候，頂部的tab欄跟著一起聯(lián)動(dòng)，當(dāng)點(diǎn)擊tab欄的時(shí)候，列表數(shù)據(jù)也跟隨聯(lián)動(dòng)。頂部的頭部區(qū)域不跟隨列表滾動(dòng)；

頭部區(qū)域以下屬于滾動(dòng)區(qū)域。2.1原理介紹這個(gè)地方的實(shí)現(xiàn)主要借助了微信小程序原生的scroll-view組件。使用它的scroll-into-view屬性，可以實(shí)現(xiàn)點(diǎn)擊頂部的tab欄，將頁面滾動(dòng)到指定的列表位置；使用bindscroll事件，可以知道當(dāng)前頁面滾動(dòng)的距離，根據(jù)滾動(dòng)的距離做tab欄的切換操作；2.1頁面布局代碼先說下界面的整體布局，主要分為兩部分，頭部固定區(qū)域+可滾動(dòng)列表區(qū)域?？蓾L動(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

?

'head-float'

:

''}}"

>

<view

class="head-area-item

{{curSelectTab

===

index

?

'head-area-item-select'

:

''}}"

wx:for="{{appGroupList}}"

bindtap="tabClick"

data-index="{{index}}">

{{}}

</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">

{{}}

</view>

<view

class="group-children"

>

<view

wx:for="{{item.children}}"

class="group-children-item"

style="width:

{{itemWidth}}px;">

<image

src="{{item.url}}"></image>

<view>{{}}</view>

</view>

</view>

</view>

</view>

</scroll-view>

</view>在布局代碼中有幾個(gè)點(diǎn)需要注意：1、scrollAreaHeight滾動(dòng)區(qū)域的高度計(jì)算。通過獲取當(dāng)前設(shè)備的窗口高度減去頂部固定區(qū)域的高度2、水平tab欄是否置頂。根據(jù)頁面的滾動(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)

{

//頁面向上滑動(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

{

//頁面向下滑動(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