Uniapp使用Swiper+ScrollView 写Tabs导航条组件
前言:
经验分享，业务场景中日常使用Tabs切换组件,而Uniapp路由，滑动切换，写项目的时候整理了下面这样的一个模板
效果图：
晚点补充
关键点：
1.Swiper需要固定高度的，无法被内容撑开，这边写了一个函数setSwiperHeight（）去动态计算高度
HTML:
<swiper :current="tabIndex" :style="{ height: swiperheight + 'px' }" @change="swiperChange">
<swiper-item class="wisdomActivity" v-for="(tabitem, tabs_i) in tablist" :key="tabs_i">
</swiper-item>
</swiper>JS:
setSwiperHeight() {
let windowHeight = uni.getSystemInfoSync().windowHeight;
var query = uni.createSelectorQuery();
query
.select('.uni-swiper-header')
.boundingClientRect(rect => {
if (rect) {
this.swiperheight = windowHeight - rect.height;
}
})
.exec();
}摘自Uniapp官方文档：
nodesRef.boundingClientRect(callback)添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。
2.NoContent与Content
这里实现的目的是tabs切换页面的时候，如果Content为空，则请求数据，否则就不请求。
tablist: [
{
Name: '标签1',
noContent: true, //Content是否有内容
Content: []
},
{
Name: '标签2',
noContent: false,
Content: []
},
......
]JS请求内容方法
isconcat true下拉加载更多(是否拼接数据) false刷新重新请求整个列表
getContentList(isconcat) {
//isconcat True下拉加载更多 false 刷新
let offset = 0;
let that = this;
if (isconcat) {
offset = that.tablist[that.tabIndex].Content;
}
// 假象接口 offset 10为获取内容长度
GetContent(offset, 10).then(res => {
let TmpList = that.tab;
if (res.Success) {
if (res.Data == null) {
res.Data == {};
}
if (isconcat) {
TmpList = TmpList.concat(res.Data);
} else {
TmpList = res.Data;
}
that.tablist[that.tabIndex].Content = TmpList;
}
});
}使用位置
// 初始化
onReady() {
this.getContentList(false);
}, // 下拉加载更多
getMore() {
this.getContentList(true);
},
