美文网首页微信小程序微信小程序开发微信小程序开发
微信小程序--多个按钮选中的联动效果

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

作者: 极乐叔 | 来源:发表于2017-10-21 10:41 被阅读127次

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

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

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

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

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

    原文地址:http://www.jianshu.com/p/657e3b2a8aa4http://www.jianshu.com/p/657e3b2a8aa4

    相关文章

      网友评论

        本文标题:微信小程序--多个按钮选中的联动效果

        本文链接:https://www.haomeiwen.com/subject/ucciuxtx.html