The WeChat applet uses the slider component to dynamically modify the label transparency.

Example of how a applet dynamically modifies the label transparency based on the slider component.

This article describes how to dynamically modify the label transparency of a Applet based on the slider component. We will share this with you for your reference. The details are as follows:

1. Effect display

2. Key code

Index. wxml

<view class="img" style="opacity:{{imgOpacity}}"></view><slider min="0" max="1" step="0.1" show-value value="1" bindchange="changeImgOpacity"/>

Hereopacity:{{imgOpacity}}Bind dataimgOpacity:1Used to indicate the image transparency. At the same timebindchange="changeImgOpacity"The changeImgOpacity function is used to change the image transparency.

Index. js

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

Used heresetDataSets the transparency imgOpacity.console.log(e)Obtain information that affects imgOpacity changes on the console.e.detail.valueSuch:

The slider component is used here, which has the following attributes:

3. Source CodeClick hereDownload from this site.

I hope this article will help you develop small programs.