专栏首页编程微刊小程序JS动态修改样式

小程序JS动态修改样式

先写一个不怎么好看的demo,通过点击事件来控制view的元素属性,把背景改变成蓝色。

是这样的效果:

上一份小代码 index.wxml

<view >
  <view class="cont" style="background:{{background}};">属性改变</view>
  <button bindtap="tryDriver">测试</button>
</view>

index.wxss

.cont{
  height: 150rpx;
  line-height: 150rpx;
  text-align: center;
  border: 1px  solid  #89dcf8;
  margin-bottom:112rpx;
  margin:13rpx;
}

index.js

Page({
  data: {},
  tryDriver: function() {
    this.setData({
      background: "#89dcf8"
    })
  }
})

一次性修改多个属性,比如同时改变背景颜色,字体颜色,字体大小等样式

wxml:

<view >
  <view class="cont" style="background:{{background}};color:{{color}};height:{{height}}">属性改变</view>
  <button bindtap="tryDriver">测试</button>
</view>

js:

Page({
  data: {},
  tryDriver: function() {
    this.setData({
      background: "#89dcf8",
      color:'#ffffff',
      height:"322rpx"
    })
  }
})

原文作者:祈澈姑娘。 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子一枚,爱编程,爱运营,爱折腾。长期坚持总结工作中遇到的技术问题。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 新功能:个人小程序直接打开公众号链接

    在此之前,想要从小程序里面跳转一个链接,要使用web-view才可以,而且个人 <web-view src="https://www.baidu.com/">...

    祈澈菇凉
  • 小程序跳转公众号

    随着小程序不断的发展,现在个人的小程序也开放了很多功能了,个人小程序直接打开公众号链接。在群里看到的一款小程序,点击可以直接阅读文章了,所以琢磨了一下,写了一些...

    祈澈菇凉
  • 小程序搜索弹出搜索内容功能(模糊查询)

    祈澈菇凉
  • Django实战-生鲜电商-数据库事务

    在订单确认中,涉及到获取参数、校验参数;查询商品数据,判断是否为购物车的商品,遍历商品 id,获取商品信息;读取商品的数量,计算商品的金额,判断库存,需要用户的...

    小团子
  • Android LayoutInflater.inflate()源码流程分析

      我们在根据layout文件得到View的时候都会使用LayoutInflater.from(mContext).inflate().下面我们来分析这个获取V...

    曾大稳
  • 冬日暖阳放心晒,AR新应用帮你解决紫外线问题

    VRPinea
  • 任督二脉之Shell中的正则表达式cut命令awk命令sed命令sort命令wc命令

    VBird说学习Linux,掌握了Shell和正则就相当于打通了任督二脉,此后能力的成长才会突飞猛进。

    Alfred Zhao
  • 关于cocos2dx客户端程序的自动更新解决方案

    转载请注明出处:帘卷西风的专栏(http://blog.csdn.net/ljxfblog)

    帘卷西风
  • 《JSP极简教程》jsp c:forEach用法引入jstl标签库代码实例

    一个会写诗的程序员
  • 关系推理水平超越人类:DeepMind展示全新神经网络推理预测技术

    选自DeepMind 作者:Adam Santoro等 机器之心编译 参与:机器之心编辑部 想象一下在阿加莎·克里斯蒂(《东方快车谋杀案》作者)的侦探小说里收...

    机器之心

扫码关注云+社区

领取腾讯云代金券