微信小程序基于slider組件動態(tài)修改標簽透明度的方法示例
更新時間：2017年12月04日 15:41:57 作者：FutrueJet
這篇文章主要介紹了微信小程序基于slider組件動態(tài)修改標簽透明度的方法,可通過slider組件拖動實現(xiàn)圖片透明度的改變功能,涉及微信小程序事件綁定、base64格式圖片載入及slider組件使用技巧,需要的朋友可以參考下
本文實例講述了微信小程序基于slider組件動態(tài)修改標簽透明度的方法。分享給大家供大家參考，具體如下：
1、效果展示
2、關鍵代碼
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"綁定事件處理函數(shù)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組件，該組件主要有以下幾個屬性：
3、源代碼點擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關文章
JS使用JSON.parse(),JSON.stringify()實現(xiàn)對對象的深拷貝功能分析
這篇文章主要介紹了JS使用JSON.parse(),JSON.stringify()實現(xiàn)對對象的深拷貝功能,結合實例形式分析了JSON.parse()與JSON.stringify()方法實現(xiàn)深拷貝的相關實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2019-03-03
分包指的是把一個完整的小程序項目，按照不同的需求劃分為不同的子包，在構建時打包成不同的分包，用戶在瀏覽時按需加載，這篇文章主要介紹了uni-app做微信小程序的分包處理,需要的朋友可以參考下2023-02-02
JavaScript實現(xiàn)移動端短信驗證碼流程介紹
這篇文章主要為大家詳細介紹了javascript實現(xiàn)移動端發(fā)送短信驗證碼案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-10-10
有關script注入想必大家也有所了解，在本文將為大家介紹下如何屏蔽script注入，下面有個不錯的示例大家可以感受下2013-11-11
js es6系列教程 - 新的類語法實戰(zhàn)選項卡(詳解)
下面小編就為大家?guī)硪黄猨s es6系列教程 - 新的類語法實戰(zhàn)選項卡(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了常規(guī)表格多表頭查詢,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細介紹了js輪播圖的插件化封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章總結了JS格式化數(shù)字（每三位加逗號）的幾種方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了JS實現(xiàn)生成會變大變小的圓環(huán),涉及javascript數(shù)學運算及頁面樣式動態(tài)操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了微信小程序開發(fā)注意指南和優(yōu)化實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06