VPS参考测评推荐
专注分享VPS主机优惠信息
hostkvm优惠促销活动
zji优惠促销活动
衡天云优惠活动
亚马逊云aws.amazon.com最新优惠活动

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

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

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

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

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

以下是实现的呈现:

1.gif

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

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://zhujicankao.com/75384.html

【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡
打赏
转载请注明原文链接:主机参考 » 浅谈如何通过小程序实现列表滚动的联动效果
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!