微信小程序实现点击按钮修改文字大小功能【附demo源码下载】


Posted in Javascript onDecember 06, 2017

本文实例讲述了微信小程序实现点击按钮修改文字大小功能。分享给大家供大家参考,具体如下:

1、效果展示

微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

2、关键代码

index.wxml文件

<view class="view" style="font-size:{{fontSize}}pt">我是view标签</view>
<button class="btn" type="default" bindtap="magnifyFontSize">点击我字体变大</button>
<button class="btn" type="default" bindtap="shrinkFontSize">点击我字体变小</button>

index.js文件

Page({
 data:{
  fontSize:10
 },
 magnifyFontSize(){
  this.setData({
   fontSize:this.data.fontSize+1
  })
 },
 shrinkFontSize(){
  this.setData({
   fontSize:this.data.fontSize-1
  })
 }
})

和前面的文章相似,这里的事件响应函数中使用了this.setData修改了fontSize为this.data.fontSize+1this.data.fontSize-1,进而动态修改了index.wxml文件中style="font-size:{{fontSize}}pt"的字体大小。

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

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

Javascript 相关文章推荐
javascript 动态添加事件代码
Nov 30 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
js密码强度实时检测代码
Mar 02 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 #Javascript
js 两数组去除重复数值的实例
Dec 06 #Javascript
js 提取某()特殊字符串长度的实例
Dec 06 #Javascript
React-Router如何进行页面权限管理的方法
Dec 06 #Javascript
移动前端图片压缩上传的实例
Dec 06 #Javascript
详细分析JS函数去抖和节流
Dec 05 #Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 #Javascript
You might like
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
Js注册协议倒计时的小例子
2013/06/24 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
使用js画图之画切线
2015/01/12 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
python生成密码字典的方法
2018/07/06 Python
Python双向循环链表实现方法分析
2018/07/30 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
Linux面试题LINUX系统类
2014/11/19 面试题
应聘医药销售自荐书范文
2014/02/08 职场文书
简单租房协议书范本
2014/08/20 职场文书
土地转让协议书
2014/09/27 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
Python读写yaml文件
2022/03/20 Python
MySQL事务的隔离级别详情
2022/07/15 MySQL