用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2017-6-13 00:59

如下图所示,实现该按钮toggle功能。百度上很多都是只设置一个按钮的toggle,所以我现在来稍微总结下:多个按钮如何实现自身的toggle功能。原理:1,列表展示的时候,我们会用wx:for 来循环数据,那么我们就会得到相 ...

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


百度上很多都是只设置一个按钮的toggle,所以我现在来稍微总结下:多个按钮如何实现自身的toggle功能。 
原理:1,列表展示的时候,我们会用wx:for 来循环数据,那么我们就会得到相应的当前的第几个数据(即 wx:key="index") 
2.在每一个数据里面添加一个toggle的属性,toggle=false 则不展示, 
3.设置一个点击方法,获取当前按钮所在的是第几个数据,然后将相应的toggle取反,然后将修改后的数据重新写进去 (我出错的地方就在这) 
4. 在wxml页面判断toggle的值是true/false ,然后修改相应的class名 
js代码:

  1. Page({
  2. data:{
  3. datas:[]
  4. },
  5. onLoad:function(options){
  6. var that=this;
  7. API.my_ajax('',function(res){ //用mock.js 设置的模拟数据调用格式
  8. // console.log(res);
  9. var listData=res.data;
  10. for(var i=0;i<listData.length;i++){
  11. listData[i]['toggle']=false; //添加toggle 属性
  12. }
  13. that.setData({
  14. datas:listData
  15. })
  16. // console.log(listData)
  17. })
  18. },
  19. showBtn:function(e){
  20. console.log(e);
  21. console.log(this);
  22. //这两个console.log 可以查看当前方法里面所有的数据,可以查找一下我们所需要的内容是否有在里面,底下的index 就是这样找到的
  23. var a=e.currentTarget.dataset.index;
  24. var b=this.data.datas[a].toggle;
  25. this.data.datas[a].toggle=!b;
  26. //设置之后我们要把数据从新添回去
  27. this.setData({
  28. datas:this.data.datas
  29. })
  30. }
  31. })

wxml代码:

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

gyhtr

鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: 百分乐 来自: csdn博客

相关阅读