微信小程序实现单选功能


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实现div阴影效果示例代码
Sep 16 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
在Vue中使用HOC模式的实现
Aug 23 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
第九节 绑定 [9]
2006/10/09 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
PHP _construct()函数讲解
2019/02/03 PHP
javascript中检测变量的类型的代码
2010/12/28 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
家长给学校的建议书
2014/05/15 职场文书
2015年财务部工作总结
2015/04/10 职场文书
跑吧孩子观后感
2015/06/10 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
Python中使用subprocess库创建附加进程
2021/05/11 Python
总结python多进程multiprocessing的相关知识
2021/06/29 Python