浅谈如何通过小程序实现列表滚动的联动效果

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

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

以下是实现的呈现:

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

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

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

使用bindscroll事件知道当前页面的滚动距离，根据滚动距离切换标签栏；

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

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

代码实现:

lt!--index.wxml--> ltview class = 列表 gt lt!--顶部固定区域-->: lt；视图样式= 身高:88rpx宽度:100%；background -color:burlywood；text-align:居中； gt头部区域: ltscroll -view scroll -y = ；true style = 宽度:100%；高度:{ { scrollAreaHeight } } px bindscroll = 滚动 scroll -into -view = ；{ { scrollToItem } } scroll -with -animation = ；true scroll -top = ；{ { scrollTop } } gt lt!--水平滚动标签栏-->: lt；scroll -view scroll -x = ；true style = 身高:88rpx宽度:100%； gt ltview class = head-area {{float？'head -float # 39；: ''} } gt ltview class = head -area -item { { curSelectTab = = = index？'head -area -item -select # 39；: ''} } wx:for = ；{ { appGroupList } } bindtap = tabClick data -index = ；{ { index } } gt{ { item.name } } lt/view gt； lt/view gt； lt/scroll -view gt； lt!--数据列表-->: lt；view class = list -group ；style = 高度:{ { listGroupHeight } } px gt ltview class = 列表-组-项目 id = v _ { { index } } wx:for = ；{ { appGroupList } } data -index = ；{ { index } } gt ltview class = group -name ； gt{ { item.name } } lt/view gt； ltview class = 第三组+儿童 gt lt查看wx:for = ；{ { item.children } } class = 第3组+儿童-项目 style = 宽度:{ { itemWidth } } px gt ltimage src = { { item.url } } 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 -方向:rowflex -wrap:nowrap；身高:88rpx宽度:100%；填充:0 10；} . head -area -item { display:flex；身高:88rpxtext-align:居中；宽度:150rpxalign -项:居中；justify -内容:居中；} . head -area -item -select { color:# 09bb 07；}图像{ 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 -方向:rowflex -wrap:wrap；宽度:100%；} . group -children -item { height:160 rpx；显示器:flexflex -方向:列；justify -内容:居中；align -项:居中；}.head-float{位置:固定；顶配:88rpxbackground -color:# ffffff；}2.3逻辑代码//index.jspage ({heightarr: []，//记录高度距离:0，数据:{ appgroup list:[{ name:" Grouping 01 ；，孩子:[{ ；名称 : 0 gt；测试， url : /images/bluetooth . png ；}，{ 名称 : 1 测试， url : /images/bluetooth . png ；}，{ 名称 : 2 ， url : /images/bluetooth . png ；}，{ 名称 : 测试3 ， url : /images/bluetooth . png ；}，{ 名称 : 测试4 ， url : /images/bluetooth . png ；}，{ 名称 : 测试5 ， url : /images/bluetooth . png ；}，{ 名称 : 测试6 ， url : /images/bluetooth . png ；}，{ 名称 : 测试7 ， url : /images/bluetooth . png ；}]}，{ name: ；分组02，孩子:[{ ；名称 : 0 gt；测试， url : /images/bluetooth . png ；}，{ 名称 : 1 测试， url : /images/bluetooth . png ；}，{ 名称 : 2 ， url : /images/bluetooth . png ；}，{ 名称 : 测试3 ， url : /images/bluetooth . png ；}，{ 名称 : 测试4 ， url : /images/bluetooth . png ；}，{ 名称 : 测试5 ， url : /images/bluetooth . png ；}，{ 名称 : 测试6 ， url : /images/bluetooth . png ；}，{ 名称 : 测试7 ， url : /images/bluetooth . png ；}]}，{ name: ；分组03 ，孩子:[{ ；名称 : 0 gt；测试， url : /images/bluetooth . png ；}，{ 名称 : 1 测试， url : /images/bluetooth . png ；}，{ 名称 : 2 ， url : /images/bluetooth . png ；}，{ 名称 : 测试3 ， url : /images/bluetooth . png ；}，{ 名称 : 测试4 ， url : /images/bluetooth . png ；}，{ 名称 : 测试5 ， url : /images/bluetooth . png ；}，{ 名称 : 测试6 ， url : /images/bluetooth . png ；}，{ 名称 : 测试7 ， url : /images/bluetooth . png ；}]}，{ name: ；分组04 ，孩子:[{ ；名称 : 0 gt；测试， url : /images/bluetooth . png ；}，{ 名称 : 1 测试， url : /images/bluetooth . png ；}，{ 名称 : 2 ， url : /images/bluetooth . png ；}，{ 名称 : 测试3 ， url : /images/bluetooth . png ；}，{ 名称 : 测试4 ， url : /images/bluetooth . png ；}，{ 名称 : 测试5 ， url : /images/bluetooth . png ；}，{ 名称 : 测试6 ， url : /images/bluetooth . png ；}，{ 名称 : 测试7 ， url : /images/bluetooth . png ；}]}，{ name: ；分组05，孩子:[{ ；名称 : 0 gt；测试， url : /images/bluetooth . png ；}，{ 名称 : 1 测试， url : /images/bluetooth . png ；}，{ 名称 : 2 ， url : /images/bluetooth . png ；}，{ 名称 : 测试3 ， url : /images/bluetooth . png ；}，{ 名称 : 测试4 ， url : /images/bluetooth . png ；}，{ 名称 : 测试5 ， url : /images/bluetooth . png ；}，{ 名称 : 测试6 ， url : /images/bluetooth . png ；}，{ 名称 : 测试7 ， url : /images/bluetooth . png ；}]}，]，itemWidth: wx.getSystemInfoSync()。windowWidth / 4，scrollarreaheight:wx . getsysteminfosync()。windowHeight - 44，float:false，Selecttab: 0，scrollToItem: null，scrollTop: 0，//到顶部列表的距离GroupHeight: 0，}，on ready:function(){ this . cacluitemheight()；}，scroll:function(e){ console . log( ；卷轴: ，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) {// Page向上滑动//如果列表的当前可视区域从底部到顶部的距离超过了所选项目从当前列表顶部的高度(且没有下标越界)，则选项卡栏If(current+1 := 0 ； scrollTop 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: ；v _ +e .当前目标。数据集。index})}，//计算每一项的高度，cacluItemHeight(){ let that = this；this . height arr =[]；设h = 0；const query = wx . createselectquery()；query . select all( # 39；. list -group -item # 39；).bounding client rect()query . exec(function(RES){ RES[0]。forEach((item)= gt；{ h+= item . height；that . heightarr . push(h)；})console . log(that . heightarr)；that . setdata({ listgroupheheight:that . heightarr[that . heightarr . length -1]} } })主要用在两个地方的逻辑代码中:

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

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

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

好了，就这些。基于以上内容，基本可以达到想要的滚动联动和tab联动效果。

【相关学习推荐:小程序开发教程】以上是小程序如何实现列表上下滚动联动效果的详细内容。请多关注主机参考其他相关文章！

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

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

本文由主机参考刊发，转载请注明：浅谈如何通过小程序实现列表滚动的联动效果 https://zhujicankao.com/75384.html