点击标签栏动态改变页面数据

给标签栏一个点击事件

<view class="nav-2" v-for="(item,index) in tabBars" :key="index" :class{'active':index==Aindex}" @click="qh(index)">
	{{item.classname}}
</view>

在methos事件方法中

	qh(index) {
	            // 获取到点击标签的下标
				console.log(index)
				uni.request({
				//因为数据的下标是从1开始的，索引的下标是从0开始的
				//在动态绑定索引下标的时候+1  ${index+1}  记得用``这个符号
					url: `https://ceshi2.dishait.cn/api/v1/postclass/${index+1}/post/1`,
					method:"get",
				}).then(res=>{
					console.log(res)
					//将数据给home进行页面渲染
					this.home = res[1].data.data.list
					//下面是将数据中的时间戳转换成时间
					res[1].data.data.list.forEach(item => {
						var date = new Date(parseInt(item.create_time) * 1000);
						// console.log(date)
						console.log(date.getHours())
						item.create_time =
						// 判断小时是否大于12，大于12的话显示下午，否则显示上午
							`${date.getHours()>12?'下午'+date.getHours():'上午'+date.getHours()}:${date.getMinutes()}`
					})
				})
			}

动态属性绑定：

点击标签的时候，让点击的标签动态获取class样式，并将索引传递给点击事件

js代码

//:class{'active':index==Aindex}" @click="qh(index)"
<view class="nav-2" v-for="(item,index) in tabBars" :key="index" :class{'active':index==Aindex}" @click="qh(index)">
	{{item.classname}}
</view>

data中的代码

	//默认选中第一个	
   Aindex: 0

methods中的代码

  qh(index) {
     this.Aindex = index
    }

style中的代码

	.active {
		color: #FF4A6A;
		font-weight: 700;
		font-size: 20px;
	}