您现在的位置是:网站首页>前端技术>VueVue
VUE 实现TAB菜单左滑始终居中显示效果
神夜2019-12-21 11:40:18【Vue】4049人已围观文章来源:神夜个人博客
简介VUE 实现TAB菜单左滑始终居中显示效果, 本实例借助vux的组件Scroller实现左滑让选中菜单始终居中效果。
VUE 实现TAB菜单左滑始终居中显示效果, 本实例借助vux的组件Scroller实现左滑让选中菜单始终居中效果。
<template> <div class="pages sekill-box"> <div class="sekill-header"> <div class="header"> <div class="return"></div> <h1>迎新年·秒杀</h1> </div> <div class="sekill-tab"> <scroller height="0.9rem" lock-y :scrollbar-x=false ref="scroller"> <ul> <li> </li> <li> </li> <li v-for="(item,index) in timeArr" :key="index" @click="selectTime(index)" :class="index===cur?'on':''"> <p class="p1">{{item.time}}</p> <p class="p2">{{item.text}}</p> </li> <li> </li> <li> </li> </ul> </scroller> </div> </div> </div> </template> <style> .pages.sekill-box { display: flex; padding-top:0; } .sekill-header{ height:1.85rem; width:100%; background:linear-gradient(136deg,rgba(252,81,59,1) 0%,rgba(218,42,44,1) 100%);} .sekill-header .header{ border:0; background:none; color:#fff; position: relative;} .sekill-header .header .return{ background:url(https://xgdj-img.oss-cn-shenzhen.aliyuncs.com/h5Resources/xguser/return@3x.png?x-oss-process=style/icon) no-repeat center; background-size:0.2rem auto;} .sekill-header .header h1{ color:#fff;} .sekill-header .vux-tab-wrap{ padding-top:0.9rem; margin-top:0.2rem;} .sekill-header .vux-tab-container{ height:0.9rem;} .sekill-header .sekill-tab{ height:0.9rem; overflow: hidden; position: relative;} .sekill-header .sekill-tab ul { height:0.9rem; transition: all 0.3s ease !important; overflow: hidden; } .sekill-header .sekill-tab ul li{ float:left; padding-top:0.1rem; color:#f1a5a5; text-align:center; } .sekill-header .sekill-tab ul li .p1{ font-size:0.26rem; font-weight: bold;} .sekill-header .sekill-tab ul li .p2{font-size:0.24rem; transform: scale(0.9); } .sekill-header .sekill-tab ul li.on .p1{ color:#fff; font-size:0.3rem; margin-top:-0.05rem;} .sekill-header .sekill-tab ul li.on .p2{ color:#fff; font-weight: bold; transform: scale(1);} </style> <script> import { Scroller } from 'vux' import $ from 'jquery' export default{ components:{Scroller}, data(){ return{ cur:0, liw:0, ulw:0, timeArr:[ {time:'08:00',text:'已结束'}, {time:'10:00',text:'抢购进行中'}, {time:'12:00',text:'即将开抢'}, {time:'14:00',text:'即将开抢'}, {time:'16:00',text:'即将开抢'}, {time:'18:00',text:'即将开抢'}, {time:'20:00',text:'即将开抢'}, ], } }, mounted(){ this.scrollWidth(); }, methods:{ scrollWidth(){ let windowW = window.innerWidth; let len = $(".sekill-tab ul li").length; this.liw = Number(windowW/5); this.ulw = len*this.liw; $(".sekill-tab ul li").width(this.liw); $(".sekill-tab ul").width(this.ulw); }, selectTime(index){ this.cur = index; let curw = this.liw * index; this.$refs.scroller.reset({left:curw}); } } } </script> <style> </style>
本栏推荐
猜你喜欢
站点信息
- 建站时间:2017-10-24
- 网站程序:Hsycms 3.0
- 文章统计:511条
- 微信公众号:扫描二维码,关注我们