在微信小程式中如何修改文字大小

這篇文章主要介紹了微信小程式實現點擊按鈕修改文字大小功能,涉及微信小程式事件綁定及setData動態修改Page頁面data資料,進而控制頁面元素屬性動態改變的相關操作技巧,需要的朋友可以參考下

本文實例講述了微信小程式實作點擊按鈕修改文字大小功能。分享給大家供大家參考，具體如下：

關鍵程式碼

#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 1或this.data.fontSize -1，進而動態修改了index.wxml檔中style="font-size:{{fontSize}}pt"的字型大小。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

有關JavaScript的偽數組用法（詳細教學）

使用webpack如何擷取第三方函式庫

JavaScript模組最佳化

使用webpack express如何實作多頁網站開發

以上是在微信小程式中如何修改文字大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！