微信小程序button选中改样式-实现单选/多选
小程序实现多button单选/多选
红色为选中状态
单选
多选
①wxss
/* pages/button-select/button-select.wxss */
.button_container{
display: flex;
flex-direction: row;
justify-content: space-around
}
/* 按钮未选中 */
.normal_button{
background: greenyellow
}
/* 按钮选中 */
.checked_button{
background: red;
color: white
}
②wxm
样式选中改变是通过三元运算符实现的
<!--pages/button-select/button-select.wxml-->
<view class='button_container'>
<block wx:for="{{buttons}}" wx:key="buttons">
<button class='{{item.checked?"checked_button":"normal_button"}}' data-id='{{item.id}}' bindtap='radioButtonTap'>{{item.name}}</button>
</block>
</view>
<text>{{msg}}</text>
③js
在
Page({...})
中填充按钮数据
data: {
buttons: [{ id: 1, name: '银色' }, { id: 2, name: '白色' }, { id: 3, name: '黑色' }],
msg:'',
},
默认使第一个按钮被选中
Page({...})
onLoad: function (options) {
this.data.buttons[0].checked = true;
this.setData({
buttons: this.data.buttons,
})
},
在
Page({...})
中添加事件监听方法(单选)
/**
* 事件监听,实现单选效果
* e是获取e.currentTarget.dataset.id所以是必备的,跟前端的data-id获取的方式差不多
*/
radioButtonTap: function (e) {
console.log(e)
let id = e.currentTarget.dataset.id
console.log(id)
for (let i = 0; i < this.data.buttons.length; i++) {
if (this.data.buttons[i].id == id) {
//当前点击的位置为true即选中
this.data.buttons[i].checked = true;
}
else {
//其他的位置为false
this.data.buttons[i].checked = false;
}
}
this.setData({
buttons: this.data.buttons,
msg: "id:"+id
})
},
在
Page({...})
中添加事件监听方法(多选)
记得在wxml中修改绑定方法
bindtap='radioButtonTap'
checkButtonTap:function(e){
console.log(e)
let id = e.currentTarget.dataset.id
console.log(id)
for (let i = 0; i < this.data.buttons.length; i++) {
if (this.data.buttons[i].id == id) {
if (this.data.buttons[i].checked == true) {
this.data.buttons[i].checked = false;
} else {
this.data.buttons[i].checked = true;
}
}
}
this.setData({
buttons: this.data.buttons,
msg: "id:"+id
})
},
微信小程序button选中改样式-实现单选/多选的更多相关文章
- 微信小程序的布局css样式
微信小程序的布局css样式width: fit-content;font-size:20px; /*设置文字字号*/color:red; /*设置文字颜色*/font-w ...
- 微信小程序 JS动态修改样式
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
- 微信小程序wxml和wxss样式
对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...
- 微信小程序button授权页面,用户拒绝后仍可再次授权
微信小程序授权页面,进入小程序如果没授权跳转到授权页面,授权后跳转到首页,如果用户点拒绝下次进入小程序还是能跳转到授权页面,授权页面如下 app.js 中的 onLaunch或onShow中加如下代 ...
- 微信小程序 buton清除默认样式
相信很多小伙伴在开发小程序的时候都会碰到小程序Button默认样式的困扰,在重设样式的时候需要一次次的设置 分享一个自己在开发中的小方法: CSS all 简写属性 将除 unicode-bidi 与 ...
- 微信小程序中placeholder的样式
通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理 ...
- 微信小程序,动态改变样式
小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...
- 微信小程序CheckBox选中事件
1.微信小程CheckBox选中问题 <checkbox-group bindchange="checkboxChange" data-index="{{index ...
- 微信小程序 button 按钮所有默认的样式
小程序默认样式 // 默认样式 button { position:relative; display:block; margin-left:auto; margin-right:auto; padd ...
随机推荐
- Ajax请求参数解释
ajax常用的两个请求是get和post,而springmvc的控制层可以接收ajax请求. 但是这个过程非常灵活,变化很大,容易出错. $.ajax({ url : SITE_PATH + &quo ...
- [Swift]数组排序:sort和sorted
sorted只返回一个数组的有序版本,不修改原数组. sort无返回值,只会修改原数组. 定义一个需要排序的数组,其包含元素.示例只初始化一个Int数组. var arr:[Int] = [Int]( ...
- springboot集成JsonRpc2.0
导入依赖的jar: 配置AutoJsonRpcServiceImplExporter: 接口文件: 实现类: 测试:
- TCP Server有两个套接字
 TCP服务器有一个特殊的套接字,欢迎运行在任意主机上的客户进程的某些初始接触. 三次握手期间,客户进程敲服务器的欢迎之门.该服务器"听到"敲门时,它将生成一个新的TCP套接字对 ...
- 利用python 学习数据分析 (学习四)
内容学习自: Python for Data Analysis, 2nd Edition 就是这本 纯英文学的很累,对不对取决于百度翻译了 前情提要: 各种方法贴: https://w ...
- 2017 最新的 cocoaPods 安装方法
经过努力终于发现了最新的 解决cocoaPods安装的办法: taobao Gems 源已停止维护,现由 ruby-china 提供镜像服务 第一步:安装rvm, 不管需不需要升级ruby,rvm可以 ...
- 【JavaScript】类继承(对象冒充)和原型继承__深入理解原型和原型链
JavaScript里的继承方式在很多书上分了很多类型和实现方式,大体上就是两种:类继承(对象冒充)和原型继承. 类继承(对象冒充):在函数内部定义自身的属性的方法,子类继承时,用call或apply ...
- 解决织梦dedecms文档关键字(自动内链)php5.5以上失效的问题 urf-8版本的
找到include/arc.archives.class 在里面需要修改两次地方 在1230行 // 这里可能会有错误 if (version_compare(PHP_VERSION, '5.5.0' ...
- Vijos 小胖的奇偶
第一遍做 #include<iostream> #include<cstdlib> #include<cstdio> #include<cstring> ...
- 网络基础 08_NAT
1 NAT的基本概念 为什么需要NAT IPv4地址紧缺 什么是NAT NAT(Network Address Translation) 私有IPv4地址 10.0.0.0 - 10.255.255. ...