微信小程序基于slider组件动态修改标签透明度的方法示例


Posted in Javascript onDecember 04, 2017

本文实例讲述了微信小程序基于slider组件动态修改标签透明度的方法。分享给大家供大家参考,具体如下:

1、效果展示

微信小程序基于slider组件动态修改标签透明度的方法示例

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组件动态修改标签透明度的方法示例

这里还是用了slider组件,该组件主要有以下几个属性:

微信小程序基于slider组件动态修改标签透明度的方法示例

3、源代码点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
全站最详细的Vuex教程
Apr 13 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 #Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 #Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 #Javascript
浅谈 vue 中的 watcher
Dec 04 #Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 #Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 #Javascript
微信小程序tabBar用法实例详解
Dec 04 #Javascript
You might like
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
调试Python程序代码的几种方法总结
2015/04/28 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
Python入门必须知道的11个知识点
2018/03/21 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
岗位职责风险防控
2014/02/18 职场文书
消防安全责任书
2014/04/14 职场文书
母亲节演讲稿
2014/05/27 职场文书
亮剑精神观后感
2015/06/05 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers