uni-app实现tabbar选项卡切换
1.页面结构
<template>
<view>
<scroll-view scroll-x="true" class="scroll-row" :scroll-into-view="scrollInto" scroll-with-animation>
<view v-for="item,index in tabBars" :key="item.id" class="scroll-row-item px-3 py-2 font-md"
:class="tabIndex===index?'text-main font-lg font-weight-bold':''" @click="changeTab(index)" :id="'tab'+index">
{{item.name}}
</view>
</scroll-view>
<!-- 滑块视图 -->
<swiper :duration="500" :current="tabIndex" @change="onCangeTab()">
<swiper-item v-for="item,index in tabBars" :key="item.id">
<view class="swiper-item">{{item.name}}</view>
</swiper-item>
</swiper>
</template>首先我们使用 <scroll-view>定义了一个可滚动视图区域。用于区域滚动，并添加了一下属性 scroll-x：设置横向滚动 :scroll-into-view：值为元素id实现滚动到指定元素该元素的值必须与view元素的id相同 scroll-with-animation：元素滚动添加过渡效果 添加:scroll-into-view前 `
添加后
我们在滚动元素view做了如下事情
1.循环动态数据
2.绑定class属性使当前被点击元素高亮
3.绑定id属性与scroll-into-view配合实现滚动元素效果
4.添加click事件
changeTab(index){
if(this.tabIndex===index){
return;
}
this.tabIndex=index//使当前索引等于元素索引
this.scrollInto = 'tab'+index // 滚动到指定元素
}在滑块视图组件<swiper>我们做了如下事情
1.添加duration属性设置滑动动画时长
2.绑定current属性以实现选项卡与滑块视图关联（点击选项卡展示对应滑块）
3.添加事件change，滑块视图滑动时与选项卡同步（滑动滑块展示对应选项卡）
当页面滑动时会触发change事件
onChangeTab(e){
console.log(e)
},当页面滑动时我们接受对象e
current表示当前滑块视图索引
可以看到滑动的时候，滑块视图与选项卡并没有关联
如何让他们关联？
很简单，tabIndex=当前的滑块索引即可
//监听滑动
onChangeTab({detail}){
this.tabIndex=detail.current
},
选项卡已经跟页面关联了 接下来我们来开发滑块视图的y轴滚动区域
我们在滑块视图要展示每一个栏目下的文章列表，并且文章列表可以滑动（纵向滑动） 要实现上面需求我们在滑块视图里面在嵌套一个滚动区域
<!-- 滑块视图 -->
<swiper :duration="500" :current="tabIndex" @change="onChangeTab">
//文章列表
<swiper-item v-for="item,index in tabBars" :key="item.id">
<scroll-view scroll-y="true" >
<view v-for="i in 100" :key="i">{{i}}</view>
</scroll-view>
</swiper-item>
</swiper>可以看到只显示了部分数据，并且不能纵向滚动。
这里的解决办法是给滑块视图一个具体的高度，不过这个高度需要我们计算滑块视图的高度= 导航栏的高度-底部选项卡的高度-顶部滑块高度
1.给顶部选项卡一个高度 100rpx
2.页面加载的时候获取当前窗口可使用的窗口高度，并将这个高度值赋给滑块视图 官方文档 API->设备->系统信息
onLoad() {
let res = uni.getSystemInfo({
success:res=>{
console.log(res)
}
})
},打印数据如下 windowHeight就是导航栏的高度减去底部选项卡之后的高度 我们还要用这个高度减去顶部滑块选项卡的高度即可得到滑块视图的y轴滚动区域的高度
在页面加载时设置顶部选项卡高度
let res = uni.getSystemInfo({
success:res=>{
this.scrollH = res.windowHeight - uni.upx2px(100)
}
})这时候页面已经能正常显示了，我们为每个选项卡添加测试数据
data(){
return{
...
newslist:[{
list:[]
}]
}
...
}
methods: {
//获取数据
getData(){
var arr = []
for(let i = 0;i<this.tabBars.length;i++){
// 生成列表模板
let obj = {
list:[{
username:"昵称",
userpic:"/static/test/gd1.jpg",
newstime:"2020-09-12-9 下午 5：65",
isFollow:true,
title:"测试标题",
titlepic:"/static/test/gd1.jpg",
support:{
type:"support",
support_count:1,
unsupport_count:1
},
comment_count:1,
share_num:2
},
{
username:"昵称",
userpic:"/static/test/gd1.jpg",
newstime:"2020-09-12-9 下午 5：65",
isFollow:true,
title:"测试标题",
titlepic:"/static/test/gd1.jpg",
support:{
type:"support",
support_count:2,
unsupport_count:1
},
comment_count:1,
share_num:2
}]
}
arr.push(obj)
}
this.newslist = arr
},
.
.
.//当页面加载时渲染数据
onLoad() {
let res = uni.getSystemInfo({
success:res=>{
this.scrollH = res.windowHeight - uni.upx2px(100)
}
})
//渲染数据
this.getData()组件代码省略 生成效果如下
