您现在的位置是:网站首页>前端技术>uniappuniapp
uniapp 简单实现TAB切换滑动效果
神夜2020-08-11 16:36:18【uniapp】3901人已围观文章来源:神夜个人博客
简介
uniapp 简单实现TAB切换滑动效果,下面已封装成了一个插件,传入数组直接使用就OK了
<style scoped lang="scss">
.tabul{ border-top:1px solid #f1f1f1; z-index:22; width:100%; display:flex; align-items:center; position: fixed; left:0; top:0; height:90rpx; background:#fff; box-shadow:#eee 0 0 15rpx;
.line{ width:50rpx; transition: all 0.3s ease; height:2px; background:$uni-color-primary; position: absolute; bottom:0; left:0; content:''; display:block; z-index:1;}
.item{ flex:1; height:90rpx; overflow:hidden; position: relative; text-align:center;
text{position: absolute; left:0; top:0; background:#fff; display:block; width:100%; line-height:90rpx; height:100%;}
text:nth-child(2){ transform:scale(0); opacity:0; transition:all 0.5s ease; color:$uni-color-primary;}
&.on{ text: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条
- 微信公众号:扫描二维码,关注我们