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

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

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.判断滚动中的当前滚动方向，根据滚动判断当前方向，然后根据滚动距离设置当前选择的选项卡。

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

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

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

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

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