现单选多选
⼩程序实现多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
样式选中改变是通过三元运算符实现的
{{item.name}}
{{msg}}
③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
})
},
⼩程序的布局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)来处理 ...8.0怎么更新
⼩程序，动态改变样式
⼩程序⽬前没有修改样式api，但是可以利⽤数据绑定实现动态改变样式，可以⽤view标签模拟page然后改变view标签的样式，以下案例演⽰了如果改变page背景颜⾊:
⼩程序CheckBox选中事件
1.⼩程CheckBox选中问题
.NET通信中的同步和异步处理
同步与异步的概念: .NET中的通信数据处理有同步和异步之分，我理解的同步过程是接收端接收数据，如果数据没有过来，就⼀直等着(阻塞过程)，直到有数据传送过来可以接收，接下来程序才继续向下进⾏：异步过程 ...
vue项⽬报错webpackJsonp is not defined
在vue单页⾯应⽤中，我们⼤概都会使⽤CommonsChunkPlugin这个插件. 传送门 CommonsChunkPlugin 但是在项⽬经过本地测试没有任何问题，打包上线后却会报错 webpac ...
SpringMVC+MyBatis+Druid使⽤MySQL8.0.11版本
1.使⽤MySQL8.0.11版本，要使⽤5.1.45或其他⾼版本驱动jar包，我本地使⽤的是最新的8.0.11
2.更换了MySQL驱动后，报Cannot find class [com.aliba ...
div居中与div内容居中&comma；不⼀样
1.div⾃⾝居中 使⽤margin:0 auto上下为0，左右⾃适应的css样式. 要让div⽔平居中，那么除了设置css margin:0 auto外，还不能再设置float，不然将会导致div靠 ...
发布评论