微信小程序实现单选功能


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 学习之一 对象访问
Nov 23 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
js获取图片的base64编码并压缩
Dec 05 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
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php生出随机字符串
2017/07/06 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
浅谈React Event实现原理
2018/09/20 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python实现比较两段文本不同之处的方法
2015/05/30 Python
Python 的类、继承和多态详解
2017/07/16 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
如何让Java程序执行效率更高
2014/06/25 面试题
公司出纳岗位职责
2013/12/07 职场文书
一份创业计划书范文
2014/02/08 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
电力安全事故反思
2014/04/27 职场文书
希特勒的演讲稿
2014/05/23 职场文书
项目工作说明书
2014/07/29 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
离婚协议书范文2016
2016/03/18 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript