微信小程序实现单选功能


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 last-child 列表最后一项的样式
Jan 22 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
基于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基础知识:类与对象(5) static
2006/12/13 PHP
php自动跳转中英文页面
2008/07/29 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jquery图片切换插件
2015/03/16 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
js模糊查询实例分享
2016/12/26 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
用python实现的线程池实例代码
2018/01/06 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
工商治理实习生的自我评价
2014/01/15 职场文书
内勤主管岗位职责
2014/04/03 职场文书
小学毕业演讲稿
2014/04/25 职场文书
2016教师节感恩话语
2015/12/09 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
springboot+VUE实现登录注册
2021/05/27 Vue.js