微信小程序使用slider组件动态修改图片的透明度

这是微信小程序使用slider组件的一个简单示例。它功能为使用slider动态修改图片的透明度。

示例代码如下：

index.wxml

<image src='./img/timg.jpg' style="opacity:{{imgOpacity}}"></image>
<slider min="0" max="1" step="0.1" show-value value="1" bindchange="changeImgOpacity"/>

视图里使用了image标签，并使用style opacity对图片设置不同的透明度，imgOpacity有pageData里的值决定

index.js

var pageData={}
pageData.data={
    imgOpacity:1
}
pageData['changeImgOpacity']=function(e){
    this.setData({
        imgOpacity:e.detail.value
    })
}
Page(pageData)

slider组件绑定了行数changeImgOpacity，它会动态修改imgOpacity的属性，从而达到动态修改图片透明度的效果。

如图：