美文网首页
小程序-在模板中循环输出

小程序-在模板中循环输出

作者: 糯米卷爱吃玉米 | 来源:发表于2017-06-08 14:26 被阅读0次

模板视图

循环列表:

<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>

相关文章

网友评论

      本文标题:小程序-在模板中循环输出

      本文链接:https://www.haomeiwen.com/subject/cxxtqxtx.html