uniapp 自定义uni.showToast，可以修改背景色，移动端（Andriod、ios）可用

如下样式

 全局修改uni.showToast样式如下：

.uni-toast {
	background: #FFFFFF !important;
	box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.1) !important;
	border-radius: 10px 10px 10px 10px !important;
	color: #111111 !important;
}

如上修改只在H5上生效，在移动端 Android、ios没有生效

因此自定义一个弹框样式

<Toast ref="toast" />

import Toast from './myToast.vue';
export default {
	components: {
		Toast
	},
},

myToast.vue

<template>
  <view class="toast" v-if="isShow">
	 <div style="padding: 5px;display: flex;flex-direction: column;align-items: center;justify-content: center; width: 111px;height: 88px;background: #FFFFFF;box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.1);border-radius: 10px 10px 10px 10px;">
		 <image v-if="isSucess" style="width: 40px;height: 40px;" src="../../../../static/img/ggg.png" mode=""></image>
		 <image v-if="!isSucess" style="width: 40px;height: 40px;" src="../../../../static/img/sss.png" mode=""></image>
		 <text style="color: #111111;font-size: 16px;font-weight: bold;margin-top: 5px;width: 100px;word-break: break-all;text-align: center;">{{message}}</text>
	 </div> 
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      isShow: false,
      message: '',
      timer: null,
	  isSucess:false,
    };
  },
  methods: {
    show(message,num,duration=2000) {
	  if(num == 1){
		this.isSucess = true  
	  }	else if(num == 2){
		  this.isSucess = false  
	  }
      this.message = message;
      this.isShow = true;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.isShow = false;
      }, duration);
    }
  }
};
</script>
 
<style>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* padding: 10px; */
  background-color: #ffffff; /* 设置背景颜色 */
  color: #fff;
  border-radius: 10px;
  z-index: 9999;
}
</style>

如上即可

 uniapp32套精选源码截图：

​

关注公众号「码农园区」，回复 【uniapp源码】，即可获取全套源码下载链接