当前位置：首页 > 资讯 > 技术文档

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

时间：2022-03-08 08:21 编辑：来源：阅读：
扫一扫，手机访问

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

本文实例讲述了微信小程序实现点击按钮修改文字大小功能。分享给大家供大家参考，具体如下： [b]1、效果展示[/b] [img]http://files.jb51.net/file_images/article/201712/201712690832333.gif?201711691522[/img] [b]2、关键代码[/b] 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
  })
 }
})

和前面的文章相似，这里的事件响应函数中使用了[code]this.setData[/code]修改了fontSize为[code]this.data.fontSize+1[/code]或[code]this.data.fontSize-1[/code]，进而动态修改了index.wxml文件中[code]style="font-size:{{fontSize}}pt"[/code]的字体大小。 [b]3、源代码[/b]点击此处[url=http://xiazai.jb51.net/201712/yuanma/wx-fontsize-codes(jb51.net).rar][b]本站下载[/b][/url]。希望本文所述对大家微信小程序开发有所帮助。

全部评论(0)

上一篇：微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
下一篇：微信小程序组件 marquee实例详解

资讯排行榜
更多>>