用wx:for渲染数据，不确定有多少条数据，要使得点击当前数据获取当前数据的下一级数据，描述可能会不太清楚，就是实现图中这种功能：
wxml代码：
<!-- 这是要展示的规格 --><view wx:for="{{spec}}" wx:key="id" bindtap='selShopTc' data-index="{{index}}" style='{{key==index?"color:red;":""}} z-index:999;' class='spec'> <view>{{item.title}}</view></view><!-- 这是默认展示的价格 --><view wx:if="{{boolean == true}}"> <text>￥100</text></view><!--这是不同规格要展示的价格--><view wx:if="{{boolean == false}}"> <text> {{r}}{{jiage}}</text></view>js代码：
Page({ /** * 页面的初始数据 */ data: { boolean:true, spec: [{ title: "规格一" }, { title: "规格二" }, { title: "规格三" }, { title: "规格四" }, { title: "规格五" }], r: '', jiage: '', items: [{ price: "28" }, { price: "30" }, { price: "49" }, { price: "69" }, { price: "3" } ], }, selShopTc: function(res) { console.log(res) var array = this.data.items; var curIdx = res.currentTarget.dataset.index; var contentPrice = this.data.items[curIdx].price; var contentStock = this.data.items[curIdx].stock; this.setData({ key: res.currentTarget.dataset.index, //获取点击的当前规格的index jiage: contentPrice, r: "￥", boolean:false }) }})wxss代码：
.spec{ margin:20rpx}.spec view{ width:130rpx; height:70rpx; float: left; background:#eee; margin-right: 10rpx; display: flex; justify-content: center; align-content: center}
