Common controls for WeChat mini programs: text, icon, progress, button, and navigator

First continue the previous homepage interface display, use several jump navigators, and then use the functions of each functional module
1. Text display
Use buttons to add and reduce text. The code is as follows:
text display
{{text}}
Add text
Reduce text

JS interactive operation:

//初始化一个文字参数
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. Icon display, display system Built-in style, you can also modify the size of the icon
icon display
icon size style
icon type
icon color style

JS interactive operation:

//.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. Progress display, style design of progress bar
Progress progress bar display


4. Navigator navigation display: divided into two forms, 1. Jump to a new interface, 2 .Current interface jump
navigator display

Jump to new page

For more articles related to text, icon, progress, button, and navigator commonly used controls in WeChat mini programs, please pay attention PHP Chinese website!