微信小程序实现单选功能


Posted in Javascript onOctober 30, 2018

初次接触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,个人感觉这种写法有一定的缺陷,希望有大牛指正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 #Javascript
小程序实现多选框功能
Oct 30 #Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 #Javascript
详解微信小程序中组件通讯
Oct 30 #Javascript
vue移动端项目缓存问题实践记录
Oct 29 #Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 #Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 #Javascript
You might like
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
理解JS事件循环
2016/01/07 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
Element Alert警告的具体使用方法
2020/07/27 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
Python操作SQLite简明教程
2014/07/10 Python
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
python加载自定义词典实例
2019/12/06 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
《故乡》教学反思
2014/04/10 职场文书
投标承诺书怎么写
2014/05/24 职场文书
HR求职自荐信范文
2014/06/21 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
宇宙与人观后感
2015/06/05 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
详解Python生成器和基于生成器的协程
2021/06/03 Python
python使用torch随机初始化参数
2022/03/22 Python
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js