本文实例讲述了微信小程序基于 slider 组件动态修改标签透明度的方法。分享给大家供大家参考,具体如下:
1、效果展示2、关键代码index.wxml
- <view class="img" style="opacity:{{imgOpacity}}"></view>
- <slider min="0" max="1" step="0.1" show-value value="1" bindchange="changeImgOpacity"/>
此处的
绑定 data 中的 imgOpacity:1,用于表示图片透明度。同时
- opacity:{{imgOpacity}}
绑定事件处理函数 changeImgOpacity 用于改变图片透明度。
- bindchange="changeImgOpacity"
index.js
- var pageData = {}
- pageData.data = {
- imgOpacity: 1
- }
- pageData['changeImgOpacity'] = function(e) {
- //console.log(e)
- this.setData({
- imgOpacity: e.detail.value
- })
- }
- Page(pageData)
这里使用 setData 设置透明度 imgOpacity,读者可使用 console.log(e) 在控制台获取影响 imgOpacity 改变的 e.detail.value,如下图:
这里还是用了 slider 组件,该组件主要有以下几个属性:
3、源代码点击此处 本站下载 。
希望本文所述对大家微信小程序开发有所帮助。
来源: http://www.jb51.net/article/129725.htm