关于小程序如何实现列表滚动的上下联动效果（小程序可以通过拖动排序滚动）

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

1.背景最近在做公司的一个小程序。其中一个设计为当列表上下滚动时，顶部的标签栏将链接在一起，当点击标签栏时，列表数据也将链接在一起。

下面是实现的效果图:

顶部标题区域不随列表滚动；头部区域下方属于滚动区域。

2.实现2.1原理介绍这个地方的实现主要依靠微信小程序的原生scroll -视图组件。

使用其scroll-into-view属性，可以单击顶部的选项卡栏将页面滚动到指定的列表位置；

使用bindscroll事件，可以知道当前页面的滚动距离，并根据滚动距离切换选项卡栏；

2.1页面布局代码先来说说界面的整体布局，主要分为两部分，固定头部区域和可滚动列表区域。

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

代码实现:

& lt！--index . wxml --& gt；& lt视图class = & quot列表& quot& gt& lt！--顶部固定区域--》；& lt视图样式= & quot高度:88rpx宽度:100%；background -颜色:burlywoodtext-align:居中；"& gt头部区域；& ltscroll -view scroll -y = & quot；true & quotstyle = & quot宽度:100%；高度:{ { scrollAreaHeight } } px"bindscroll = & quot滚动& quotscroll -into -view = & quot；{ { scrollToItem } } & quotscroll -with -animation = & quot；true & quotscroll -top = & quot；{ { scrollTop } } & quot& gt& lt！--带水平滚动的标签栏--》；& ltscroll -view scroll -x = & quot；true & quotstyle = & quot高度:88rpx宽度:100%；"& gt& lt视图class = & quothead-area {{float？& amp#39;head -float & amp；#39;:& amp#39;& amp#39;} } & quot& gt& lt视图class = & quothead -area -item { { curSelectTab = = = index？& amp#39;head -area -item -select & amp；#39;:& amp#39;& amp#39;} } & quotwx:for = & quot；{ { appGroupList } } & quotbindtap = & quottab单击& quotdata -index = & quot；{ { index } } & quot& gt{ { item.name } } & lt/view & gt；& lt/view & gt；& lt/scroll -view & gt；& lt！--数据列表--》；& lt视图class = & quot列表-组& quotstyle = & quot高度:{ { listGroupHeight } } px"& gt& lt视图class = & quotlist -group -item & quot；id = & quotv _ { { index } } & quotwx:for = & quot；{ { appGroupList } } & quotdata -index = & quot；{ { index } } & quot& gt& lt视图class = & quotgroup -name & quot；& gt{ { item.name } } & lt/view & gt；& lt视图class = & quot第三组+儿童& quot& gt& lt查看wx:for = & quot；{ { item.children } } & quotclass = & quotgroup -儿童-项目& quotstyle = & quot宽度:{ { itemWidth } } px"& gt& ltimage src = & quot{ { item.url } } & quot& gt& lt/image & gt；& lt视图& gt{ { item.name } } & lt/view & gt；& lt/view & gt；& lt/view & gt；& lt/view & gt；& lt/view & gt；& lt/scroll -view & gt；& lt/view & gt；布局代码中有几点需要注意:

1.阴囊高度的计算。---通过获取当前设备的窗口高度减去顶部固定区域的高度。

2.水平标签栏是否设置在顶部。---根据页面的滚动距离判断，如果滚动距离大于或等于水平标签栏的高度，则将其设置在顶部；

3.设置数据列表的id =“v _ { { index } }“ID，然后单击选项卡栏滚动到基于此ID的指定位置。

2.2样式代码/* * index.wxss * */。列表{宽度:100%；身高:100%；显示器:flexflex -方向:列；}。head -area { display:flex；flex -方向:排；flex -wrap:nowrap；高度:88rpx宽度:100%；填充:0 10；}。head -area -item { display:flex；高度:88rpxtext-align:居中；宽度:150rpxalign -项目:居中；justify -内容:居中；}。head -area -item -select { color:# 09bb 07；} image { width:88 rpx；高度:88rpx}。list -group { display:flex；宽度:100%；身高:1000%；flex -方向:列；}。list -group -item { display:flex；宽度:100%；background -color:# AAA；flex -方向:列；}。group -name { height:88 rpx；显示器:flextext-align:居中；align -项目:居中；margin -left:20 rpx；}。group -子代{ display:flex；flex -方向:排；flex -wrap:wrap；宽度:100%；}。group -child -item { height:160 rpx；显示器:flexflex -方向:列；justify -内容:居中；align -项目:居中；}。head -float {位置:固定；顶部:88rpxbackground -color:# ffffff；}2.3逻辑代码//index . jspage（{ height arr:【】，//记录scroll-view: 0，data:{ appgroup list:【{ name:“Grouping 01 & quot；，孩子:【{ & quot名称& quot:& quot测试0，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试1，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试2，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试3，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试4，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试5，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试6，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试7，& quoturl & quot:& quot/images/蓝牙。& quot}】}，{ name:& quot；分组02 & quot，孩子:【{ & quot名称& quot:& quot测试0，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试1，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试2，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试3，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试4，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试5，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试6，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试7，& quoturl & quot:& quot/images/蓝牙。& quot}】}，{ name:& quot；分组03 & quot，孩子:【{ & quot名称& quot:& quot测试0，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试1，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试2，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试3，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试4，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试5，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试6，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试7，& quoturl & quot:& quot/images/蓝牙。& quot}】}，{ name:& quot；分组04 & quot，孩子:【{ & quot名称& quot:& quot测试0，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试1，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试2，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试3，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试4，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试5，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试6，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试7，& quoturl & quot:& quot/images/蓝牙。& quot}】}，{ name:& quot；分组05 & quot，孩子:【{ & quot名称& quot:& quot测试0，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试1，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试2，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试3，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试4，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试5，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试6，& quoturl & quot:& quot/images/蓝牙。& quot}，{ & quot名称& quot:& quot测试7，& quoturl & quot:& quot/images/蓝牙。& quot}】}，】，itemWidth: wx.getSystemInfoSync（）。windowWidth / 4，scrollAreaHeight:wx . getsysteminfosync（）。windowHeight - 44，float:false，Curselecttab: 0，scrolltoitem: null，scrolltop: 0，//到顶部列表的距离groupheight: 0，}，on ready:function（）{ this。cachetemheight（）；}，scroll:function（e）{ console . log（& quot；滚动:& quot，e）；if（e . detail . scroll top & gt；= 44）{ this . setdata（{ float:true }）} else if（e . detail . scroll top & lt；44）{ this . setdata（{ float:false }）} let scroll top = e . detail . scroll top；let current = this . data . curselecttab；if（scroll top & gt；= this . distance）{//页面向上滑动//列表当前可见区域从底部到顶部的距离超过了当前列表中所选项从顶部的高度（并且没有下标越界），则tab列if（current+1；= 0 & amp& ampscrollTop & ltthis . height arr【current -1】）{ this . setdata（{ curselecttab:current -1 }）}//更新到顶部的距离this.distance = scrollTop}，tab click（e）{ this . setdata（{ curSelectTab:e . current target . dataset . index，scrollToItem:& quot；v _ & quot+e . current target . dataset . index }），//计算每个项目的高度，cacluItemHeight（）{ let that = this；this . height arr =【】；设h = 0；const query = wx . createselectorquery（）；query . select all（& amp；#39;。list -group -item & amp；#39;).boundingClientRect（）query . exec（function（RES）{ RES【0】。forEach（（item）=》；{ h+= item . height；that . height arr . push（h）；}）console . log（that . height arr）；that . setdata（{ list group height:that . height arr【that . height arr . length -1】}）}）在逻辑代码中有两个要点:

1.cacluItemHeight计算列表中项目的高度数组，并将最终计算结果保存在高度数组中。

heightArr数组中每一项的值都是在前一项的基础上累加的。

2.判断滚动中的当前滚动方向，根据滚动判断当前方向，然后根据滚动距离设置当前选择的选项卡。

嗯，就这些。基于以上内容，您基本上可以实现所需的滚动联动和切换选项卡联动效果。

【相关学习推荐:小程序开发教程】

这几篇文章你可能也喜欢：

• 下面来说说小程序中页面传递参数的几种方式（微信小程序页面传递值）。
• 如何在小程序中实现下拉刷新和上拉加载功能？（附代码）（小程序的上拉加载触发器）
• 如何在小程序中创建页面二维码
• 如何通过applet vant组件将默认样式单元px转换为rpx（Vantui applet）
• 再来说说微信小程序中的生命周期（功能）（请谈谈小程序的生命周期功能？)

本文由主机参考刊发，转载请注明：关于小程序如何实现列表滚动的上下联动效果（小程序可以通过拖动排序滚动） https://zhujicankao.com/107267.html