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

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>
样式自己定义吧，点击效果是有的，亲测有效。