微信小程序实现单选功能


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 相关文章推荐
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
Javascript创建类和对象详解
May 31 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 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
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
JavaScript效率调优经验
2009/06/04 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
使用python实现knn算法
2017/12/20 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
python如何写try语句
2020/07/14 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
优秀学生党员先进事迹材料
2014/05/29 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang
Elasticsearch 索引操作和增删改查
2022/04/19 Python
德生2P3收音机开箱评测
2022/04/30 无线电
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL