Commandes communes pour les mini-programmes WeChat : texte, icône, progression, bouton et navigateur

Tout d'abord, continuez l'affichage de l'interface de la page d'accueil précédente, utilisez plusieurs navigateurs de saut, puis utilisez les fonctions de chaque module fonctionnel
1. Affichage du texte
Utilisez les boutons pour ajouter et réduire le texte.
affichage du texte
{{text}}
ajouter du texte
réduire le texte

Opération interactive JS :

//初始化一个文字参数
var initText = '这是第一个文字n这是第二个文字'
Page({
data: {
text: initText
},
//初始化一个空的文字串
extraLine: [],
//添加按钮点击事件
add: function(e) {
//在文字串中添加文字，push
this.extraLine.push('添加的其他文字')
//设置数据
this.setData({
text: initText + 'n' + this.extraLine.join('n')
})
},
//减少按钮点击事件
remove: function(e) {
//判断文字串是否大于0，如果大于0，减少，反之，不操作
if (this.extraLine.length > 0) {
//在文字串中减少文字，pop
this.extraLine.pop()
//设置数据
this.setData({
text: initText + 'n' + this.extraLine.join('n')
})
}
}
})

2. affichage des icônes, Affichez le propre style du système et vous pouvez modifier la taille de l'icône
affichage de l'icône
style de taille de l'icône
type d'icône
style de couleur de l'icône

Opération interactive JS :

//.js
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
iconType: [
'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
'info_circle', 'cancel', 'search', 'clear'
]
}
})

3. Affichage de la progression, conception du style de barre de progression
Affichage de la barre de progression


Affichage de navigation du navigateur : divisé en deux formes, 1. Passer au nouveau. interface, 2. L'interface actuelle saute
affichage du navigateur

passe à une nouvelle page

Contrôles plus courants texte, icône, progression, bouton, navigateur pour les mini-programmes WeChat Pour les articles connexes , veuillez faire attention au site Web PHP chinois !