微信小程序实现单选功能


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 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
利用javaScript处理常用事件详解
Apr 14 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 isset()与empty()的使用区别详解
2010/08/29 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python实现矩阵乘法的方法
2015/06/28 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
解决yum对python依赖版本问题
2019/07/05 Python
详解python破解zip文件密码的方法
2020/01/13 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
采购求职信
2014/03/17 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
行政介绍信范文
2015/05/04 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书