微信小程序实现多个按钮toggle功能的实例


Posted in Javascript onJune 13, 2017

微信小程序实现多个按钮toggle功能的实例

如下图所示,实现该按钮toggle功能。

微信小程序实现多个按钮toggle功能的实例

百度上很多都是只设置一个按钮的toggle,所以我现在来稍微总结下:多个按钮如何实现自身的toggle功能。

原理:

1,列表展示的时候,我们会用wx:for 来循环数据,那么我们就会得到相应的当前的第几个数据(即 wx:key="index")

2.在每一个数据里面添加一个toggle的属性,toggle=false  则不展示,

3.设置一个点击方法,获取当前按钮所在的是第几个数据,然后将相应的toggle取反,然后将修改后的数据重新写进去 (我出错的地方就在这)

4. 在wxml页面判断toggle的值是true/false ,然后修改相应的class名

js代码:

Page({ 
 data:{ 
  datas:[] 
 }, 
 onLoad:function(options){ 
  var that=this; 
  API.my_ajax('',function(res){ //用mock.js 设置的模拟数据调用格式 
   // console.log(res); 
   var listData=res.data; 
   for(var i=0;i<listData.length;i++){ 
    listData[i]['toggle']=false; //添加toggle 属性 
   } 
   that.setData({ 
    datas:listData 
   }) 
   // console.log(listData) 
  }) 
 }, 
 showBtn:function(e){ 
  console.log(e);  
  console.log(this);  
 //这两个console.log 可以查看当前方法里面所有的数据,可以查找一下我们所需要的内容是否有在里面,底下的index 就是这样找到的 
 
  var a=e.currentTarget.dataset.index; 
  var b=this.data.datas[a].toggle; 
  this.data.datas[a].toggle=!b; 
 
  //设置之后我们要把数据从新添回去 
  this.setData({ 
   datas:this.data.datas 
  })  
 } 
})

wxml代码:

<!--使用二维码按钮--> 
      <label class="icon_qrcode_wrap" data-index="{{index}}" bindtap="showBtn"> 
        <text>使用规格及二维码</text> 
        <image class="icon_right" src="../../images/up.png"></image> 
      </label> 
 
      <!--弹出二维码样式--> 
      <view class="qrcode_show_wrap {{item.toggle==true ? '':'none'}}"> 
        <view class="qrcode_container"> 
          <!--<image class="qrcode_big_bg"src="../../images/qrcode_black_bg.png"></image>--> 
          <view class="block_qrcode_wrap"> 
            <image class="tiaoma" src="../../images/tiao_code.png"></image> 
            <image class="rqcode" src="../../images/rq_code_img.png"></image> 
            <text style="display:block;" class="fs12">erwr43545</text> 
          </view> 
          <text class="rq_code_title cfff fs13">使用规则</text> 
          <text class="cfff code_txt">就掉粉丝活生生的谁让他和人文就掉粉丝活生生的谁让他和人文就掉粉丝活生生的谁让他和人文</text> 
        </view> 
      </view> 
    </view>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
js运动应用实例解析
Dec 28 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 #Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 #Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 #Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 #Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 #Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 #Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 #Javascript
You might like
PHP的面向对象编程
2006/10/09 PHP
php $_ENV为空的原因分析
2009/06/01 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
vue实现放大镜效果
2020/09/17 Javascript
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
python如何控制进程或者线程的个数
2020/10/16 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
什么是会话Bean
2015/05/14 面试题
公司门卫的岗位职责
2014/02/19 职场文书
结婚周年感言
2014/02/24 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
三方合作协议书范本
2014/04/18 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
nginx内存池源码解析
2021/11/20 Servers
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
Python 中面向接口编程
2022/05/20 Python