微信小程序 - 更改button状态

wxml
<button class='yes-orders' style='{{status_css}}' bindtap='clickExpress'>
{{statusOrders}}
</button>
js
Page({
/**
* 页面的初始数据
*/
data: {
isactive: true
},
/**
* 确定接单/取消接单
*/
clickExpress(e) {
let page = this;
page.data.isactive ? page.setData({
statusOrders: '取消接单',
status_css: 'background-color:#FD0100;'
}) : page.setData({
statusOrders: '确定接单',
status_css: 'background-color:#00B100;'
})
page.data.isactive = !page.data.isactive
}
})
微信小程序 - 更改button状态的更多相关文章
- 微信小程序的button按钮设置宽度无效
亲,你是不是也遇到了微信小程序的button按钮设置宽度无效.让我来告诉你怎么弄 方法1. 样式中加入!important,即:width: 100% !important; wxss代码示例 1 2 ...
- 微信小程序去除button按钮的边框
小程序开发记录 小程序开发中, 有时候我们希望button不要有边框, 需要使用button::after来实现, 具体如下: .operations button::after{border:0 n ...
- 微信小程序去除Button默认样式
在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤. (一)实现效果1.实现前(默认样式): 2.实现后(去除默认 ...
- 微信小程序中button去除默认的边框
button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; p ...
- 微信小程序 - 更改radio和checkbox选中样式
点击下载源码:示例-更改radio或checkbox选中样式
- 微信小程序 --- 获取网络状态
获取网络状态:wx.getNetworkType btnclick:function(){ wx.getNetworkType({ success:function(res){ console.log ...
- 微信小程序组件button
表单组件button:官方文档 Demo Code: var types=['default', 'primary', 'warn']; var pageObject = { data: { defa ...
- 微信小程序的button去边框
wxml <button class='niu'>123123</button> css niu::after{ border:none; }
- 微信小程序取消button边框线
先给button定义个class属性 <button class="an"> 按钮 </button> 然后再css上加上 .an::after { bor ...
随机推荐
- 搜索引擎--范例:新浪微博API获取最近的微博--statuses/public_timeline
新浪微博平台跟新浪SAE一样,都是一个字“坑”,好了,不再吐槽,直入主题 1:直接登录新浪,添加网站,就直接添加我们在新浪SAE上创建的应用即可 2:填写信息,ICP备案信息号填写sinaapp.co ...
- selenium3+python自动化50-环境搭建(firefox)【转载】
前言 有不少小伙伴在安装selenium环境后启动firefox报错,因为现在selenium升级到3.0了,跟2.0的版本还有有一点区别的. 安装环境过程中主要会遇到三个坑: 1.'geckodri ...
- 轻量级批量管理工具pssh
pssh工具 pssh工具是个轻量级的批量管理工具,相比同类型的开源工具 Ansible,Saltstack,他比较轻量级,需要对管理的主机做秘钥认证 Ansible是可以做秘钥认证,也可以通过配置文 ...
- TCP,UDP,IP包头格式及说明(zz)
一.MAC帧头定义 /数据帧定义,头14个字节,尾4个字节/ typedef struct _MAC_FRAME_HEADER { ]; //目的mac地址 ]; //源mac地址 short m_c ...
- Nginx-Primary script unknown的报错的解决方法
配置nginx时一直报错:file not found 错误日志: [error] 12691#0: *6 FastCGI sent in stderr: "Primary script u ...
- React Native - 0序言
1. 什么是React Native? React Native是Facebook在React.js Conf 2015大会上推出的一个用于开发Android t iOS App的一个框架.主要编程语 ...
- 如何正确学习web前端流程以及如何找工作
解释一下web前端工作是做啥的,Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的开发 ...
- (十一)数组array
变量:只能存一个值,数组可以存多个值 (1)普通数组,索引下标是整数: 1)定义: 方法一:一次赋一个值:语法:数组名[下标]=变量值 array[1]=linux array[2]=shell 方法 ...
- HDU 2504.又见GCD-递归
又见GCD Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- hdu6191(树上启发式合并)
hdu6191 题意 给你一棵带点权的树,每次查询 \(u\) 和 \(x\) ,求以 \(u\) 为根结点的子树上的结点与 \(x\) 异或后最大的结果. 分析 看到子树,直接上树上启发式合并,看到 ...