WXML

<view class="page" style="background-color:{{pageBackgroundColor}}" >
<button bindtap="changeColor" hover-class="none">点击修改背景颜色</button>
</view>

WXSS:

.page {
display: block;
min-height: %;
width: %;
position: absolute;
left: ;
top: ;
z-index: ;
}

JS:

Page({
data: {
// 自定义page对象CSS样式对象
pageBackgroundColor: '#5cb85c'
},
onLoad: function () { },
// 改变背景颜色
changeColor: function () {
var bgColor = this.data.pageBackgroundColor == 'red' ? '#5cb85c' : 'red';
// 设置背景颜色数据
this.setData({
pageBackgroundColor: bgColor
});
}
})

微信小程序通过js动态修改css样式的方法(交流QQ群:604788754)的更多相关文章

  1. 微信小程序通过JS动态修改页面标题setNavigationBarTitle

    wx.setNavigationBarTitle({title: '当前页面'})

  2. 小程序中的bindtap和catchtap的区别(交流QQ群:604788754)

    bindtap绑定的节点,如果他的父节点也有绑定事件,点击之后就会出现冒泡. catchtap绑定的节点,如果他的父节点也有绑定事件,点击之后不会出现冒泡.

  3. 微信小程序:JS 交互逻辑

    微信小程序:JS 交互逻辑 一.JS 交互逻辑 一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击.获取用户的位置等等.在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作. ...

  4. 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程

    一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...

  5. 原创:新手布局福音!微信小程序使用flex的一些基础样式属性

    来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...

  6. 微信小程序:封装全局的promise异步调用方法

    微信小程序:封装全局的promise异步调用方法 一:封装 function POST(url, params) { let promise = new Promise(function (resol ...

  7. ASP.NET中直接用C# 动态修改CSS样式

    ASP.NET中直接用C# 动态修改CSS样式  wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...

  8. 微信小程序开发:学习笔记[4]——样式布局

    微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...

  9. 微信小程序换皮肤,动态切换菜单栏和导航栏的样式,动态修改TabBar和NavigationBar

    在做微信小程序换皮肤的时候,需要动态修改菜单栏(TabBar)和导航栏(NavigationBar) 但是在小程序中它们的样式是写在app.json里面,而且app.json是静态编译,运行时哪怕你修 ...

随机推荐

  1. HDU 6171 Admiral(双向BFS+队列)题解

    思路: 最大步骤有20,直接BFS会超时. 因为知道开始情况和结果所以可以用双向BFS,每个BFS规定最大步骤为10,这样相加肯定小于20.这里要保存每个状态搜索到的最小步骤,用Hash储存.当发现现 ...

  2. POJ 2785 4 Values whose Sum is 0 (二分)题解

    思路: 如果用朴素的方法算O(n^4)超时,这里用折半二分.把数组分成两块,分别计算前后两个的和,然后枚举第一个再二分查找第二个中是否有满足和为0的数. 注意和有重复 #include<iost ...

  3. 【安装】Mysql在Linux上安装

    1.下载 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downloads 下载版本:mysql-5.6.37-linux-glibc2.12- ...

  4. 51nod 1050 循环数组最大子段和 单调队列优化DP

    题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1050 这个呢,这个题之前 求一遍最大值  然后求一遍最小值 ...

  5. CodeForces 1029E div3

    题目链接 第一道场上自己做出来的E题...虽然是div3,而且是原题... 当时做完ABC,D题没有思路就去怼E了,然后发现貌似原题? 事实上就是原题... 给个原题链接... [HNOI2003]消 ...

  6. java数字格式化

    [转载] Java 提供 DecimalFormat 类,帮你用最快的速度将数字格式化为你需要的样子.下面是一个例子: importjava.text.DecimalFormat; publiccla ...

  7. faster-rcnn 论文讲解

    Faster RCN已经将特征抽取(feature extraction),proposal提取,bounding box regression(rect refine),classification ...

  8. spring boot打jar包发布

    artifactId 是即将打包的包的名称 version 是即将打包的版本号 packaging 是即将打包的格式,这里讲的是jar包 终端输入命令: mvn clean install 然后在ta ...

  9. Windows 上安装 MySQL

    Windows 上安装 MySQL https://www.mysql.com/downloads/ 1.下载MySQL安装包(官网下载链接): 选择 DOWNLOADS ——> Communi ...

  10. Android仿QQ微信开场导航以及登陆界面

    相信大家对于微信等社交应用的UI界面已经都很熟悉了,该UI最值得借鉴的莫过于第一次使用的时候一些列产品介绍的图片,可以左右滑动浏览,最后 进入应用,这一效果适用于多种项目中,相信今后开发应用一定会用得 ...