微信小程序通过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是静态编译,运行时哪怕你修 ...
随机推荐
- 经典模块化的前端框架:layer
官网:http://layer.layui.com/ 官网论坛里有许多后台界面可参考下载.其中后台管理界面和弹窗功能都是比较常用的.
- 20145127 《Java程序设计》第一周学习总结
通过第一周的Java程序设计的学习,听了娄老师的第一堂课,虽然课堂上老师并没有一开始就讲许多专业的知识,而是带领着我们对于Java这门语言,并不仅仅是一门语言,经行了初步的认识与了解,并且对于Java ...
- 我们能从 jQuery 的一个正则表达式中学到什么?
注意,该篇文章当前为粗糙的 v0.9 版本,会在稍后润色更新. 让我们来看一道思考题,根据 rejectExp,分析其正则执行过程中如何进行过滤?包含哪些执行步骤? rejectExp 变量的值如下: ...
- linux磁盘分区详解【转】
本文装载自:http://blog.csdn.net/aaronychen/article/details/2270048#comments 在学习 Linux 的过程中,安装 Linux 是每一个初 ...
- Excel中Application和ApplicationClass的区别
Application和ApplicationClass的联系和区别Application和ApplicationClass都继承自接口_Application.Application为接口.Appl ...
- 【打分策略】Elasticsearch打分策略详解与explain手把手计算
一.目的 一个搜索引擎使用的时候必定需要排序这个模块,一般情况下在不选择按照某一字段排序的情况下,都是按照打分的高低进行一个默认排序的,所以如果正式使用的话,必须对默认排序的打分策略有一个详细的了解才 ...
- 浅谈java中死锁问题
知识点:死锁的产生.死锁的实例 一:死锁的产生 我们在解决多线程共享资源的线程同步问题时,会使用synchronized关键字修饰方法或者通过Lock加锁方式修饰方法.代码块,防止多个线程访问统一资源 ...
- Ambari安装指南
一.准备工作 l 基本工具 1) 安装epel,epel是一个提供高质量软件包的项目.先检查主机上是否安装: rpm -q epel-release 2) 如果没有安装,使用rpm命令安装: rpm ...
- React Native基础概念和基础认识
学习地址:https://github.com/vczero/react-native-lesson 当我们初始化一个RN项目的时候主要的是index.ios.js文件和index.android.j ...
- BZOJ 4416 【SHOI2013】 阶乘字符串
题目链接:阶乘字符串 又是一道不会做的题……看了题解后我被吓傻了…… 首先我们可以有一个显然的\(O(2^nn)\)的做法.我们先预处理出\(g_{i,j}\)表示字符串中\(i\)号位置开始第一个\ ...