我想实现上图这种功能,点击不同的年份按钮,在其下方显示相应内容,其他按钮下的内容自动隐藏。
我现在的思路是这样的:
Page({
data: {
riqi:[
"2015",
"2016",
"2017"
],
isshow:[],
},
onLoad: function () {
var that=this
var arr1=that.data.riqi
var arr2=that.data.isshow
for(var i =0;i<arr1.length;i++){
arr2[i]=false
}
that.setData({
isshow:arr2
})
},
showjl:function(e){
var id = e.currentTarget.dataset.id
console.log(id)
var that=this
var arr1=that.data.isshow
for(var i=0;i<arr1.length;i++){
arr1[i]=false
}
arr1[id]=true
that.setData({
isshow:arr1
})
console.log(that.data.isshow)
},
})
DATA中两个数组,一个riqi记录按钮的数量和显示内容,一个isshow控制按钮下的内容是否显示。
<block wx:for="{{riqi}}" wx:key="index">
<template is="temp-sj" data="{{item}}" />
</block>
<template name="temp-sj">
<button data-id="{{index}}" bindtap="showjl">{{item}}</button>
<view wx:if="{{isshow}}">
9999999999
</view>
</template>
目前我这种方法肯定是不行的data-id="{{index}}"这个根本就没有数据,换成data-id="{{item}}",并修改JS文件倒是可以,但<view wx:if="{{isshow}}">也不行,<view wx:if="{{isshow[item]}}">也不行。