uniapp中实现选项卡

最新推荐文章于 2024-06-22 14:50:08 发布

xniYa!

最新推荐文章于 2024-06-22 14:50:08 发布

阅读量234

点赞数 1

分类专栏： uniapp 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52134424/article/details/126846368

版权

本文详细介绍了如何在uniapp框架下实现功能丰富的选项卡组件。通过结合vue.js的组件化特性，利用javascript进行交互逻辑处理，实现了动态切换和内容加载效果。适合前端开发者参考学习。

摘要由CSDN通过智能技术生成

<template>
	<div>
		<view class="tab_nav">
			<view class="navTitle" v-for="(item,index) in navList" :key="index">
				<view :class="{'active':isActive === index}" @click="checked(index)">
					{
  {item.title}}
				</view>
			</view>
		</view>
		<view class="nav_item" v-if="isActive==0">
			123
		</view>
		<view class="nav_item" v-if="isActive==1">
			456
		</view>
		<view class="nav_item" v-if="isActive==2">
			789
		</view>
		<view class="none">
			没有更多了哦~
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 0,
				navList: [{
					index: 0,
					title: '全部订单'
				}, {
					inde

最低0.47元/天解锁文章