微信小程序通过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是静态编译,运行时哪怕你修 ...
随机推荐
- vijos 1098 合唱队形 - 动态规划
描述 N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2…,K,他们的身高分别为T1,T2,…, ...
- Python3基础 try-多个指定except与不指定except 简单示例
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- win7下把电脑设置成wlan热
有很多公司没有无线网,只有自己的电脑可以上网,现在设置热点,可以手机上网 步骤: 1.看自己的网卡是否支持承载网络,如果不支持,本法就不适用 在CMD里用 netsh wlan show dri ...
- Node.js中package.json中^和~的区别
webpack 项目的package.json 文件列出了项目所依赖的插件和库,同时也给出了对应的版本说明,但是在版本说明前面还有个符号:'^'(插入符号)和'~'(波浪符号),总结了下他们之间的区别 ...
- Z-score(Z值)的意义--转载
http://blog.sina.com.cn/s/blog_72208a6a0101cdt1.html http://www.docin.com/p-350677620.html http://we ...
- poj 1986 Distance Queries 带权lca 模版题
Distance Queries Description Farmer John's cows refused to run in his marathon since he chose a pa ...
- shell 杀掉指定进程的服务
check_results=`ps -ef|grep bp_driver.launch|awk '{print $2}'|sed -n 1p` echo `kill - $check_results` ...
- preg_match
$baseUrl = request()->baseUrl(); if (!preg_match('/admin.php/',$baseUrl)) { $this->redirect('/ ...
- Python day8常用格式化format类2
format常用格式化 tp1="i am {},age {},{}".format('LittlePage',18,'boy') tp2="i am {},age {} ...
- Qt_QString.indesOf和mid测试
1.indexOf #define GID_PREFIX "dr_" QString str = "dr__awedr4"; int iIdx = str.in ...