源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

微信小程序实现点击按钮修改文字大小功能【附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)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部