微信小程序－js实现单选功能

   初次接触js弄了好长时间才出来效果，但是还是觉的不做梦完美，希望有更好的方式进行交流；实现效果如下：

虽说这个小功能但是对于我这个新手来说还是有点难；具体代码如下：

WXML：

    
        最多可增加4个功能入口
    
    
        
             
                 
                    
                
                 
                 	{{item.title}}
                     {{item.sub_title}}
                  
                  
                  
                    
                  
            
         
        
    

从大的分科分为两个大块一个是上面的header  剩下的列表是另外一个部分，列表中又分为若干个小块，本打算写个模版，但是感觉这样更清晰 

WXSS：

.backgrout-bj{
    
    flex-wrap: wrap;    

}
.backgrout-bj .header{
 
    display: block;
    font-size: 13px;
    text-align: center;
    color: orange;
    padding: 10px;
    width: 100%;
}
.model-list{

    border-bottom: 1px solid lightgrey;
   display: flex;
   align-items: center;
}

.middle-img{
    padding: 10px;
    width: 70px;
    height: 70px;
   display: block;
   flex: 1;
    overflow: hidden;
}
.middle-title{
  margin: 10px;
  display: block;

 
}
.middle-sub{
    font-size: 14px;
    color: lightgray;
    margin-top: 10px;
}

.seletedImage{
    width: 20px;
    height: 20px;
}

可能有些乱，希望大牛纠正；

JS：

Page({
  data:{
    // text:"这是一个页面"
    model:[
      { 
        image:'../image/guapai_icon.png',
        title:'挂牌',
        sub_title:'进行松香交易，松香买卖。。。',
        selectImage:false
      },
      { 
        image:'../image/tianjia_maoyi.png',
        title:'贸易',
        sub_title:'根据需求，快速的为您提供服务',
        selectImage:true
      }
    ]

  },
  selectClick:function(event){
   
     // this.data.model[event.currentTarget.id].selectImage

      for(var i = 0; i < this.data.model.length;i++){
        if(event.currentTarget.id == i){
       
       
              this.data.model[i].selectImage = true 
           }
           else
          {
            
             this.data.model[i].selectImage = false
          }

      }
       this.setData(this.data)

  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数

  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

主要思路为循环数组的所有原素，当点击的id和i值想等的时候 就把里面的selectImage属性改为true 其他的改为false,个人感觉这种写法有一定的缺陷，希望有大牛指正，

    转载请标明出处，谢谢