微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017-12-06 10:27
2006 查看
1、效果展示
2、操作步骤:
① 数据绑定view样式背景属性值
② 通过逻辑文件设置该背景属性初始值
③ 通过点击按钮修改背景属性值
3、关键代码
index.wxml文件:
<view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view> <button type="default" bindtap="changeBg">点击我修改view标签的背景颜色</button>
index.js文件:
var num=0; Page({ data:{ viewBg:'green' }, changeBg(){ num++; var result=num/2; if(num%2==0){ this.setData({ viewBg:'green' }) }else{ this.setData({ viewBg:'blue' }) } console.log(num) console.log(result) } })
代码中通过设置num递增数,再针对每次的事件响应进行取余运算判定num的奇偶数,进而实现设置
style="background:{{viewBg}};color:white;height:100px;"中viewBg背景色值在绿色与蓝色之间切换的效果。
4、源代码点击此处本站下载。
希望本文所述对大家微信小程序开发有所帮助。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
- 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
- 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
- 【微信小程序教程】点击按钮修改view标签背景颜色
- 微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
- 微信小程序如何实现通过点击view改变背景颜色
- 微信小程序实现点击文字页面跳转功能【附源码下载】
- 微信小程序实现的涂鸦功能示例【附源码下载】
- Android实现软件列表的点击启动另外一个程序功能【附demo源码下载】
- jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
- 【微信小程序教程】点击按钮修改字体颜色
- 微信小程序实现打开内置地图功能【附源码下载】
- 微信小程序使用picker实现时间和日期选择框功能【附源码下载】
- 微信小程序使用progress组件实现显示进度功能【附源码下载】
- 【微信小程序教程】点击按钮移动view标签的位置
- JS实现的按钮点击颜色切换功能示例
- 微信小程序picker组件简单用法示例【附demo源码下载】
- 微信小程序 | 多个按钮或VIEW,点击改变状态 简易的实现方法
- 微信小程序使用video组件播放视频功能示例【附源码下载】