init
This commit is contained in:
118
xhs-mini-demos/api-case/toast/templates.js
Normal file
118
xhs-mini-demos/api-case/toast/templates.js
Normal file
@@ -0,0 +1,118 @@
|
||||
/** 以下内容为自动生成，请勿手动修改 */
|
||||
|
||||
module.exports = {
|
||||
data: {
|
||||
page_data_0: "",
|
||||
|
||||
page_data_1: "",
|
||||
|
||||
page_data_2: "",
|
||||
|
||||
page_data_3: "",
|
||||
|
||||
page_data_4: "",
|
||||
|
||||
page_data_5: false,
|
||||
|
||||
page_data_6: false,
|
||||
|
||||
page_data_7: false,
|
||||
|
||||
page_data_8: "",
|
||||
|
||||
page_data_9: false,
|
||||
|
||||
page_data_10: false,
|
||||
|
||||
page_data_11: false,
|
||||
|
||||
page_data_12: "",
|
||||
},
|
||||
|
||||
page_fun_1(e) {
|
||||
this.setData("page_data_0", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_2(e) {
|
||||
this.setData("page_data_1", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_3(e) {
|
||||
this.setData("page_data_2", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_4(e) {
|
||||
this.setData("page_data_3", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_5(e) {
|
||||
this.setData("page_data_4", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_0() {
|
||||
this.setData({
|
||||
page_data_5: false,
|
||||
page_data_6: false,
|
||||
page_data_7: false,
|
||||
});
|
||||
|
||||
xhs.showToast({
|
||||
success: (res) => {
|
||||
console.log("success", res);
|
||||
this.setData({
|
||||
page_data_5: true,
|
||||
page_data_8: JSON.stringify(res),
|
||||
});
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log("fail", res);
|
||||
this.setData({
|
||||
page_data_6: true,
|
||||
page_data_8: JSON.stringify(res),
|
||||
});
|
||||
},
|
||||
complete: (res) => {
|
||||
console.log("complete", res);
|
||||
this.setData({
|
||||
page_data_7: true,
|
||||
});
|
||||
},
|
||||
title: this.data.page_data_0,
|
||||
icon: this.data.page_data_1,
|
||||
image: this.data.page_data_2,
|
||||
duration: this.data.page_data_3,
|
||||
mask: this.data.page_data_4,
|
||||
});
|
||||
},
|
||||
|
||||
page_fun_6() {
|
||||
this.setData({
|
||||
page_data_9: false,
|
||||
page_data_10: false,
|
||||
page_data_11: false,
|
||||
});
|
||||
|
||||
xhs.hideToast({
|
||||
success: (res) => {
|
||||
console.log("success", res);
|
||||
this.setData({
|
||||
page_data_9: true,
|
||||
page_data_12: JSON.stringify(res),
|
||||
});
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log("fail", res);
|
||||
this.setData({
|
||||
page_data_10: true,
|
||||
page_data_12: JSON.stringify(res),
|
||||
});
|
||||
},
|
||||
complete: (res) => {
|
||||
console.log("complete", res);
|
||||
this.setData({
|
||||
page_data_11: true,
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
66
xhs-mini-demos/api-case/toast/templates.xhsml
Normal file
66
xhs-mini-demos/api-case/toast/templates.xhsml
Normal file
@@ -0,0 +1,66 @@
|
||||
<!-- 以下内容为自动生成，请勿手动修改 -->
|
||||
|
||||
<view class="container">
|
||||
<showbox title="showToast演示">
|
||||
<box>
|
||||
<api-status
|
||||
success="{{page_data_5}}"
|
||||
complete="{{page_data_7}}"
|
||||
fail="{{page_data_6}}"
|
||||
text="{{page_data_8}}"
|
||||
>
|
||||
</api-status>
|
||||
<view class="_ui-space _mt8">
|
||||
<view class="_ui-input">
|
||||
<input placeholder="title" type="text" bindinput="page_fun_1" />
|
||||
</view>
|
||||
|
||||
<view class="_ui-input">
|
||||
<input placeholder="icon" type="text" bindinput="page_fun_2" />
|
||||
</view>
|
||||
|
||||
<view class="_ui-input">
|
||||
<input placeholder="image" type="text" bindinput="page_fun_3" />
|
||||
</view>
|
||||
|
||||
<view class="_ui-input">
|
||||
<input placeholder="duration" type="text" bindinput="page_fun_4" />
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<text class="_dflex _ai_center _px8">是否开启mask</text>
|
||||
<switch color="rgba(255, 36, 66, 1)" bindchange="page_fun_5" />
|
||||
</view>
|
||||
|
||||
<button
|
||||
class="_ui-button"
|
||||
hover-class="_ui-button-hover"
|
||||
bindtap="page_fun_0"
|
||||
>
|
||||
触发
|
||||
</button>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
<showbox title="hideToast演示">
|
||||
<box>
|
||||
<api-status
|
||||
success="{{page_data_9}}"
|
||||
complete="{{page_data_11}}"
|
||||
fail="{{page_data_10}}"
|
||||
text="{{page_data_12}}"
|
||||
>
|
||||
</api-status>
|
||||
<view class="_ui-space _mt8">
|
||||
<button
|
||||
class="_ui-button"
|
||||
hover-class="_ui-button-hover"
|
||||
bindtap="page_fun_6"
|
||||
>
|
||||
触发
|
||||
</button>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
3
xhs-mini-demos/api-case/toast/toast.css
Normal file
3
xhs-mini-demos/api-case/toast/toast.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.toast-container button{
|
||||
margin: 20px 0;
|
||||
}
|
||||
120
xhs-mini-demos/api-case/toast/toast.js
Normal file
120
xhs-mini-demos/api-case/toast/toast.js
Normal file
@@ -0,0 +1,120 @@
|
||||
const __templateJs = require("./templates.js");
|
||||
const __mergePageOptions = require("../../util/mergePageOptions.js");
|
||||
Page(__mergePageOptions({
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '消息提示框',
|
||||
path: 'packageAPI/pages/toast/toast'
|
||||
};
|
||||
},
|
||||
data: {
|
||||
duration: 3000,
|
||||
apiData: {
|
||||
content: '',
|
||||
success: false,
|
||||
fail: false,
|
||||
complete: false
|
||||
}
|
||||
},
|
||||
handleDuration(e) {
|
||||
this.setData({
|
||||
duration: e.detail.value - 0
|
||||
});
|
||||
},
|
||||
resetApiData() {
|
||||
this.setData({
|
||||
apiData: {
|
||||
success: false,
|
||||
fail: false,
|
||||
complete: false,
|
||||
content: ''
|
||||
}
|
||||
});
|
||||
},
|
||||
updateApiData(type, content) {
|
||||
const apiData = {
|
||||
...this.data.apiData
|
||||
};
|
||||
apiData[type] = true;
|
||||
apiData.content = content;
|
||||
this.setData({
|
||||
apiData
|
||||
});
|
||||
},
|
||||
common(options) {
|
||||
this.resetApiData();
|
||||
xhs.showToast({
|
||||
...options,
|
||||
success: res => {
|
||||
this.updateApiData('success', res);
|
||||
},
|
||||
fail: res => {
|
||||
this.updateApiData('fail', res);
|
||||
},
|
||||
complete: res => {
|
||||
this.updateApiData('complete', res);
|
||||
}
|
||||
});
|
||||
},
|
||||
toast1Tap() {
|
||||
this.common({
|
||||
title: '默认',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
toast2Tap() {
|
||||
this.common({
|
||||
icon: 'none',
|
||||
title: `duration ${this.data.duration}`,
|
||||
duration: this.data.duration
|
||||
});
|
||||
},
|
||||
toast3Tap() {
|
||||
this.common({
|
||||
title: 'loading',
|
||||
icon: 'loading',
|
||||
duration: this.data.duration
|
||||
});
|
||||
},
|
||||
toast4Tap() {
|
||||
this.common({
|
||||
title: 'loading',
|
||||
image: 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/baobaozhidao@2x-af409f9dbe.png',
|
||||
duration: this.data.duration
|
||||
});
|
||||
},
|
||||
toast5Tap() {
|
||||
this.common({
|
||||
title: 'loading',
|
||||
mask: true,
|
||||
duration: this.data.duration
|
||||
});
|
||||
},
|
||||
toast6Tap() {
|
||||
this.common({
|
||||
title: 'loading',
|
||||
icon: 'loading',
|
||||
image: 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/baobaozhidao@2x-af409f9dbe.png',
|
||||
duration: this.data.duration
|
||||
});
|
||||
},
|
||||
toast7Tap() {
|
||||
this.common({
|
||||
title: '测试😁'
|
||||
});
|
||||
},
|
||||
hideToast() {
|
||||
this.resetApiData();
|
||||
xhs.hideToast({
|
||||
success: res => {
|
||||
this.updateApiData('success', res);
|
||||
},
|
||||
fail: res => {
|
||||
this.updateApiData('fail', res);
|
||||
},
|
||||
complete: res => {
|
||||
this.updateApiData('complete', res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, __templateJs));
|
||||
8
xhs-mini-demos/api-case/toast/toast.json
Normal file
8
xhs-mini-demos/api-case/toast/toast.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "消息提示框",
|
||||
"usingComponents": {
|
||||
"showbox": "../../common/component/showbox/index",
|
||||
"box": "../../common/component/container/index",
|
||||
"api-status": "../../common/component/api-status/index"
|
||||
}
|
||||
}
|
||||
31
xhs-mini-demos/api-case/toast/toast.xhsml
Normal file
31
xhs-mini-demos/api-case/toast/toast.xhsml
Normal file
@@ -0,0 +1,31 @@
|
||||
<view class="container">
|
||||
<showbox title="基础使用">
|
||||
<box>
|
||||
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="toast1Tap">点击弹出默认toast(无ICON，无Image)</button>
|
||||
</box>
|
||||
</showbox>
|
||||
<showbox title="设置延迟时间">
|
||||
<box>
|
||||
<view class="_ui-input _mb8">
|
||||
<input type="text" placeholder="设置duration(以毫秒为单位)" bindinput="handleDuration" />
|
||||
</view>
|
||||
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="toast2Tap">点击弹出设置duration的toast</button>
|
||||
</box>
|
||||
</showbox>
|
||||
<showbox title="其他类型">
|
||||
<box>
|
||||
<view class="_ui-space">
|
||||
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="toast3Tap">点击弹出显示icon的toast</button>
|
||||
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="toast4Tap">点击弹出显示image的toast</button>
|
||||
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="toast5Tap">点击弹出显示mask的toast</button>
|
||||
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="toast7Tap">点击title显示表情</button>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
<showbox title="隐藏">
|
||||
<box>
|
||||
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="hideToast">点击隐藏toast</button>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
<include src="templates.xhsml" />
|
||||
Reference in New Issue
Block a user