微信小程序实现单选功能


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 相关文章推荐
利用location.hash实现跨域iframe自适应
May 04 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
JS跨域代码片段
Aug 30 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 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与SQL注入攻击[三]
2007/04/17 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
PDO::commit讲解
2019/01/27 PHP
javascript 获取图片颜色
2009/04/05 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
JS delegate与live浅析
2013/12/21 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
python引用DLL文件的方法
2015/05/11 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
python批量修改ssh密码的实现
2019/08/08 Python
python返回数组的索引实例
2019/11/28 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
食品安全工作方案
2014/05/07 职场文书
班训口号大全
2014/06/18 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
教师个人自我评价
2015/03/04 职场文书
责任书范本大全
2015/05/11 职场文书