工作室网站制作,织梦品牌集团公司网站模板(精),网站域名 邮箱,建设银行网站无法打开一、实现效果 当有多项的导航#xff0c;或者说切换项#xff0c;超出页面的宽度#xff0c;我们采取可滑动的方式比较好一些#xff01;并且在页面右边加个遮罩#xff0c;模拟最右边有渐变效果#xff01;
二、实现代码
html代码#xff1a;
!-- 头部导航栏 --…一、实现效果 当有多项的导航或者说切换项超出页面的宽度我们采取可滑动的方式比较好一些并且在页面右边加个遮罩模拟最右边有渐变效果
二、实现代码
html代码
!-- 头部导航栏 --view classscroll-conscroll-view classscroll-box scroll-xtrue scrollscrollview classscroll-item :classcurrent index? move: v-for(item,index) in routeList :keyitem.idclickonchange(index){{item.text}}/view/scroll-viewview classmask/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官网现成的加以利用。
