vue项目 - uniapp 弹窗设置间隔时间 进入页面自动显示
需求:首次进入首页出现弹窗,设置多久后再次显示时间(比如 24 小时) 则·在这个时间段内不会再显示弹窗,24小时之后,再次进入,则弹出弹窗显示:代码:弹窗样式组件<home-Pop-Up:ad="PopUpAd"传值弹窗内数据:showFullAd="show['popUp']"设置true 或者 false@close="close" 传值点击关闭事件></home-Pop-
·
需求:
首次进入首页出现弹窗,设置多久后再次显示时间(比如 24 小时) 则·在这个时间段内不会再显示弹窗,24小时之后,再次进入,则弹出弹窗
显示:
代码:
弹窗样式组件
<home-Pop-Up
:ad="PopUpAd" 传值弹窗内数据
:showFullAd="show['popUp']" 设置true 或者 false
@close="close" 传值点击关闭事件
></home-Pop-Up>
data() {
return {
show: {
popUp: false, //设置初始值不显示
},
}
},
methods: {
close(name) {
console.log("case", name);
if (name === "popUp") {
this.checkHomePopup();
}
},
checkHomePopup() {
// console.log("再次进去,case");
uni.getStorage({
key: "popUp-show-time",
success: (res) => {
// console.log("case 第二次进入,checkHomePopup有");
// 24小时超时
if (
!res.data ||
new Date().getTime() - res.data > 1000 * 60 * 60 * 24
) {
uni.setStorage({
key: "popUp-show-time",
data: new Date().getTime(),
});
// console.log("case 二次进入,超时,checkHomePopup");
this.show.popUp = true;
} else {
console.log("case er else");
}
},
fail: (err) => {
// console.log("case 创建。fail");
uni.setStorage({
key: "popUp-show-time",
data: new Date().getTime(),
});
},
});
},
openPopAd() {
this.show.popUp = true;
uni.setStorage({
key: "popUp-show-time",
data: new Date().getTime(),
});
// console.log("case 本地无,或超时重新创建");
},
getPopUp() {
uni.getStorage({
key: "popUp-show-time",
success: (res) => {
// 24小时超时
if (
!res.data ||
new Date().getTime() - res.data > 1000 * 60 * 60 * 24
) {
// console.log("刚进入,本地有,且超时", "case");
this.show.popUp = true;
this.openPopAd();
} else {
// console.log("刚进入,时间没到", "case");
this.checkHomePopup();
}
},
fail: (err) => {
// console.log("刚进入,本地无", "case");
this.openPopAd();
},
});
},
},
mounted() {
this.getPopUp();
},
弹窗组件内部的设置
<ta-modal :value="showPopUp" :type="'custom'">
<slot>
<div>弹窗样式</div>
<button class="close" @tap.stop="closePopUp">关闭弹窗</button>
</slot>
</ta-modal>
props: {
ad: {
type: Object,
default() {
return {};
},
},
showFullAd: {
type: Boolean,
default: false,
}
},
data() {
return {
showPopUp: false,
};
},
methods: {
closePopUp() {
this.showPopUp = false;
this.$emit("close","popUp");
//弹窗组件内部 接收 close
},
},
watch: {
showFullAd() {
this.showPopUp = this.showFullAd;
},
},
更多推荐
已为社区贡献13条内容
所有评论(0)