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

模板视图

循环列表:

<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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,460评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,251评论 4 61
  • 亲爱的,你不是父母的续集,也不是子女的前传,更不是朋友的外篇,请问你想活成什么样子。尼采说,对待你的生命,不妨大胆...
    抬头r看a阅读 237评论 0 0
  • 01 “最近过得怎么样?” 最无可奈何的回复方式便是“还行吧”这三个字。 这个答案与别人无关,就是在自己心里面,最...
    Season_阅读 277评论 0 2