在微信小程式中如何使用slider元件動態修改標籤透明度

這篇文章主要介紹了微信小程式基於slider元件動態修改標籤透明度的方法,可透過slider元件拖曳實現圖片透明度的改變功能,涉及微信小程式事件綁定、base64格式圖片載入及slider元件使用技巧,需要的朋友可以參考下

本文實例講述了微信小程式基於slider元件動態修改標籤透明度的方法。分享給大家供大家參考，具體如下：

關鍵程式碼

#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元件，這個元件主要有以下幾個屬性：

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

使用node.js如何建立子進程（詳細教學）

使用ES6如何實作單例模式

如何把Angular專案部署到nginx上

#在vue中使用v-model如何實作父子元件通訊

以上是在微信小程式中如何使用slider元件動態修改標籤透明度的詳細內容。更多資訊請關注PHP中文網其他相關文章！