Maison > interface Web > js tutoriel > le corps du texte

Comment modifier la taille du texte dans le mini-programme WeChat

亚连
Libérer: 2018-06-22 15:40:39
original
13254 Les gens l'ont consulté

Cet article présente principalement l'applet WeChat pour implémenter la fonction de modification de la taille du texte en cliquant sur un bouton, impliquant la liaison d'événements de l'applet WeChat et setData pour modifier dynamiquement les données de la page, puis contrôler les compétences opérationnelles associées au changement dynamique. les attributs d'élément de page, qui sont nécessaires. Les amis peuvent se référer à

Cet article décrit un exemple d'applet WeChat qui implémente la fonction de modification de la taille du texte en cliquant sur un bouton. Partagez-le avec tout le monde pour votre référence, comme suit :

Code clé

fichier 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>
Copier après la connexion

fichier index.js

Page({
 data:{
  fontSize:10
 },
 magnifyFontSize(){
  this.setData({
   fontSize:this.data.fontSize+1
  })
 },
 shrinkFontSize(){
  this.setData({
   fontSize:this.data.fontSize-1
  })
 }
})
Copier après la connexion

est similaire à l'article précédent. La fonction de réponse à l'événement utilise ici this.setData pour modifier la taille de police en this.data.fontSize+1 ou this.data.fontSize-1, modifiant ainsi dynamiquement la taille de la police de style="font-size:{{fontSize}}pt" dans l'index. fichier wxml.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

À propos de l'utilisation du pseudo-tableau JavaScript (tutoriel détaillé)

Comment extraire des bibliothèques tierces à l'aide de webpack

Optimisation du module JavaScript

Comment utiliser webpack+express pour implémenter le développement de sites multipages

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!