微信小程序实现点击按钮修改文字大小功能【附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自执行函数之伪命名空间封装法
Dec 25 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 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+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
PHP闭包函数详解
2016/02/13 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
Python中的localtime()方法使用详解
2015/05/22 Python
PyTorch预训练的实现
2019/09/18 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
岗位明星事迹材料
2014/05/18 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
Nginx实现会话保持的两种方式
2022/03/18 Servers