微信小程序实现点击按钮修改文字大小功能【附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、源代码点击此处本站下载。

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

您可能感兴趣的文章:

不得不知的ES6小技巧
ES6出来已经有好几年了，同时很多新特性可以被巧妙地运用在项目中。我想要列下其中一些，希望它们对你有用
2018-07-07
Bootstrap table右键功能实现方法
这篇文章主要为大家详细介绍了Bootstrap table右键功能的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
11个Javascript小技巧帮你提升代码质量(小结)
这篇文章主要介绍了11个Javascript小技巧帮你提升代码质量(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
js实现双色球效果
这篇文章主要为大家详细介绍了js实现双色球效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
Packer 3.0 JS压缩及混淆工具下载
Packer 3.0 JS压缩及混淆工具下载...
2007-05-05
js实现前端跨域postMessage的具体使用
这篇文章主要介绍了js实现前端跨域postMessage的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
js千分位实现方法大汇总
这篇文章主要介绍了js千分位实现方法大汇总，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
用javascript做一个小游戏平台 (二) 游戏选择器
昨天晚上“设计”了n久，那些代码都还没有运行起来，有点心急、有点郁闷。
2010-01-01
使用JavaScript获取地址栏参数的方法
这篇文章主要介绍了几种使用JavaScript获取地址栏参数的方法以及注意事项，非常的实用，这里推荐给大家
2014-12-12
微信小程序新手入门之自定义组件的使用
最近在用自定义组件搭建小程序,简单记录下步骤，所以这篇文章主要给大家介绍了关于微信小程序新手入门之自定义组件使用的相关资料，需要的朋友可以参考下
2021-05-05