首先是一个头部的tag切换栏,这个很简单,就不多说
源码奉上
<scroll-view scroll-x class="border scroll-row" style="height: 80rpx;">
<view class="scroll-row-item" style="height: 80rpx;line-height: 80rpx;" v-for="(item,index) in tabBars"
:key="index" :class="tabIndex===index?'main-text-color':''">
<text class="font-md mx-3">{{item.name}}</text>
</view>
</scroll-view>
然后对应的就是一个可纵向滚动的也可左右滚动的页面,
这里的实现思路是使用轮播图嵌套scroll标签,
源码如下
<swiper :current="tabIndex" >
<swiper-item v-for="(item,index) in tabBars" :key="index">
<scroll-view scroll-y>
<view>{{index}}</view>
</scroll-view>
</swiper-item>
</swiper>
但是这样写会有一个问题,那就是scroll的高,不是全屏的
如下,不设置高,那么高度就是子元素的高,
而且scroll要想纵向滚动,本来就应该给它设置一个高,
这是就需要获取到屏幕可视区域的高度了,然后再减去我自己写的tag切换栏的高度,那就是页面剩余高度了
如下图,这两个不用担心,因为这是uniapp自带的,所以不用去管,直接减去我自己写的tag切换栏的高度就好
如下,使用uni的getSystemInfo,可以在success内获取到页面的可视高度,然后减去自定义的tag切换蓝高度
最后将的出来的高度赋值给一个变量
然后就可以在页面上使用了
uni.getSystemInfo({
success: res => {
this.scrollH = res.windowHeight - uni.upx2px(80)
}
})
如下,在html中动态绑定刚刚算出来的值的值
最后查看效果
