微信小程序实现单选功能


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 相关文章推荐
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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采用curl实现伪造IP来源的方法
2014/11/21 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
Js 中debug方式
2010/02/07 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
Python中的面向对象编程详解(上)
2015/04/13 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
Django数据库迁移常见使用方法
2020/11/12 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
人民教师求职自荐信
2014/03/12 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
薪资证明范本
2015/06/19 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL