更新记录
1.0.0(2020-11-18) 下载此版本
本次更新:
1.自定义加载动画弹窗,可以自定义动画 2.自定义提示弹,去掉了uni自带的黑色弹窗
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
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>