uniapp 简易滑块切换，简单易改-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 简易滑块切换，简单易改。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp 简易滑块切换，简单易改,uni-app,前端文章来源地址https://www.toymoban.com/news/detail-808046.html

<template>
	<view class="my-tab w-100 flex-center">
		<view class="tab-without">
			<view class="switch-tab w-100" :style="{height:height,borderRadius:borderRadius,border:borderBox,width:width,backgroundColor:mainBg}">
				<block v-for="(item,index) in tabList" :key="index">
					<view class="h-100 one flex-center font-weight-550" @click="tabClick(index)">{{item}}
					</view>
				</block>
			</view>
			<view class="zg-view flex-center"
				:style="{left:tabLeft,borderRadius:radius,backgroundColor:bgColor,color:textColor,height:height,width:themeWidth}">
				{{tabList[tabIndex]}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/* 主体的所需数据的宽度*/
			width: {
				type: String,
				default: "572rpx"
			},
			/* 主体的所需数据的高度*/
			height: {
				type: String,
				default: "52rpx"
			},
			/* 主体的所需数据的圆角*/
			borderRadius: {
				type: String,
				default: "26rpx"
			},
			/* 主体的所需数据的边框*/
			borderBox: {
				type: String,
				default: '2rpx solid #333333'
			},
			/* 主体的所需数据的背景颜色*/
			mainBg: {
				type: String,
				default: '#fff'
			},
			/* 切换的数据 */
			tabList: {
				type: Array,
				default: () => {
					return ['本月数据', '季度数据', '半年数据', '本年数据']
				}
			},
			/* 滑块的背景色 */
			bgColor: {
				type: String,
				default: "#333"
			},
			/* 滑块的文字颜色*/
			textColor: {
				type: String,
				default: "#fff"
			},
			
			
		},
		computed: {
			/* 计算滑块的宽度占比 */
			themeWidth() {
				return 100 / this.tabList.length + '%'
			},
			/* 滑块移动的距离 */
			tabLeft() {
				return (100 / this.tabList.length) * this.tabIndex + '%'
			},
			/* 滑块的圆角 */
			radius() {
				let text = ''
				if (this.tabIndex == 0 && this.borderRadius != '') {
					text = `${this.borderRadius} 0 0 ${this.borderRadius}`
				}
				if (this.tabList.length - 1 == this.tabIndex && this.borderRadius != '') {
					text = `0 ${this.borderRadius}  ${this.borderRadius} 0`
				}
				return text
			}
		},
		data() {
			return {
				tabIndex: 0
			}
		},
		methods: {
			/* 切换方法，同时向外暴露当前点击的按钮 */
			tabClick(index) {
				this.tabIndex = index
				this.$emit('tabClick', index)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.h-100 {
		height: 100%;
	}

	.one {
		flex: 1;
	}

	.w-100 {
		width: 100%;
	}

	/* 字体权重 */
	.font-weight-500 {
		font-weight: 500;
	}

	.font-weight-550 {
		font-weight: 550;
	}

	.font-weight-600 {
		font-weight: 600;
	}

	.font-weight-700 {
		font-weight: 700;
	}

	.font-weight-bold {
		font-weight: bold;
	}

	.my-tab {
		font-size: 24rpx;

		.tab-without {
			position: relative;

			.switch-tab {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.zg-view {
				position: absolute;
				top: 0;
				left: 0;
				transition: all .3s;
			}
		}

	}
</style>

到了这里，关于uniapp 简易滑块切换，简单易改的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！