模板视图
循环列表:
<block wx:for="{{items}}">
<block wx:if="{{ti == index}}">
<text id="{{index}}" class="active" bindtap="getImage">{{item.name}}</text>
</block>
<block wx:else>
<text id="{{index}}" class="" bindtap="getImage">{{item.name}}</text>
</block>
</block>
js逻辑
var datas = {
//banner图
banner: app.imageSource + 'moshi_02.jpg',
ti:0,
items: [
{
name:"模式",
source_path: app.imageSource + 'moshi_02.jpg',
},
{
name: "灯光",
source_path: app.imageSource + 'picshow_03.jpg',
},
{
name: "空调",
source_path: app.imageSource + 'kongtiao_03.jpg',
},
{
name: "电视",
source_path: app.imageSource + 'tv_02.jpg',
},
{
name: "窗帘",
source_path: app.imageSource + 'curtain _03.jpg',
}
]
};
Page({
data: datas,
getImage: function (event) {
var that = this;
var index = event.currentTarget.id;
var imgSrc = datas.items[index].source_path;
that.setData({
banner:imgSrc,
ti: index,
})
},
})
注:三元运算(不循环)
<text id="{{items[0].index}}" class="{{index==0 ? 'active':''}}" bindtap="getImage">模式</text>
<text id="{{items[1].index}}" class="{{index==1 ? 'active':''}}" bindtap="getImage">灯光</text>
<text id="{{items[2].index}}" class="{{index==2 ? 'active':''}}" bindtap="getImage">空调</text>
<text id="{{items[3].index}}" class="{{index==3 ? 'active':''}}" bindtap="getImage">电视</text>
<text id="{{items[4].index}}" class="{{index==4 ? 'active':''}}" bindtap="getImage">窗帘</text>