官网:
http://ext.dcloud.net.cn/plugin?id=54
先下载:
npm install @dcloudio/uni-ui -D
1.引入组件
import { uniSegmentedControl} from "@dcloudio/uni-ui";
2.注册组件
components: {
uniSegmentedControl
},
3.复制数据\方法
data() {
return {
items: ['选项卡1','选项卡2','选项卡3'],
current: 0
}
},
methods: {
onClickItem(e) {
if (this.current !== e.currentIndex) {
this.current = e.currentIndex;
}
}
}
4.template中使用
<view>
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" active-color="#4cd964"></uni-segmented-control>
<view class="content">
<view v-if="current === 0">
选项卡1的内容
</view>
<view v-if="current === 1">
选项卡2的内容
</view>
<view v-if="current === 2">
选项卡3的内容
</view>
</view>
</view>
本文地址:https://blog.csdn.net/weixin_49651379/article/details/110141123
黄山市民网:https://www.huangshanshimin.com/