本文实例讲述了微信小程序基于slider组件动态修改标签透明度的方法。分享给大家供大家参考,具体如下:
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"
绑定事件处理函数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、源代码点击此处。
希望本文所述对大家微信小程序开发有所帮助。
如对本文有疑问, 点击进行留言回复!!
同事牛逼啊,写了个隐藏 bug,我排查了 3 天才解决问题!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
网友评论