WeChat 미니 프로그램의 공통 컨트롤: 텍스트, 아이콘, 진행률, 버튼 및 탐색기

먼저 이전 홈페이지 인터페이스 표시를 계속하고 여러 점프 탐색기를 사용한 다음 각 기능 모듈의 기능을 사용하십시오.
1. 텍스트 표시
버튼을 사용하여 텍스트를 추가하고 줄입니다. 🎜>텍스트 표시
{{text}}
텍스트 추가
텍스트 줄이기

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. 아이콘 표시, 표시 시스템 구축 -스타일에서는 아이콘 크기

아이콘 표시
아이콘 크기 스타일
아이콘 유형
아이콘 색상 스타일

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. 진행률 표시, 진행률 표시줄 스타일 디자인

진행률 표시줄 표시


4. 네비게이터 탐색 표시: 두 가지 형태로 구분, 1. 새로운 인터페이스로 이동, 2 .현재 인터페이스 점프
네비게이터 표시

새 페이지로 이동

WeChat mini에서 일반적으로 사용되는 텍스트, 아이콘, 진행률, 버튼 및 네비게이터 컨트롤과 관련된 더 많은 기사를 보려면 프로그램, PHP 중국어 웹사이트를 주목해주세요!