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