微信小程序实现单选功能


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 颜色选择器(兼容firefox)
Mar 05 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 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
调频问题解答
2021/03/01 无线电
php多线程实现方法及用法实例详解
2015/10/26 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
python实现简单图片物体标注工具
2019/03/18 Python
Python中一些深不见底的“坑”
2019/06/12 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
python实现感知机模型的示例
2020/09/30 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
教师节促销活动方案
2014/02/14 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
开门红主持词
2014/04/02 职场文书
房产委托公证书样本
2014/04/04 职场文书
师德模范事迹材料
2014/06/03 职场文书
教师自查自纠材料
2014/10/14 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
Python进程间的通信之语法学习
2022/04/11 Python