小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色:
<view class="page" style="background-color:{{pageBackgroundColor}}" > <button bindtap="changeColor" hover-class="none">点击修改背景颜色</button> </view> changeColor: function() { var bgColor = this.data.pageBackgroundColor == 'red' ? '#5cb85c' : 'red'; // 设置背景颜色数据 this.setData( { pageBackgroundColor: bgColor } ); }

微信小程序,动态改变样式的更多相关文章

  1. 微信小程序切换标签改变样式

    微信小程序切换标签改变样式 wxml <!--顶部导航栏--> <view class="swiper-tab"> <view class=" ...

  2. 微信小程序动态更改样式

    获取列表长度(动态渲染),当长度>x时添加内联样式并绑定数据{{}},通过js动态更改{{}}

  3. 微信小程序:WXSS 样式

    微信小程序:WXSS 样式 一.WXSS 样式 XSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改. 1,新增了尺寸单位: 在写 CSS 样式时,开发者需要考虑到手机设备的屏 ...

  4. 微信小程序动态生成保存二维码

    起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...

  5. 微信小程序wxss设置样式

    微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视 ...

  6. 微信小程序——动态修改页面数据(和样式)及参数传递

    1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造 ...

  7. 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示

    一.前言 项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个 ...

  8. 微信小程序----wxss设置样式

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

  9. 微信小程序子组件样式不起作用的解决办法

    今天我在编写微信小程序项目时,发现父组件引用子组件过后,子组件的样式不起作用,在上网查了很多解决办法后,成功解决了这一问题. 解决办法: 1.在全局样式文件app.wxss中引入子组件的样式,如 @i ...

  10. 微信小程序动态修改页面标题setNavigationBarTitle

    微信小程序是可以动态修改页面标题的. 首先我们来看看静态是怎么实现的 在对应页面的json文件里面加入下面代码就可以实现了 { "navigationBarTitleText": ...

随机推荐

  1. jsoup 抓取省市区

    package com.xazhxc.htjcom.back.controller.base; import cn.hutool.core.util.StrUtil; import com.aliba ...

  2. 接口自动化之unittest+ddt

    我在上一篇(https://www.cnblogs.com/wlyhy/p/10083318.html) 文章整理了unittest的模板,但在后续学习中,发现还有许多值得优化的地方.例如在我们设计测 ...

  3. ie下的值改变事件

    前两天在页面上写了一个值改变事件,值是用js改变的,用的oninput方法和onpropertyChange方法,但是可能是因为框架的缘故,在ie浏览器下,陷入了莫名其妙的循环中.然后考虑是在加载的时 ...

  4. LOJ565. 「LibreOJ Round #10」mathematican 的二进制(NTT)

    题目链接 https://loj.ac/problem/565 题解 首先,若进行所有操作之后成功执行的操作数为 \(m\),最终得到的数为 \(w\),那么发生改变的二进制位的数量之和(即代价之和) ...

  5. POJ 2253 Frogger ,poj3660Cow Contest(判断绝对顺序)(最短路,floyed)

    POJ 2253 Frogger题目意思就是求所有路径中最大路径中的最小值. #include<iostream> #include<cstdio> #include<s ...

  6. linux下获取系统时间 和 时间偏移

    获取linux时间  并计算时间偏移 void getSystemTimer(void){#if 0 char *wdate[]={"Sun","Mon",&q ...

  7. Javascript面向对象编程(转)

    http://blog.csdn.net/lmj623565791/article/details/29210679 其实,从这个面向对象编程的例子来看,思路还是很清晰的. 第一步: 构造函数,用于初 ...

  8. Bugfree安装与使用

    第一步:下载XAMPP和bugfree http://www.bugfree.org.cn/ http://www.apachefriends.org/zh_cn/xampp.html 第二步:安装 ...

  9. Django级联删除的选项

    Django级联删除的选项 Django模型中的on_delete属性具有如下选项: CASCADE 级联删除,也就是被引用的实体被删除后,相关的记录信息都会被删除. PROTECT 阻止删除被引用的 ...

  10. 快速部署简单私有云CloudStack(上)

    前言: 亲身用了大半年,没出过重大毛病,也就是服务挂了,跟服务器也没啥关系.如果想更深入学习cloudstack可以试试高级网络,我是一直用的简单网络(扁平网络). 由来:CloudStack的前身是 ...