小程序模板网

微信小程序--多个按钮选中的联动效果

2018-01-03 焰慧地

场景:画图应用需选择画笔颜色,有4种颜色按钮可供选择,用户点击任意按钮进行颜色切换。 思路:通过curColorIndex变量保存当前选中的颜色下标,选中后添加额外的选中样式 ... ... ... ... ... ... ... ... ...

 
 
 

场景:画图应用需选择画笔颜色,有4种颜色按钮可供选择,用户点击任意按钮进行颜色切换。 
思路:通过curColorIndex变量保存当前选中的颜色下标,选中后添加额外的选中样式

一,canvas.wxss文件:这个文件用于定义按钮正常态和选中态的样式,以及Flex

布局的约束

 

		
  1. /*容器布局*/
  2. .color_right_area {
  3. margin-top: 30rpx;
  4. display: flex;
  5. flex-direction: row;
  6. align-items: center;
  7. justify-content: space-around;
  8. }
  9. /*正常效果:圆形*/
  10. .box {
  11. width: 45rpx;
  12. height: 45rpx;
  13. border-radius: 50%;
  14. background-color: rebeccapurple;
  15. }
  16. /*选中效果:带边框*/
  17. .is_checked {
  18. width: 47rpx;
  19. height: 47rpx;
  20. border: 2px solid;
  21. }
  22. /*按钮颜色样式*/
  23. .color0 {
  24. background-color: #d5243e;
  25. }
  26. .color1 {
  27. background-color: #318ff4;
  28. }
  29. .color2 {
  30. background-color: #f9a23f;
  31. }
  32. .color3 {
  33. background-color: #000;
  34. }

二,canvas.wxml文件:这个文件是Demo的布局界面,通过使用js的data数据和wxss的class样式进行页面布局

 

		
  1. class="color_right_area">
  2. class='color_right_area' wx:for='{{data_color}}' wx:key='id'>
  3. class="box color{{index}} {{curColorIndex==index?'is_checked':'color{{index}}'}}" bindtap="colorSelect" data-param='{{index}}'>
  4.  
  5.  

这里通过wx:for实现循环打印颜色数组,通过curColorIndex值控制选中的样式,index值进行参数传递

三,canvas.js文件:提供数据,以及处理xwml的控件响应,并通过设置this.setData的值来更新xwml的显示

 

		
  1. Page({
  2. data: {
  3. curColorIndex:0,
  4. data_color: [],
  5. },
  6. //更改画笔颜色的方法
  7. colorSelect: function (e) {
  8. let curIndex = parseInt(e.currentTarget.dataset.param)
  9. this.setData({
  10. curColorIndex: curIndex
  11. });
  12. },
  13. onLoad: function () {
  14. let init_color = [
  15. '#d5243e',
  16. '#318ff4',
  17. '#f9a23f',
  18. '#ffffff'
  19. ]
  20. this.setData({ data_color: init_color})
  21. }
  22. })

onLoad:function这个函数在页面加载时就会执行一次,所以这里可以加载默认颜色数据,同时wxml用到了curColorIndex以及data_color,所以在data里定义。



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18351.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询