20-uni.showToast交互反馈的用法

[uni.showToast 显示消息提示框]

给uni图标一个点击事件，点击图片弹出消息提示框

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" @click="clickImg"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
      clickImg(){
        uni.showToast({
          title: "感谢使用uniapp"
        })
      }
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

小程序端

web端

图标是默认的success成功的，还可以换成其他的

methods: {
  clickImg(){
    uni.showToast({
      title: "发布失败",
      icon:'error'
      })
   }
}

web端

小程序端

[自定义图标的本地路径]

methods: {
      clickImg(){
        uni.showToast({
          title: "发布失败",
          image:"/static/logo.png"
        })
      }
}

将项目的图标作为弹出框的图标测试，两端也都是一样的结果

弹窗中如果不想要图标，icon值就给none，duration属性是弹窗显示的延迟时间，一般是1500毫秒的时间

[现在的弹窗是没有蒙版的]

也就是弹出弹窗的同时，还能去点击页面中的内容，例如跳转，都是能成功跳转的

蒙版是自带的属性，默认是关闭的

methods: {
      clickImg(){
        uni.showToast({
          title: "发布失败",
          icon:'error',
          mask: true
        })
      }
}

[点击图标先弹窗后跳转页面：]

直接把跳转写在弹窗的success属性的回调里是能实现跳转页面，但是不会显示弹窗，会直接跳走，可以写一个定时器，定在1.5秒后再跳转，这样，就能在显示完弹窗之后跳转了

methods: {
      clickImg(){
        uni.showToast({
          title: "发布失败",
          icon:'error',
          mask: true
        })
        
        setTimeout(()=>{
          uni.navigateTo({
            url:"/pages/demo/demo"
          })
        },1500)
      }
}