微信小程序实现按钮数组单击更改颜色

按钮数组单击更改颜色，是每个移动app都可见到的功能，具体功能见下图：单机某个按钮，按钮选中并突出绿色。虽然这个功能看起来简单，但网上确实未找到很形象表述的教程，所以我想写一篇很短小的文章介绍该如何实现。

实现的wxml如下：

<view style="display:flex; flex-direction: row;justify-content: space-between;">  <button class="Cbtn"  wx:for="{{anniu}}" wx:key='this' data-index='{{index}}' style="{{index===colorIndex? 'background:#7CCD7C':'background:#FFF'}}" type="default" bindtap="genghuan">{{item}}</button>
</view>

实现的js代码如下：


Page({data: {  anniu:['女声','男声','度逍遥','度丫丫'],                                      },genghuan: function(e){this.setData({ colorIndex:e.currentTarget.dataset.index});},})

具体内容也需要过多解释，很好理解。同时wxml代码已实现wxss的功能，渲染也可以做的更好看，感兴趣的小伙伴们可以研究一下。

微信小程序实现按钮数组单击更改颜色相关推荐

微信小程序——添加按钮格式
微信小程序--添加按钮步骤一:在wxml文件中添加按钮代码(图后提供可复制代码) <button class = "button_cat">炸炸呼呼</butt ...
uni-app 微信小程序分享按钮
uni-app 微信小程序分享按钮官方文档说明在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 在需要分享的页面填写: ...
微信小程序退出按钮退出方式
微信小程序退出按钮退出方式 1,只能跳转到 tabBar配置的页面 wx.switchTab({url:''../xxx/xxx}) 2.返回上一级页面 (delta:返回的页面数,如果delta大于 ...
微信小程序—在原有数组内添加元素
微信小程序-在原有数组内添加元素 data: {list: [ ] } this.setData({list: this.data.list.concat(XXX)})
uni-app 微信小程序根据角色动态的更改底部tabbar
文章目录 1. 需求背景 1.1 源码下载 2. 问题前提及思路 3. 开始撸 3.1 设置 `tabbar.js` 配置不同角色不同的菜单 3.2 设置 `page.json` 3.3 vue 配置 ...
微信小程序多维数组筛选（以二维数组为例）
微信小程序多维数组筛选(以二维数组为例) 我们在遇到微信小程序进行筛选的时候,一般会使用到filter函数来进行筛选,但是有时候遇到多维数组怎么办呢? //例如这是我们的数组 arr: [{id: 1 ...
微信小程序修改顶部电量时间的颜色
微信小程序修改顶部电量时间的颜色 onShow: function () {wx.setNavigationBarColor({frontColor: '#ffffff',backgroundC ...
微信小程序button按钮无法更改尺寸解决
在微信小程序新版本中, button按钮无法支持在wxss文件中直接自定义width 和 height 解决方法有两种: 1. 推荐使用: 在根目录中的app.json文件中, 删除其中的 &q ...
微信小程序9---Button按钮和icon图标
Button 按钮首先提醒一下大家,如果你现在button标签不能用,不用担心,那是因为微信小程序存在一个bug,你仔细看一下你的button标签的代码是不是这样的 <button>Co ...

微信小程序实现按钮数组单击更改颜色

微信小程序实现按钮数组单击更改颜色相关推荐

最新文章

热门文章