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

时间:2022-01-05 17:51:02

这是微信小程序使用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的属性,从而达到动态修改图片透明度的效果。

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