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

本站:VPS参考评测推荐,专注分享VPS服务器优惠信息!若您是商家也可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
部分文章发布时间较久远,可能存在未知因素,购买时建议在本站搜索商家名称,可查看相关文章充分了解商家!若非中文页面可使用谷歌浏览器同步翻译!PayPal代付/收录合作

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

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联动效果。

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

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

推荐站内搜索:国外空间租用、日本代理服务器ip、域名解析查询、广东服务器托管、国内空间、腾讯云服务器12元一年、国内永久免费云服务器、ip在线代理宽带ip地址查询、外国虚拟主机、