微信小程序checkbox的全选以及所有checkbox选中之后的全选
微信小程序checkbox的全选以及所有checkbox选中之后的全选
第一次写,软件都不懂,直接把代码拷过来了
模板
WXML
WXSS
.viewtext{
text-align: center;
}
.checkboxbg{
background: #ffffff;
width: 750rpx;
border-bottom: 4rpx solid #f4f5f7;
}
.label{
margin-left: 20rpx;
width: 100%;
border-bottom: 3rpx solid #f4f5f7;
display: flex;
}
.checkbox{
align-self: center
}
.view1{
display: flex;
margin: 10rpx;
width: 660rpx;
align-items: center
}
.view1-01{
width: 80%;
}
.veiw1-01-1{
font-size: 15px;
font-weight: bold;
}
.veiw1-01-2{
font-size: 14px;
}
.veiw1-01-3{
font-size: 13px;
color: #696969;
}
.view1-02{
text-align: center;
width:20%;
align-items: center;
color: #f2b42e;
}
.view2{
display: flex;
line-height: 100rpx;
height: 100rpx;
background: #ffffff;
font-size: 15px
}
.view2-01{
flex: 1;
margin-left: 20rpx;
}
.view2-02{
flex: 3;
padding-top: 4rpx
}
.view2-03{
flex: 1;
text-align: center;
background: #f2b42e;
padding-top: 4rpx
}
/*checkbox 选项框大小 */
checkbox .wx-checkbox-input {
width: 40rpx;
height: 40rpx;
border: 1rpx solid #f2b42e;
}
/*checkbox选中后样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background: #f2b42e;
}
/*checkbox选中后图标样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 28rpx;
height: 28rpx;
line-height: 28rpx;
text-align: center;
font-size: 22rpx;
color: #fff;
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
##JS
data: {
settleAccounts:0,
select_all: false,
priceSum :0.0,
order:[
{
id:‘1’,
orderiD: ‘18120313305775’,
orderAddress:‘浙江 湖州->黑龙江 鹤岗’,
orderName:‘Youth (侠) 晋M-88888 草坪’,
orderPrice: 1.0,
checked:false
},
{
id: ‘2’,
orderiD: ‘18120313305776’,
orderAddress: ‘浙江 湖州->黑龙江 鹤岗’,
orderName: ‘Youth (侠) 晋M-88888 草坪’,
orderPrice: 2.0,
checked: false
},
{
id: ‘3’,
orderiD: ‘18120313305776’,
orderAddress: ‘浙江 湖州->黑龙江 鹤岗’,
orderName: ‘Youth (侠) 晋M-88888 草坪’,
orderPrice: 3.0,
checked: false
}
]
},
/**
- 生命周期函数–监听页面加载
*/
onLoad: function (options) {
this.settleAccountsHeight()
},
//整个页面的高度
settleAccountsHeight(){
this.setData({
settleAccountsHeight: wx.getSystemInfoSync().windowHeight
})
},
chang(e){
var that=this
var sum=0
var values=e.detail.value
var order = this.data.order
for(var i=0;i<order.length;i++){ //将所有checkbox赋值为false
order[i].checked=false
}
for(var i=0;i<values.length;i++){
var value=values[i]-1 //我的传的值从1开始所以-1
for(var j=0;j<order.length;j++){
if (valuej){
order[value].checked =true //将选中的赋值为true
sum=sum+order[value].orderPrice
}
if(order.lengthvalues.length){ //全部选中将全选改为true
that.setData({
select_all : true
})
}else{
that.setData({
select_all: false
})
}
}
this.setData({
order :order,
priceSum:sum
})
}
},
bindSelectAll(e){
console.log(e)
var that = this;
var sum=0
var order=this.data.order
for (var i = 0; i < order.length;i++){
order[i].checked = (!that.data.select_all)
sum+=order[i].orderPrice
}
if (that.data.select_all==true){
sum=0
}
this.setData({
order: order,
select_all: (!that.data.select_all),
priceSum:sum
})
},
插入链接与图片
链接: link.
图片:
带尺寸的图片:
居中的图片:
居中并且带尺寸的图片:
当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片
.
// An highlighted block
var foo = 'bar';
生成一个适合你的列表
- 项目
- 项目
- 项目
- 项目
- 项目1
- 项目2
- 项目3
- 计划任务
- 完成任务
创建一个表格
一个简单的表格是这么创建的:
项目 | Value |
---|---|
电脑 | $1600 |
手机 | $12 |
导管 | $1 |
设定内容居中、居左、居右
使用:---------:
居中
使用:----------
居左
使用----------:
居右
第一列 | 第二列 | 第三列 |
---|---|---|
第一列文本居中 | 第二列文本居右 | 第三列文本居左 |
SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:
TYPE | ASCII | HTML |
---|---|---|
Single backticks | 'Isn't this fun?' |
‘Isn’t this fun?’ |
Quotes | "Isn't this fun?" |
“Isn’t this fun?” |
Dashes | -- is en-dash, --- is em-dash |
– is en-dash, — is em-dash |
创建一个自定义列表
- Markdown
- Text-to- HTML conversion tool
- Authors
- John
- Luke
如何创建一个注脚
一个具有注脚的文本。1
注释也是必不可少的
Markdown将文本转换为 HTML。
KaTeX数学公式
您可以使用渲染LaTeX数学表达式 KaTeX:
Gamma公式展示 是通过欧拉积分
你可以找到更多关于的信息 LaTeX 数学表达式here.
新的甘特图功能,丰富你的文章
- 关于 甘特图 语法,参考 这儿,
UML 图表
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图::
这将产生一个流程图。:
- 关于 Mermaid 语法,参考 这儿,
FLowchart流程图
我们依旧会支持flowchart的流程图:
- 关于 Flowchart流程图 语法,参考 这儿.
导出与导入
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件或者.html文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
继续你的创作。
注脚的解释 ↩︎