小程序目前没有修改样式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. css属性详解和浮动

    一.CSS属性组成和作用 属性:属性值 1)每个css样式都必须由两部分组成:选择符和声明 注:声明又包括属性和属性值 2)css属性:属性是指定选择符具有的属性,他是css的核心,css2共有150 ...

  2. angular5给懒加载模块添加loading

    在根组件的构造函数中直接执行: this.router.events.subscribe(event=>{ if(event instanceof RouteConfigLoadEnd) { t ...

  3. HTML中title前面小图标和网站收藏现实的图标

    网站上的logo实际上是一个“favicon.ico”图片.实现步骤:第一步:制作favicon.ico,大小为16*16毫米:第二步:将“favicon.ico”放到项目的根路径下. 第三步:在所有 ...

  4. jenkins 重置构建历史

    item = Jenkins.instance.getItemByFullName("98")//THIS WILL REMOVE ALL BUILD HISTORYitem.bu ...

  5. eclipse svn 报错 文件夹已经不存在

    最近做项目用eclipse 遇到个很奇怪的问题,前几天svn还是可以用的,突然一下子不能用了,于是网上各种找解决方法啊,终于问题解决了,总结一下. 查看svn报错信息: svn number is l ...

  6. Linux I2C驱动程序设计

    1. Linux I2C子系统架构 (1)I2C核心(I2C-Core):I2C 总线和I2C 设备驱动的中间枢纽,它提供了I2C 总线驱动和设备驱动的注册.注销方法等 (2)I2C控制器驱动(ada ...

  7. 10g 升级到11g 失效对象2则

    ########SAMPLE 0 Invalid X_$ Views & Synonyms After Upgrading to 11g (文档 ID 878623.1) Those view ...

  8. J15W-J45W全铜截止阀厂家,J15W-J45W全铜截止阀价格 - 专题栏目 - 无极资讯网

    无极资讯网 首页 最新资讯 最新图集 最新标签   搜索 J15W-J45W全铜截止阀 无极资讯网精心为您挑选了(J15W-J45W全铜截止阀)信息,其中包含了(J15W-J45W全铜截止阀)厂家,( ...

  9. ISE报警:关键字 unsigned不可用于verilog

    问题:关键字 unsigned不可用于verilog 解决方案:去掉unsigned

  10. [转]C#算法题

    1:不允许使用循环语句.条件语句,在控制台中打印出1-200这200个数. 参考答案:这里我使用的是递归. static void Main(string[] args) { Print(); Con ...