300字范文 > 微信小程序滚动Tab选项卡：左右滑动切换触底加载分页

微信小程序滚动Tab选项卡：左右滑动切换触底加载分页

时间：2020-03-03 08:52:22

文章目录

效果图一、顶部标签栏二、列表内容部分swiper组件高度及上下滚动样式三、数据结构及赋值方法四、scroll组件触底事件(分页相关五、scroll组件的高度样式swiper组件scroll组件样式区别六、其他

效果图

一、顶部标签栏

定位顶部便签栏，使用color-ui的组件样式实现

<scroll-view scroll-x class="bg-white nav my-order_fixed"><view class="flex text-center"><view class="cu-item flex-sub {{index==TabCur?'text-red cur':''}}" wx:for="{{orderTypes}}" wx:key="index" bind:tap="tabSelect" data-index="{{index}}">{{item.title}}</view></view></scroll-view>

👆在横向滑动便签栏<scroll-view>下写页面内容即可，点击事件动态切换便签栏样式，并重置底下数据内容。

👆仅实现了点击便签栏刷新底部内容

二、列表内容部分

使用小程序轮播组件<swiper>实现左右滑动切换便签栏功能

重点在于轮播组件包裹下的数据内容结构以及如何赋值要考虑

👆只要我们绑定了轮播组件的current="{{TabCur}}"，是跟横向滑动标签栏对应的

即可实现点击便签栏触发修改Tabcur的值，自动联动轮播组件切换到相应的内容，且自带左右滑动动画效果。

swiper组件高度及上下滚动样式

轮播组件swiper必须设置其高度，可以通过class来设置css

.tab-box{margin-top: 100rpx;height: calc( 100vh - 100rpx );}

👆要减去定位布局而脱离文档流的顶部标签栏部分高度

calc计算calc(xx-xx)

注意：括号内运算符前后必须有空格！！！

设置轮播组件的高度后，发现内容是超出部分隐藏的，无法上下滑动显示内容

给轮播组件<swiper-item>添加样式overflow-y: scroll;，实现滚动

.tab-content{overflow-y: scroll;}

三、数据结构及赋值方法

同时这里的数据结构应该是个二维数组
即：一维数组中的项，由标签栏数量决定
二维数组中的内容才是接口返回列表数据

这里标签栏数量是写死的情况，若是动态的，则需要手动创建相应多少项的空数组

data:{list:['','','','',''], // 全部、待付款、待配送、配送中、已完成}

小程序setData给数组内部指定项赋值的操作如下

数组某一项(已知具体下标)赋值

this.setData({'array[0]':'changed data'})

数组某一项(下标为变量)赋值

'array[index]': 'xxxx',是不行的，index没有转为相应的数值

this.setData({[ `array[ ${index} ]` ]: 'changed data'})

对象某一项赋值

this.setData({'object.text': 'changed data'})

对象数组某一项对象的属性赋值

'array[index].text': 'xxxx',是不行的，index没有转为相应的数值

const price = `array[ ${index} ].price`this.setData({price: '123'})// 或者this.setData({[ `array[ ${index} ]` ]: 'changed data'})

👆至此标签栏点击切换底部数据内容(带动画)、左右滑动底部内容切换标签栏功能实现

其他小程序语法备忘(链接)

[目录图片]

四、scroll组件触底事件(分页相关

我们发现在轮播组件中页面的触底事件失效了，也就是我们的分页功能无法实现，这对于列表数据来说是致命的。

那只能放弃滑动内容切换标签功能了吗？不是！

既然小程序提供的页面触底事件无法触发，小程序还提供了<scroll-view>也是有触底事件的

因此，我们用<scroll-view>包裹列表数据内容
记得去除前面给<swiper-item>的滚动样式overflow-y: scroll;

<swiper class="tab-box" current="{{TabCur}}" duration="300" bind:change="switchTab"><swiper-item class="tab-content" wx:for="{{list}}" wx:for-item="orderList" wx:key="index"><scroll-viewscroll-ystyle="height: {{windowScrollHeight}}px;"bind:scrolltolower="getMore"><view>...</view></scroll-view></swiper-item></swiper>

👆在原有的轮播组件内，加上<scroll-view>，并设置为Y向滚动。

注意，<scroll-view是放在<swiper-item>里，也就意味着，有多少个标签项就有多少个<scroll-view>

通过事件bind:scrolltolower=""来触发触底事件

于是这就导致另外一个问题，分页相关的参数，不能共用，而是相互独立

因此，分页参数也设置为一个数组（不需要是二维数组，参数不是列表数据）

data:{list: [ '', '', '', '', '' ], // 列表数据-二维数组totals: [0,0,0,0,0], // 分页参数-一维数组isLoading: false,_pages: [{// 分页参数-一维数组page:1,limit:6},{page:1,limit:6},{page:1,limit:6},{page:1,limit:6},{page:1,limit:6}]}

赋值的时候要

this.setData({// 赋值给数组某项，判断是否拼接旧数组数据[`list[${TabCur}]`]: currentPageObj.page==1?res.list:[...this.data.list[TabCur],...res.list],[`totals[${TabCur}]`]: res.total,isLoading:false})

👇通过当前标签下标Tabcur在分页数组和列表数据二维数组中判断触底事件

/*** 页面上拉触底事件的处理函数*/getMore: function () {const TabCur = this.data.TabCurif ( this.data.totals[TabCur]<=this.data.list[TabCur].length ) {return console.log('没有数据了')}this.data._pages[TabCur].page++this.init()}