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状态的更多相关文章

  1. 微信小程序的button按钮设置宽度无效

    亲,你是不是也遇到了微信小程序的button按钮设置宽度无效.让我来告诉你怎么弄 方法1. 样式中加入!important,即:width: 100% !important; wxss代码示例 1 2 ...

  2. 微信小程序去除button按钮的边框

    小程序开发记录 小程序开发中, 有时候我们希望button不要有边框, 需要使用button::after来实现, 具体如下: .operations button::after{border:0 n ...

  3. 微信小程序去除Button默认样式

    在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤. (一)实现效果1.实现前(默认样式): 2.实现后(去除默认 ...

  4. 微信小程序中button去除默认的边框

    button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; p ...

  5. 微信小程序 - 更改radio和checkbox选中样式

    点击下载源码:示例-更改radio或checkbox选中样式

  6. 微信小程序 --- 获取网络状态

    获取网络状态:wx.getNetworkType btnclick:function(){ wx.getNetworkType({ success:function(res){ console.log ...

  7. 微信小程序组件button

    表单组件button:官方文档 Demo Code: var types=['default', 'primary', 'warn']; var pageObject = { data: { defa ...

  8. 微信小程序的button去边框

    wxml <button class='niu'>123123</button> css niu::after{ border:none; }

  9. 微信小程序取消button边框线

    先给button定义个class属性 <button class="an"> 按钮 </button> 然后再css上加上 .an::after { bor ...

随机推荐

  1. js加载条

    <html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv=" ...

  2. IOC(控制反转)的理解

    1.IOC的理论背景 我们知道在面向对象设计的软件系统中,它的底层都是由N个对象构成的,各个对象之间通过相互合作,最终实现系统地业务逻辑[1]. 图1 软件系统中耦合的对象 如果我们打开机械式手表的后 ...

  3. (三)mysql数据库基本操作

    (1)SQL语句:结构化查询语句 DDL语句 数据定义语言:数据库丶表丶视图丶索引丶存储过程丶函数丶create drop alter DML语句 数据库操作语言:插入数据insert,删除数据del ...

  4. A - Enterprising Escape 【BFS+优先队列+map】

    The Enterprise is surrounded by Klingons! Find the escape route that has the quickest exit time, and ...

  5. HDU 多校1.12

  6. python3类方法,实例方法和静态方法

    今天简单总结下python的类方法,实例方法,静态方法. python默认都是实例方法,也就是说,只能实例对象才能调用这个方法. 那是不是说类方法也只能被类对象本身来调用呢,当然,不是.类方法既可以被 ...

  7. 集训考试题tents

    题目描述Pb 去郊游啦!他来到一块空地打算在这里搭一个帐篷.但是,帐篷的四个支撑点不能在落在任何位置上,而只能落在一些固定点上.现在,他找到地面上有 N 个点可以支撑帐篷.(四个支撑点必须围成一个矩形 ...

  8. SPOJ PT07J - Query on a tree III(划分树)

    PT07J - Query on a tree III #tree You are given a node-labeled rooted tree with n nodes. Define the ...

  9. 最小生成树(Kruskal)(并查集)

    最小生成树 时间限制: 1 Sec  内存限制: 64 MB提交: 11  解决: 2[提交][状态][讨论版] 题目描述 某个宇宙帝国有N个星球,由于宇宙的空间是三维的,因此每个星球的位置可以用三维 ...

  10. notepad++ 开始和结尾

    作者:zecy链接:https://www.zhihu.com/question/37708379/answer/73181634来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...