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

高洛峰
풀어 주다: 2017-03-30 17:38:30
원래의
3065명이 탐색했습니다.

먼저 이전 홈페이지 인터페이스 표시를 계속하고 여러 점프 탐색기를 사용한 다음 각 기능 모듈의 기능을 사용하십시오.
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 중국어 웹사이트를 주목해주세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿