一、实现效果
当有多项的导航,或者说切换项,超出页面的宽度,我们采取可滑动的方式比较好一些!并且在页面右边加个遮罩,模拟最右边有渐变效果!
二、实现代码
html代码:
<!-- 头部导航栏 --><view class="scroll-con"><scroll-view class="scroll-box" scroll-x="true" @scroll="scroll"><view class="scroll-item" :class="current == index? 'move':''" v-for="(item,index) in routeList" :key="item.id"@click="onchange(index)">{{item.text}}</view></scroll-view><view class="mask"></view></view>
选中的样式:
.move {background: url("../../static/image/index_pages/item-bg.png") no-repeat;background-position: center;background-size: contain;}
所有样式:
.scroll-box {white-space: nowrap;width: 100%;}.scroll-item {position: relative;display: inline-block;background-color: #F4F4F4;height: 58rpx;text-align: center;width: 128rpx;border-radius: 8rpx;font-size: 24rpx;line-height: 58rpx;font-weight: 400;color: #000;margin-right: 16rpx;}.scroll-con {margin-bottom: 32rpx;position: relative;}.mask {position: absolute;right: 0;top: 0;width: 100rpx;height: 58rpx;background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);}.move {background: url("../../static/image/index_pages/item-bg.png") no-repeat;background-position: center;background-size: contain;}
js里面定义的数据:
routeList: [{id: 1,text: '路线1'},{id: 2,text: '路线2'},{id: 3,text: '路线3'},{id: 4,text: '路线4'},{id: 5,text: '路线5'},{id: 6,text: '路线6'}],current: 0,
methods里面的切换方法:
onchange(index) {this.current = index},
不是很难对吧,其实也是使用了uniapp官网现成的!加以利用。