快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改文字大小功能【附demo源碼下載】

更新時(shí)間：2017年12月06日 09:00:10 作者：FutrueJet

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改文字大小功能,涉及微信小程序事件綁定及setData動(dòng)態(tài)修改Page頁(yè)面data數(shù)據(jù),進(jìn)而控制頁(yè)面元素屬性動(dòng)態(tài)改變的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改文字大小功能。分享給大家供大家參考，具體如下：

1、效果展示

2、關(guān)鍵代碼

index.wxml文件

<view class="view" style="font-size:{{fontSize}}pt">我是view標(biāo)簽</view>
<button class="btn" type="default" bindtap="magnifyFontSize">點(diǎn)擊我字體變大</button>
<button class="btn" type="default" bindtap="shrinkFontSize">點(diǎn)擊我字體變小</button>

index.js文件

Page({
 data:{
  fontSize:10
 },
 magnifyFontSize(){
  this.setData({
   fontSize:this.data.fontSize+1
  })
 },
 shrinkFontSize(){
  this.setData({
   fontSize:this.data.fontSize-1
  })
 }
})

和前面的文章相似，這里的事件響應(yīng)函數(shù)中使用了this.setData修改了fontSize為this.data.fontSize+1或this.data.fontSize-1，進(jìn)而動(dòng)態(tài)修改了index.wxml文件中style="font-size:{{fontSize}}pt"的字體大小。

3、源代碼點(diǎn)擊此處本站下載。

希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章:

相關(guān)文章

filemanage功能中用到的lib.js
filemanage功能中用到的lib.js...
2007-04-04
JavaScript實(shí)現(xiàn)繪制兩個(gè)坐標(biāo)之間的連線
本文主要介紹了JavaScript實(shí)現(xiàn)繪制兩個(gè)坐標(biāo)之間的連線功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-11-11
JS自定義函數(shù)實(shí)現(xiàn)時(shí)間戳轉(zhuǎn)換成date的方法示例
這篇文章主要介紹了JS自定義函數(shù)實(shí)現(xiàn)時(shí)間戳轉(zhuǎn)換成date的方法,結(jié)合具體實(shí)例形式分析了javascript時(shí)間戳與日期格式的計(jì)算與轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下
2017-08-08
JS變量中有var定義和無(wú)var定義的區(qū)別以及es6中l(wèi)et命令和const命令
這篇文章主要介紹了JS變量中有var定義和無(wú)var定義的區(qū)別以及es6中l(wèi)et命令和const命令,需要的朋友可以參考下
2017-02-02
BootstrapTable+KnockoutJS自定義T4模板快速生成增刪改查頁(yè)面
這篇文章主要介紹了BootstrapTable+KnockoutJS自定義T4模板快速生成增刪改查頁(yè)面的相關(guān)資料,需要的朋友可以參考下
2016-08-08
如何使用JavaScript實(shí)現(xiàn)棧與隊(duì)列
這篇文章主要介紹了如何使用JavaScript實(shí)現(xiàn)棧與隊(duì)列。棧和隊(duì)列是web開發(fā)中最常用的兩種數(shù)據(jù)結(jié)構(gòu)。絕大多數(shù)用戶，甚至包括web開發(fā)人員，都不知道這個(gè)驚人的事實(shí)。,需要的朋友可以參考下
2019-06-06
JavaScript報(bào)錯(cuò)：Uncaught TypeError: Cannot set&n
在 JavaScript 編程中,“Uncaught TypeError: Cannot set property ‘X’ of undefined” 是一種常見的錯(cuò)誤,這種錯(cuò)誤通常發(fā)生在試圖給一個(gè)未定義的對(duì)象的屬性賦值時(shí),本文介紹了JavaScript報(bào)錯(cuò)的解決方案,需要的朋友可以參考下
2024-07-07
js 分頁(yè)全選或反選標(biāo)識(shí)實(shí)現(xiàn)代碼
分頁(yè)全選或反選標(biāo)識(shí) 對(duì)多選按鈕操作。批量全選添加、批量移除。行單選添加、移除。分頁(yè)之后(全選或不選)狀態(tài)標(biāo)識(shí)依然存在
2011-08-08
JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果
這篇文章主要介紹了JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-05-05
Ajax中GET與POST請(qǐng)求操作方法梳理介紹
Ajax全稱是Asynchronous Javascript And XML（異步JavaScript和XML），在網(wǎng)頁(yè)中，利用XMLHttpRequest對(duì)象和服務(wù)器進(jìn)行數(shù)據(jù)交互的方式，這篇文章主要介紹了Ajax中GET與POST請(qǐng)求操作
2022-11-11