微信小程序实现单选功能


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 相关文章推荐
actionscript与javascript的区别
May 25 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
使用vue制作滑动标签
Sep 21 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 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实现小型站点广告管理
2006/10/09 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
python中requests模块的使用方法
2015/04/08 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Python自动登录QQ的实现示例
2020/08/28 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
教师的实习鉴定
2013/12/15 职场文书
父母对孩子说的话
2014/04/12 职场文书
补充协议书范本
2014/04/23 职场文书
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL