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

uniapp 简单实现TAB切换滑动效果

神夜2020-08-11 16:36:18uniapp3901人已围观文章来源:神夜个人博客

简介

uniapp 简单实现TAB切换滑动效果,下面已封装成了一个插件,传入数组直接使用就OK了



<style scoped lang="scss">
 .tabulborder-top:1px solid #f1f1f1z-index:22width:100%display:flexalign-items:centerpositionfixedleft:0top:0height:90rpx; background:#fffbox-shadow:#eee 0 0 15rpx;
  .linewidth:50rpx; transitionall 0.3s easeheight:2pxbackground:$uni-color-primary; positionabsolutebottom:0left:0content:''display:blockz-index:1;}
  .itemflex:1height:90rpx; overflow:hiddenpositionrelativetext-align:center;
    text{positionabsoluteleft:0top:0background:#fffdisplay:blockwidth:100%line-height:90rpx; height:100%;}
   text:nth-child(2){   transform:scale(0); opacity:0transition:all 0.5s easecolor:$uni-color-primary;}
   &.ontext:nth-child(1){ transform:scale(0); opacity:0;} text:nth-child(2){  transform:scale(1.1); opacity:1;}  }
  }
 }
 /* #ifdef H5 */
 .tabul{top:44px;}
 /* #endif */
style>
<template>
 <view class="tabul">
   <view class="line" :style="'transform:translateX('+translateX+'px)'">view>
   <view class="item" @tap="changeType(index)" :class="tabIndex==index?'on':''v-for="(item,index) in list" :key="index">
    <text>{{item}}text>
    <text>{{item}}text>
   view>
 view>
template>

<script>
  export default{
     name:'Tab',
     props:{
       list:{
         type:Array,
       }
     },
     data(){
       return{
         tabIndex:0,  
         translateX:0       
       }
     },
     mounted(){
       this.transTabX();
     },
     
     methods:{
        //tab底线滚动
        transTabX(){
          let windowWidth = this.app.globalData.systemInfo.windowWidth;
          let itemW = this.tabIndex * (windowWidth / this.list.length);
          this.translateX = itemW + (windowWidth / this.list.length / 2 - 10);        
        }, 
               
        changeType(e){
           this.tabIndex = e;
           this.transTabX();
           this.$emit("change",e);
        },
        
        swipertab(e){
          this.tabIndex = e;
          this.transTabX();
        }
     }
  } 
script>


站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:511条
  • 微信公众号:扫描二维码,关注我们