公式ドキュメントのリンク:uni.showToast(OBJECT) | uni-app 公式 Web サイト
1.uni.showToast({}) はメッセージ プロンプト ボックスを表示します。
共通属性:
title: ページ プロンプトのコンテンツ
image: プロンプト ボックスのデフォルト アイコンを変更する
期間: プロンプト ボックスが消えるまでにページに表示される秒数
画像属性を追加した後。
注: iconfont アイコンを探している場合は、デフォルトの背景色がグレーであるため、白いアイコン rgb (255, 255, 255) を選択するのが最善です。アイコンが他の色の場合は、色の違いが発生します。背景と合っていません。
<template>
<view class="content">
<button type="primary" @tap="addData">添加数据</button>
</view>
</template>
<script>
export default {
methods: {
addData:() => {
uni.showToast({
title:"数据删除成功！",
duration:2000,
position:200,
image:"../../static/delete.png"
})
}
}
}
また、image 属性には .gif 画像も使用できますが、背景色と一致する .gif 画像を見つける必要があります。そうしないと、このように場違いになってしまいます。
2. uni.showLoading({}) は読み込み中の動的なアイコンを表示します。通常は uni.hideLoading({}) と一緒に使用され、一方が表示され、もう一方が非表示になります。同時に、uni.hideLoading({}) は通常は setTimeout() とともに使用されます。
ケースコード:
<template>
<view class="content">
<button type="primary" @tap="addData">添加数据</button>
</view>
</template>
<script>
export default {
methods: {
addData:() => {
uni.showLoading({
title:"数据加载中！",
})
setTimeout(() => {
uni.hideLoading()
uni.showToast({
title:"数据加载完成！"
})
},1500)
}
}
}
</script>
3.uni.showModal({}) はモーダル ポップアップ ウィンドウを表示します。これは通常、ユーザーによる選択を判断し、それに基づいてさらなるロジックをトリガーするために使用されます。
[OK] ボタンを 1 つだけ配置することも、[OK] ボタンと [キャンセル] ボタンの両方を配置することもできます。 jsでアラートと確認を統合したAPIに似ています。
多くの属性があり、テキストの色、テキスト内容の出力、ボタンの表示の有無などを調整できます。詳細については、公式 API を参照してください。
<template>
<view class="content">
<button type="primary" @tap="addData">添加数据</button>
</view>
</template>
<script>
export default {
methods: {
addData: () => {
uni.showModal({
title: '温馨提示！',
content: '据说林深时见鹿是真的！',
confirmColor: "#4CD964",
cancelColor: "#ffff00",
success: (res) => {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
}
}
</script>
4.uni.showActionSheet({}) はアクション メニューを下から上にポップアップします。
コード例:
<template>
<view class="content">
<button type="primary" @tap="addData">添加数据</button>
</view>
</template>
<script>
export default {
methods: {
addData: () => {
uni.showActionSheet({
itemList: ['上传作业', '下载作业', '查看作业'],
success: function(res) {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
},
fail: function(res) {
console.log(res.errMsg);
}
});
}
}
}
</script>