uni-app点击按钮弹出提示框,选择确定和取消

以下是在写app页面时,遇到的感觉比较好用的弹框效果,仅以此记录,一个是弹框效果-uni.showModal(OBJECT),一个是跳转页面uni.navigateTo({}),大家有需要的可以参考一下哦

另外uni.showModal是一个异步的函数,异步进行一次弹窗操作,这就使得函数域this指向的window或者其他域,所以会拿不到data里数据 , 咱们在success后面加上 .bind(this) 就可以解决这个问题了

.bind(this)

<template>
    <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.7s'}]"   @click="open()"  >
		<view class="content" >
		    <text class="cuIcon-exit text-cyan"></text>
			<text class="text-grey">退出</text>
		</view>
	</view>
</template>
<script>
    export default {
        data() {
            return {};
        },
        onLoad() {},
        methods: {
            open(){
				uni.showModal({
				    title: '提示',
				    content: '确定退出登录吗?',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							uni.navigateTo({
								url: '/pages/common/exit'  //点击要跳转的页面路径
							});
							
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }.bind(this)//可处理uni.shuowModal的异步(即拿不到data里面数据的解决办法)
				});
			},
        },
    }
</script>
<style>
 
</style>
样式自己定义吧,点击效果是有的,亲测有效。
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐