浅谈小程序怎么实现列表滚动上下联动效果

浅谈小程序怎么实现列表滚动上下联动效果
小程序怎么实现列表滚动上下联动效果？下面本篇文章给大家介绍一下微信小程序开发列表滚动上下联动效果的方法，希望对大家有所帮助！

小程序怎么实现列表滚动上下联动效果？下面本篇文章给大家介绍一下微信小程序开发列表滚动上下联动效果的方法，希望对大家有所帮助！

1、背景

最近在做公司的一款小程序，其中有一块的设计的是在列表做上下滚动的是时候，顶部的tab栏跟着一起联动，当点击tab栏的时候，列表数据也跟随联动。

下面是实现的一个效果图：

顶部的头部区域不跟随列表滚动；头部区域以下属于滚动区域。

2、实现2.1 原理介绍

这个地方的实现主要借助了微信小程序原生的scroll-view组件。

使用它的 scroll-into-view 属性，可以实现点击顶部的tab栏，将页面滚动到指定的列表位置；

使用 bindscroll 事件，可以知道当前页面滚动的距离，根据滚动的距离做tab栏的切换操作；

2.1 页面布局代码

先说下界面的整体布局，主要分为两部分，头部固定区域 + 可滚动列表区域。

可滚动的列表区域的标题栏当滚动一定的距离后，它也要固定在顶部。

代码实现：

<!--index.wxml--><view class="list"><!--顶部固定区域--><view style="height: 88rpx;width: 100%;background-color: burlywood;text-align: center;">头部区域</view><!--可滚动区域--><scroll-view scroll-y="true" style="width: 100%; height: {{scrollAreaHeight}}px;" bindscroll="scroll" scroll-into-view="{{scrollToItem}}" scroll-with-animation="true" scroll-top="{{scrollTop}}"> <!--水平滚动的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><!--数据列表--><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>