您现在的位置是:网站首页>前端技术>VueVue

VUE 实现TAB菜单左滑始终居中显示效果

神夜2019-12-21 11:40:18Vue4049人已围观文章来源:神夜个人博客

简介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>&nbsp;</li>
          <li>&nbsp;</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>&nbsp;</li>
          <li>&nbsp;</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条
  • 微信公众号:扫描二维码,关注我们