目录
页面布局,使用uni-app提供的scroll-view组件。api
tabtap点击切换效果,自定义一个tabtap事件,传递给父级,和vue语法同样框架
5.也是须要在data定义一下内容,newslist是循环遍历的tab内容的内容,大概数据结构就是这样的,swiperheight这个是须要动态计算可视区域内容的高度
7.动态计算高度,upx2x是吧px转换成upx,调用这个api,须要在onLoad生命周期写
一、tab顶部导航栏小程序
页面布局,使用uni-app提供的scroll-view组件。api
<template>
<view class="uni-tab-bar">
<scroll-view class="uni-swiper-tab" scroll-x>
<block v-for="(tab,index) in tabBars" :key="tab.id" :style="scrollStyle">
<view class="swiper-tab-list" :class="{'active' : tabIndex==index}" @tap="tabtap(index)" :style="scrollItemStyle"
> {
{tab.name}} {
{tab.num?tab.num:""}} <view class="swiper-tab-line"></view>
</view>
</block>
</scroll-view>
</view>
</template>
这个页面至关于封装一个组件,便于其余他们调用使用,tabIndex这个是tab内容,tabIndex对应的索引值,表示第几个。scrollStyle父级样式设置,scrollItemStyle每个tab内容样式设置数据结构
<script>
export default {
props:{
tabBars:Array,
tabIndex:Number,
scrollStyle:{
type:String,
default:""
},
scrollItemStyle:{
type:String,
default:""
}
},
methods:{
//点击切换导航
tabtap(index){
// this.tabIndex = index;
this.$emit('tabtap',index)
}
}
}
</script>
样式app
<style scoped >
.uni-swiper-tab{
border-bottom: 1upx solid #EEEEEE;
}
.swiper-tab-list{
color: #969696;
font-weight: bold;
}
.uni-tab-bar .active{
color: #343434;
}
.active .s