微信小程式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){
  this.setData({
    imgOpacity:e.detail.value
  })
}
Page(pageData)

這裡使用

setData設定透明度imgOpacity，讀者可使用console.log(e)在控制台取得影響imgOpacity改變的e.detail.value，如下圖：

這裡還是用了slider元件，這個元件主要有以下幾個屬性：

#以上內容就是微信小程式slider元件動態修改標籤透明度的方法，希望能幫助大家。

微信小程式如何實作圖片放大預覽功能

#微信小程式分享時可自訂配圖新功能

微信小程式視頻，音樂，圖片組件詳解

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