更新记录
1.0.0(2020-11-18) 下载此版本
本次更新:
1.自定义加载动画弹窗,可以自定义动画 2.自定义提示弹,去掉了uni自带的黑色弹窗
平台兼容性
uni-app
Vue2 | Vue3 |
---|---|
√ | ? |
app-vue | app-nvue | app-android | app-ios | app-harmony |
---|---|---|---|---|
? | ? | ? | ? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
快应用-华为 | 快应用-联盟 |
---|---|
? | ? |
uni-app x
app-android | app-ios |
---|---|
? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
兼容APP、H5(主要应用APP)
1.注意事项
加载动画的图片的尺寸要求,宽必须是高的整数倍,类似于一张一张的正方形图拼接成的一张长图(如:http://chuantu.xyz/t6/741/1605679998x2099719707.png)
2.main.js全局注册
import {popUp as wx} from '@/js_sdk/popUp-tips/popUpTips/index.js';
Vue.prototype.$wx = wx('../../static/demo/demo.png')//加载动画的图片地址
3.app.vue引入样式
<style>
@import './js_sdk/popUp-tips/popUpTips/index.scss';
</style>
4.使用方式
事件 | 说明 | 参数 |
---|---|---|
showLoading | 打开加载框 | title:标题 |
hideLoading | 关闭加载框 | 无 |
showToast | 提示框 | title:提示文字;duration:显示时间(默认1500ms); |
5.代码示例
<template>
<view class="content">
<view class="btn" @click="setLoading">加载</view>
<view class="btn" @click="setTitle">提示</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
setLoading(){
this.$wx.showLoading()
setTimeout(() => {
this.$wx.hideLoading()
}, 3000)
},
setTitle(){
this.$wx.showToast({
title : '这是一个提示',
duration : 1500
})
}
}
}
</script>