Home  >  Article  >  Web Front-end  >  How to change text size in WeChat mini program

How to change text size in WeChat mini program

亚连
亚连Original
2018-06-22 15:40:3913288browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn