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

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

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

本文實例講述了微信小程序?qū)崿F(xià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">點擊我字體變大</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
  })
 }
})

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

3、源代碼點擊此處本站下載。

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

您可能感興趣的文章:

相關(guān)文章

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