微信小程序基于slider組件動態(tài)修改標(biāo)簽透明度的方法示例
更新時間：2017年12月04日 15:41:57 作者：FutrueJet
這篇文章主要介紹了微信小程序基于slider組件動態(tài)修改標(biāo)簽透明度的方法,可通過slider組件拖動實現(xiàn)圖片透明度的改變功能,涉及微信小程序事件綁定、base64格式圖片載入及slider組件使用技巧,需要的朋友可以參考下
本文實例講述了微信小程序基于slider組件動態(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，用于表示圖片透明度。同時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)在控制臺獲取影響imgOpacity改變的e.detail.value，如下圖：
這里還是用了slider組件，該組件主要有以下幾個屬性：
3、源代碼點擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
JavaScript針對SPA應(yīng)用的前端優(yōu)化策略概述
前端性能優(yōu)化是Web開發(fā)中非常重要的一環(huán)，優(yōu)化能夠有效地提高網(wǎng)站的加載速度和用戶體驗，而對于SPA來說，由于其特殊的加載方式和數(shù)據(jù)交互方式，其優(yōu)化策略也具有一定的特殊性，需要詳細(xì)了解可以參考下文2023-05-05
微信小程序購物商城系統(tǒng)開發(fā)系列-工具篇的介紹
這篇文章主要介紹了微信小程序購物商城系統(tǒng)開發(fā)系列-工具篇的介紹,具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-11-11
這篇文章主要介紹使用js模擬一個類似百度google的模糊搜索下拉列表,需要的朋友可以參考下2014-04-04
解析javascript 數(shù)組以及json元素的添加刪除
本篇文章是對javascript 數(shù)組以及json元素的添加刪除進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
這篇文章主要介紹了如何去除js中的json存在的轉(zhuǎn)義字符\問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
JavaScript中this關(guān)鍵字使用方法詳解
JavaScript中this關(guān)鍵字使用方法詳解...2007-03-03
這篇文章主要介紹了JavaScript內(nèi)存泄漏的處理方式，通過理論和實例結(jié)合的方式讓你理解的更加透徹。2017-11-11
KnockoutJS 3.X API 第四章之click綁定
click綁定主要作用是用于DOM元素被點擊時調(diào)用相關(guān)JS函數(shù)。這篇文章主要介紹了KnockoutJS 3.X API 第四章之click綁定，感興趣的朋友一起看看吧2016-10-10
這篇文章主要介紹了使用js動態(tài)移動滾動條至底部,需要的朋友可以參考下2014-04-04
因為我一直不知道該怎么判斷swf文件是否加載完畢，于是想用js來實現(xiàn)這個功能,需要的朋友可以參考下2014-08-08