微信小程序实现单选功能

2019-11-19 12:36:58

字体：大中小

来源：转载

供稿：网友

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

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

WXML：

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

从大的分科分为两个大块一个是上面的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，个人感觉这种写法有一定的缺陷，希望有大牛指正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：傻瓜式解读koa中间件处理模块koa-compose的使用

下一篇：基于vue2.0实现仿百度前端分页效果附实现代码