微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
更新时间：2017年12月06日 09:00:10 作者：FutrueJet
这篇文章主要介绍了微信小程序实现点击按钮修改文字大小功能,涉及微信小程序事件绑定及setData动态修改Page页面data数据,进而控制页面元素属性动态改变的相关操作技巧,需要的朋友可以参考下
本文实例讲述了微信小程序实现点击按钮修改文字大小功能。分享给大家供大家参考，具体如下：
1、效果展示
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+1或this.data.fontSize-1，进而动态修改了index.wxml文件中style="font-size:{{fontSize}}pt"的字体大小。
3、源代码点击此处本站下载。
希望本文所述对大家微信小程序开发有所帮助。
相关文章
filemanage功能中用到的lib.js...2007-04-04
本文主要介绍了JavaScript实现绘制两个坐标之间的连线功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-11-11
这篇文章主要介绍了JS自定义函数实现时间戳转换成date的方法,结合具体实例形式分析了javascript时间戳与日期格式的计算与转换相关操作技巧,需要的朋友可以参考下2017-08-08
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
这篇文章主要介绍了JS变量中有var定义和无var定义的区别以及es6中let命令和const命令,需要的朋友可以参考下2017-02-02
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
这篇文章主要介绍了BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面 的相关资料,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了如何使用JavaScript实现栈与队列。栈和队列是web开发中最常用的两种数据结构。绝大多数用户，甚至包括web开发人员，都不知道这个惊人的事实。,需要的朋友可以参考下2019-06-06
JavaScript报错：Uncaught TypeError: Cannot set&n
在 JavaScript 编程中,“Uncaught TypeError: Cannot set property ‘X’ of undefined” 是一种常见的错误,这种错误通常发生在试图给一个未定义的对象的属性赋值时,本文介绍了JavaScript报错的解决方案,需要的朋友可以参考下2024-07-07
分页全选或反选标识 对多选按钮操作。 批量全选添加、批量移除。 行单选添加、移除。 分页之后(全选或不选)状态标识依然存在2011-08-08
这篇文章主要介绍了JS如何实现手机端输入验证码效果,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
Ajax全称是Asynchronous Javascript And XML（异步JavaScript和XML），在网页中，利用XMLHttpRequest对象和服务器进行数据交互的方式，这篇文章主要介绍了Ajax中GET与POST请求操作2022-11-11
最新评论