微信小程序实现单选功能


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 SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
vue如何进行动画的封装
Sep 26 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
js+css3实现炫酷时钟
Aug 18 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类中的各种拦截器用法分析
2014/11/03 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
php中static和const关键字用法分析
2016/12/07 PHP
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
python 获取url中的参数列表实例
2018/12/18 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
解析Python3中的Import
2019/10/13 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
python中栈的原理及实现方法示例
2019/11/27 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
项目投资合作意向书
2014/07/29 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
python Tkinter模块使用方法详解
2022/04/07 Python