微信小程序实现单选功能


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 OOP包机制,类创建的方法定义
Nov 02 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
Javascript 面向对象 重载
May 13 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
js 金额文本框实现代码
Feb 14 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 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 include加载文件两种方式效率比较
2010/08/08 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
Python CSV模块使用实例
2015/04/09 Python
python字符串连接方法分析
2016/04/12 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
python之pandas用法大全
2018/03/13 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
市优秀教师事迹材料
2014/02/05 职场文书
档案室主任岗位职责
2014/02/12 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
汽车专业求职信
2014/06/05 职场文书
社区维稳工作方案
2014/06/06 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
地道战观后感300字
2015/06/04 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers