微信小程序实现点击按钮修改文字大小功能【附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的strict模式与with关键字介绍
Feb 08 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
js 获取时间间隔实现代码
May 12 Javascript
JS扩展方法实例分析
Apr 15 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
微信开发 微信授权详解
Oct 21 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 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
php 中的4种标记风格介绍
2012/05/10 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
php读取本地json文件的实例
2018/03/07 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
python中的sort方法使用详解
2014/07/25 Python
python多重继承新算法C3介绍
2014/09/28 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
机器学习python实战之决策树
2017/11/01 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
基于python实现操作git过程代码解析
2020/07/27 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
安全横幅标语
2014/06/09 职场文书
交通安全横幅标语
2014/10/07 职场文书
领导离职感言
2015/08/03 职场文书
社区服务理念口号
2015/12/25 职场文书
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫