4、给选项卡添加可以滑动的容器swiper
给选项卡添加可以滑动的容器swiper给swiper的current关联上tabIndex
5、将顶部选项卡雨滑动容器关联
给swiper添加监听事件@change="onChangeTab"
//滑动监听
onChangeTab(e){
console.log("滑动"+e)
this.changeTab(e.detail.current);
},
6、在滑动容器中添加y轴的滚动列表
在滚动容器中添加scroll-view给顶部选项卡设置一个高度获取可使用窗口高度计算剩余的高度将滚动区域的高度绑定道计算出的高度
:style="'height:'+scrollH+'px;'"> {{i}}
onLoad() {
uni.getSystemInfo({
success: res => {
console.log(res.windowHeight);
this.scrollH = res.windowHeight-uni.upx2px(81);
}
})
}
7、遍历各个tab列表数据
定义获取数据方法getDaTa()遍历tabBars，给每个分别赋值加载是根据选项生成列表this.getDaTa()
:style="'height:'+scrollH+'px;'"> @doSupport="doSupport">
getDaTa(){
var arr=[];
for (let i = 0;i let obj= { list:[{ username:"唐三", userpic:"../../static/userpic/14.jpg", isFollow:false, title:"走出去，你才发现你跟别人差的不是一点半点", titlepic:"../../static/datapic/18.jpg", support:{ type:"support",//顶 support_count:1, unsupport_count:2 }, comment_count:5, share_num:6 }, { username:"小舞", userpic:"../../static/userpic/10.jpg", isFollow:false, title:"走出去，你才发现你跟别人差的不是一点半点", titlepic:"", support:{ type:"unsupport",//踩 support_count:1, unsupport_count:2 }, comment_count:4, share_num:3 },{ username:"戴沐白", userpic:"../../static/userpic/16.jpg", isFollow:false, title:"走出去，你才发现你跟别人差的不是一点半点", titlepic:"../../static/datapic/20.jpg", support:{ type:"",//未操作 support_count:1, unsupport_count:2 }, comment_count:4, share_num:3 },{ username:"宁荣荣", userpic:"../../static/userpic/17.jpg", isFollow:false, title:"走出去，你才发现你跟别人差的不是一点半点", titlepic:"../../static/datapic/21.jpg", support:{ type:"",//未操作 support_count:1, unsupport_count:2 }, comment_count:4, share_num:3 }] } arr.push(obj) } this.dynlist=arr; },