How to change text size in WeChat mini program

This article mainly introduces the WeChat applet to implement the function of clicking a button to change the text size, involving the WeChat applet event binding and setData to dynamically modify the Page page data data, and then control the related operation skills of dynamically changing the page element attributes, which are required Friends can refer to

. This article describes an example of a WeChat applet that implements the function of changing the text size by clicking a button. Share it with everyone for your reference, the details are as follows:

Key code

index.wxml file

<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 file

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

Similar to the previous article, the event response function here uses this.setDatamodifies the fontSize to this.data.fontSize 1 or this.data.fontSize -1, and then dynamically modify the font size of style="font-size:{{fontSize}}pt" in the index.wxml file.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Pseudo array usage in JavaScript (detailed tutorial)

How to extract third-party libraries using webpack

JavaScript module optimization

How to use webpack express to achieve multi-page site development

The above is the detailed content of How to change text size in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!