微信小程序&H5设置全局弹窗
效果图
1、头部公告：
2、弹窗类型公告：
1、下载所需库
npm i vue-inset-loader
2、创建vue.config.js 文件
（在项目根目录下创建）文章来源：https://www.toymoban.com/news/detail-859474.html
const path = require('path')
module.exports = {
configureWebpack: {
module: {
rules: [{
test: /\.vue$/,
use: {
loader: path.resolve(__dirname, "./node_modules/vue-inset-loader")
},
}]
},
}
}
3、创建全局公告组件
我这里的组件文件名就给他设置为global-notice文章来源地址https://www.toymoban.com/news/detail-859474.html
<!-- 全局公告 -->
<template>
<view class="global-notice" ref="globalNotice">
<!-- 头部式公告栏-->
<notice-bar v-if="displayType == 1" ref="noticeBar" :noticeContent="noticeContent"
@notRemind="notRemind"></notice-bar>
<!-- 弹窗式公告 -->
<notice-pop v-else="displayType == 2" ref="noticePop" :noticeContent="noticeContent"
@notRemind="notRemind"></notice-pop>
</view>
</template>
<script>
export default {
name: "global-notice",
data() {
return {
noticeContent: '', // 公告内容
displayType: '', // 公告类型: 1头部公告栏，2开屏公告
noticeNo: '', // 当前公告编号
}
},
methods: {
getNoticeInfo() {
// 这里替换成你们自己的请求接口，根据后台配置的公告类型来展示对应公告
// 我就不把我的接口请求写上了，这样你们复制过去直接可以展示效果
let _this = this;
_this.noticeNo = '123456';
let remindNo = uni.getStorageSync('DontRemind'); // 我这里有做不在提醒功能。
if (_this.noticeNo != remindNo) {
_this.noticeContent = '这是你们要显示的公告内容了，写长一点效果更好';
// 展示的公告类型，修改这里可以看不同的公告样式
_this.displayType = '2';
if (_this.displayType == 2) {
_this.openNoticePop();
}
}
},
// 设置不再提醒
notRemind() {
uni.setStorageSync('DontRemind', this.noticeNo);
},
// 打开公告弹窗
到了这里，关于微信小程序&H5设置全局弹窗的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
