WeChat ミニ プログラムの共通コントロール: テキスト、アイコン、進行状況、ボタン、ナビゲーター

まず、前のホームページインターフェイスの表示を継続し、いくつかのジャンプナビゲーターを使用してから、各機能モジュールの機能を使用します
1.テキスト表示
テキストを追加および削減するには、次のコードを使用します:
テキスト表示
{{テキスト}}
テキストの追加
テキストの削減

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. ナビゲーター ナビゲーション表示: 2 つの形式に分かれています。 1. 新しいインターフェースにジャンプします。 2現在のインターフェイスがジャンプします
ナビゲーター表示

新しいページにジャンプします

WeChat ミニ プログラムでよく使用されるテキスト、アイコン、進行状況、ボタン、およびナビゲーター コントロールに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。