微信小程序基于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 相关文章推荐
jquery获取及设置outerhtml的方法
Mar 09 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
js 解析 JSON 数据简单示例
Apr 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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP 无限级分类
2017/05/04 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
js 幻灯片的实现
2011/12/06 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Python按钮的响应事件详解
2019/03/04 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python3 合并二叉树的实现
2019/09/30 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
css图标制作教程制作云图标
2014/01/19 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
中职生自荐信
2013/10/13 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
珠宝店促销方案
2014/03/21 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书