您的位置：首页 > 移动开发 > 微信开发

微信小程序基于slider组件动态修改标签透明度的方法示例

2017-12-04 15:41 1476 查看

本文实例讲述了微信小程序基于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"/>

此处的

opacity:{{imgOpacity}}

绑定data中的

imgOpacity:1

，用于表示图片透明度。同时

bindchange="changeImgOpacity"

绑定事件处理函数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、源代码点击此处本站下载。

希望本文所述对大家微信小程序开发有所帮助。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 微信小程序 slider组件标签

相关文章推荐

新的分享

章节导航