微信小程序通过js动态修改css样式的方法(交流QQ群:604788754)
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)的更多相关文章
- 微信小程序通过JS动态修改页面标题setNavigationBarTitle
wx.setNavigationBarTitle({title: '当前页面'})
- 小程序中的bindtap和catchtap的区别(交流QQ群:604788754)
bindtap绑定的节点,如果他的父节点也有绑定事件,点击之后就会出现冒泡. catchtap绑定的节点,如果他的父节点也有绑定事件,点击之后不会出现冒泡.
- 微信小程序:JS 交互逻辑
微信小程序:JS 交互逻辑 一.JS 交互逻辑 一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击.获取用户的位置等等.在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作. ...
- 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程
一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...
- 微信小程序:封装全局的promise异步调用方法
微信小程序:封装全局的promise异步调用方法 一:封装 function POST(url, params) { let promise = new Promise(function (resol ...
- ASP.NET中直接用C# 动态修改CSS样式
ASP.NET中直接用C# 动态修改CSS样式 wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...
- 微信小程序开发:学习笔记[4]——样式布局
微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...
- 微信小程序换皮肤,动态切换菜单栏和导航栏的样式,动态修改TabBar和NavigationBar
在做微信小程序换皮肤的时候,需要动态修改菜单栏(TabBar)和导航栏(NavigationBar) 但是在小程序中它们的样式是写在app.json里面,而且app.json是静态编译,运行时哪怕你修 ...
随机推荐
- Android widget
1,TextView :走马灯效果 2,EditText ,AutoCompleteText MutiAutoCompleteTextView 3,Button,ImageButton,RadioBu ...
- git如何列出最简短的commit(tag和head名都不显示)
答:git log --oneline --no-decorate --oneline: 将commit显示成一行 --no-decorate: 将tag和head名隐藏掉
- HDU 4734 (数位DP)题解
思路: dp[pos][pre]代表长度为pos的不大于pre的个数 #include<iostream> #include<cstdio> #include<cstri ...
- HDU 2243 考研路茫茫——单词情结(AC自动机+矩阵快速幂)
http://acm.hdu.edu.cn/showproblem.php?pid=2243 题意: 给出m个模式串,求长度不超过n的且至少包含一个模式串的字符串个数. 思路: 如果做过poj2778 ...
- JObject 用法 、JProperty 用法、JArray 用法 Linq 转 Json
1.使用LINQ to JSON前,需要引用Newtonsoft.Json的dll和using Newtonsoft.Json.Linq的命名空间.LINQ to JSON主要使用到JObject, ...
- shell 基本操作小结
1.echo和if else fi命令 #!/bin/bash echo hello;echo there filename=demo.sh if [ -e "$filename" ...
- ubuntu 14.04 (desktop amd 64) 安装和配置ROS Indigo
安装ROS 配置Ubuntu的软件源 配置Ubuntu要求允许接受restricted.universe和multiverse的软件源,可以根据下面的链接配置: https://help.ubuntu ...
- Jmeter性能测试 对服务器使用资源进行监控之ServerAgent插件使用
百度云盘友情赞助地址如下: 链接:https://pan.baidu.com/s/1cpAeOcfFX8kss1eo79UD9g 密码:b8o7 在windows上或者linux上打开服务 用Jmet ...
- Cassandra学习笔记
CASSANDRA在工作中用过,但是用的项目少,能用却了解的不全面.今天来稍加学习下: http://zqhxuyuan.github.io/2015/10/15/Cassandra-Daily/ ...
- Codeforces 861D - Polycarp's phone book
861D - Polycarp's phone book 思路:用map做的话,只能出现一次循环,否则会超时. 代码: #include<bits/stdc++.h> using name ...