WeChatミニプログラムでテキストサイズを変更する方法

この記事では主に、ボタンをクリックしてテキスト サイズを変更する機能を実装する WeChat アプレットを紹介します。これには WeChat アプレット イベント バインディングと setData を使用して Page ページ データ データを動的に変更し、動的に変更する関連操作スキルを制御します。ページ要素の属性を必要とする友人は参照できます

この記事の例では、ボタンをクリックしてテキスト サイズを変更する機能を実装する WeChat アプレットについて説明します。参考までに皆さんに共有してください:

キーコード

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を使用して実装する方法複数ページのサイト開発

以上がWeChatミニプログラムでテキストサイズを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。