uniapp 创建简单的tabs
2024-10-10 09:19:45
tabs组件
<template>
<view class="tabs">
<view class="bar" :style="barStyle"><view class="inner"></view></view>
<view v-for="(it, index) of tabs" :key="it" class="item" :class="{ active: active === index }" @click="onClick(index, $event)">
<text>{{ it }}</text>
</view>
</view>
</template>
<script>
export default {
name: 'my-tabs',
props: {
tabs: {
type: Array,
default: () => []
},
// 选中默认index
active: {
type: Number,
default: 0
}
},
data() {
return {
barStyle: {
transform: 'translateX(0%)'
}
};
},
methods: {
onClick(index, $event) {
this.$emit('onClick', index);
if (index !== this.active) {
this.$emit('onChange', index);
}
}
},
watch: {
tabs: {
handler: function(val) {
this.barStyle.width = `${100 / val.length}%`;
},
immediate: true
},
active: {
handler: function(val) {
// animated
this.barStyle.transform = `translateX(${val * 100}%)`;
},
immediate: true
}
}
};
</script>
<style lang="stylus" scoped>
.tabs
position relative
display flex
align-items center
background-color #fff
.item
display flex
flex 1
align-items center
justify-content center
padding 30rpx
font-size 30rpx
transition ease 0.3s
&.active
color red
transition color ease 0.3s
.bar
position absolute
left 0
bottom 0
height 6rpx
transition transform ease 0.3s
display flex
align-items center
justify-content center
.inner
width 100%
height 100%
box-sizing border-box
margin 0 20rpx
border-radius 18rpx
background-color red
</style>
使用
<myTabs :tabs="tabs" :active="active" @onChange="active = $event"></myTabs>
<view v-if="active == 0" class="list1">list1</view>
<view v-if="active == 1" class="list2">list2</view>
import myTabs from '@/shared/widgets/my-tabs.vue';
export default {
components: { myTabs },
data() {
return {
tabs: ['t0', 't1'],
active: 0
};
},
methods: {}
};
最新文章
- Andy - 又一款速度流畅的免费安卓 Android 模拟器 (支持手机无线控制电脑模拟器)
- 固定导航(Sticky nav)
- node中简单scoket介绍
- iOS App中数据加载的6种方式
- Codeforces Educational Codeforces Round 3 A. USB Flash Drives 水题
- Java _Map接口的使用（转载）
- 关于PHP定时执行任务的实现(转)
- IIS 5.x/6.0/7.0 和 ASP.NET
- 读【10问PHP程序员】 有感
- JPA:identifier of an instance of was altered from
- 【重新发布，代码开源】FPGA设计千兆以太网MAC（1）——通过MDIO接口配置与检测PHY芯片
- [Java Web学习]Tomcat启动时报war exploded: Error during artifact deployment
- 16.观察者模式（Observer Pattern）
- servlet 验证码生成
- oracle上机实验内容
- C#图片处理(转zhjzwl/archive)
- Eclipse技巧
- MathExam6378
- Miller_Rabbin大素数测试
- C# 跨服务大文件复制