后台变量activeIndex和传进来的index相等时,把index赋值给activeIndex，那么这两个变量就相等了，那么三元表达式就成立，就会调用active样式，
而其他项目不等就调用不了，效果就实现了。前端的变量index是改了名的i要注意。
红色代码为关键代码：
界面
<view wx:for="{{arr}}" wx:key="index" wx:for-item="it" wx:for-index="i" bindtap="clickItem" data-item={{it}}
data-index={{i}} class="box {{activeIndex==i? 'active':''}}">
{{it.name}}--{{it.price}}--{{i}} {{activeIndex}} {{i}}
</view>
js：
const app = getApp()
Page({
data: {
title: "预约系统",
arr: [{
name: "苹果",
price: "6"
},
{
name: "香蕉",
price: "10"
},
{
name: "香蕉",
price: "10"
},
{
name: "香蕉",
price: "10"
}
],
num:0,
activeIndex:-1
},
onLoad: function () {
console.log('Welcome to Mini Code')
},
handleClick(){
console.log(this.data.num);
this.data.num=this.data.num+1;
this.setData({num:this.data.num})
},
clickItem(e){
//console.log(e);
let {item,index}=e.currentTarget.dataset;
console.log(item);
console.log(index);
this.setData({activeIndex:index});
console.log(this.data.activeIndex)
}
})
wxss:
.intro {
margin: 30px;
text-align: center;
}
.active{color: red;}
.box{border: solid 1rpx blue;margin-top: 10rpx;}