uniapp加载各种弹窗和提示框
loading控件显示loading隐藏loading弹出对话框
·
目录
一、模态弹窗(Modal)
效果图:
实现代码:
<template>
<view>
<button type="default" @tap="modalTap">有标题的modal</button>
<button type="default" @tap="noTitlemodalTap">无标题的modal</button>
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {
modalTap: function(e) {
uni.showModal({
title: '弹窗标题',
content: '弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内',
showCancel: false,
confirmText: '确定'
});
},
noTitlemodalTap: function(e) {
uni.showModal({
content: '弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内',
confirmText: '确定',
cancelText: '取消'
});
}
}
};
</script>
二、loading提示框
效果图:
代码实现:
<template>
<view>
<button @click="showLoading">显示 loading 提示框</button>
<button @click="hideLoading">隐藏 loading 提示框</button>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
showLoading: function() {
uni.showLoading({
title: 'loading'
});
},
hideLoading: function() {
uni.hideLoading();
}
}
};
</script>
三、消息提示框(Toast)
效果图:
代码实现:
<template>
<view>
<button type="default" @tap="toast1Tap">点击弹出默认toast</button>
<button type="default" @tap="toast2Tap">点击弹出设置duration的toast</button>
<button type="default" @tap="toast3Tap">点击弹出显示loading的toast</button>
<button type="default" @tap="toast4Tap">点击弹出显示自定义图片的toast</button>
<button type="default" @tap="hideToast">点击隐藏toast</button>
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {
toast1Tap: function() {
uni.showToast({
title: '默认'
});
},
toast2Tap: function() {
uni.showToast({
title: 'duration 3000',
duration: 3000
});
},
toast3Tap: function() {
uni.showToast({
title: 'loading',
icon: 'loading',
duration: 5000
});
},
toast4Tap: function() {
uni.showToast({
title: 'logo',
image: '/static/uni.png'
});
},
hideToast: function() {
uni.hideToast();
}
}
};
</script>
更多推荐
已为社区贡献31条内容
所有评论(0)