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

来源：互联网发布：协同过滤推荐算法原理编辑：程序博客网时间：2024/06/05 16:47

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

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

WXML：

<span style="color:#333333;"><view class="backgrout-bj">    <view class="header">        最多可增加4个功能入口    </view>    <view>        <block wx:for="{{model}}">             <view class="model-list" bindtap="selectClick" id="{{index}}">                 <view>                    <image class="middle-img" src="{{item.image}}"></image>                </view>                 <view class="middle-title">                 <view><text>{{item.title}}</text></view>                     <view class="middle-sub"><text>{{item.sub_title}}</text></view>                  </view>                  <!--<view  hidden="{{item.selectImage}}">                    <image src="../image/xuanze.png" class="seletedImage"></image>                  </view>-->                  <view  wx:if="{{item.selectImage==true}}">                    <image src="../image/xuanze.png" class="seletedImage"></image>                  </view>            </view>                 </block>    </view></view></span>

从大的分科分为两个大块一个是上面的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：

<span style="color:#333333;">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(){    // 页面关闭  }})</span>

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

转载请标明出处，谢谢

1 0