一、效果图

二、代码

<template><view><view class="choose-tab"><view class="choose-tab-item" :class="chooseTab == 0 ? 'active' : ''" data-choose="0" @click="clickTab">选项1</view><view class="choose-tab-item" :class="chooseTab == 1 ? 'active' : ''" data-choose="1" @click="clickTab">选项2</view><view class="choose-tab-item" :class="chooseTab == 2 ? 'active' : ''" data-choose="2" @click="clickTab">选项3</view><view class="choose-tab-item" :class="chooseTab == 3 ? 'active' : ''" data-choose="3" @click="clickTab">选项4</view></view><view class="content"><view :style="chooseTab != 0 ? 'display:none' : ''">选项1内容</view><view :style="chooseTab != 1 ? 'display:none' : ''">二内容</view><view :style="chooseTab != 2 ? 'display:none' : ''">three content</view><view :style="chooseTab != 3 ? 'display:none' : ''">1+1+1+1=4</view></view></view>
</template><script>export default {data() {return {chooseTab: 0 //当前选中的选项卡：默认选中第一个~}},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数},methods: {clickTab: function (e) { //点击切换this.chooseTab = e.target.dataset.choose;//如果是微信小程序，可使用该方法改变当前设置的值/*this.setData({chooseTab: e.target.dataset.choose})*/}}}
</script><style>.choose-tab {display: flex;flex-flow: row;justify-content: space-between;width: 100%;height: 90rpx;line-height: 90rpx;text-align: center;border-bottom: 2rpx solid #ccc;}.choose-tab-item {width: 25%;}.active {color: red;border-bottom: 4rpx solid red;}.content {text-align: center;}
</style>

转载

转载大佬