微信小程序胶囊提示气泡

效果：

<template><viewclass="box"v-if="isShowTip && userInfo.appUserType == 1":style="[{ top: `${navBarInfo.customBarHeight}px` }]"><view class="arrow"></view><view class="body"><view class="textContent">{{ text }}</view><view class="cancle_btn fr_c fj_c" @click="hideTip"><img class="delete-icon" src="@img/delete.png" /></view></view></view>
</template><script>
import { mapState } from "vuex";
import dayjs from "dayjs";export default {name: "NavTip",props: {// 提示文字text: {type: String,value: "点击添加至我的小程序，方便下次使用"},//持续时间durTime: {type: Number,value: 30}},computed: {...mapState("user", {userInfo: s => s}),...mapState("navBar", {navBarInfo: s => s})},data() {return {isShowTip: false,STORAGE_KEY_ONE: "Tip-One"};},mounted() {this.initTips();this.timeOutHide();},methods: {initTips() {//缓存let key = this.STORAGE_KEY_ONE;let isStoreTip = wx.getStorageSync(key);//当前时间let YMDTime = dayjs(new Date()).format("YYYY-MM-DD");let YMDTimeArr = YMDTime.split("-");let yTime = Number(YMDTimeArr[0]);let mTime = Number(YMDTimeArr[1]);let dTime = Number(YMDTimeArr[2]);if (isStoreTip) {//缓存的时间let storeYMDTime = isStoreTip.split("-");let storeyTime = Number(storeYMDTime[0]);let storemTime = Number(storeYMDTime[1]);let storedTime = Number(storeYMDTime[2]);//如果是下一天就把前一天缓存清空if (storeyTime < yTime || storemTime < mTime || storedTime < dTime) {wx.removeStorage(key);wx.setStorage({key,data: YMDTime});this.isShowTip = true;}return;}//没缓存-存一下wx.setStorage({key,data: YMDTime});// 没显示过，则进行展示this.isShowTip = true;},hideTip() {this.isShowTip = false;},//定时30秒后关闭timeOutHide() {setTimeout(() => {this.isShowTip = false;}, this.durTime * 1000);}}
};
</script><style lang="scss" scoped>
.box {position: fixed;top: 0;/* left: 0; */right: 0;z-index: 10000;display: flex;justify-content: flex-end;align-items: flex-end;flex-direction: column;width: 600rpx;
}
.arrow {width: 0;height: 0;margin-right: 120rpx;border-width: 10rpx;border-style: solid;border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
}
.body {background-color: rgba(0, 0, 0, 0.7);/* box-shadow: 0 10rpx 20rpx -10rpx #34b5e2; */border-radius: rpx(5);display: flex;align-items: center;justify-content: center;height: rpx(35);padding: 0 18rpx 0 30rpx;margin-right: 60rpx;
}
.textContent {font-size: rpx(13);font-weight: 500;color: #ffffff;line-height: rpx(18.5);padding: rpx(12) 0;
}.cancle_btn {margin-left: rpx(10);.delete-icon {width: rpx(10);height: rpx(10);}
}
</style>

微信小程序胶囊提示气泡相关推荐

uniapp 微信小程序版本更新提示
uniapp 微信小程序版本更新提示 // app.vue onShow: function() {const updateManager = uni.getUpdateManager();updat ...
微信小程序实现点赞气泡效果
微信小程序实现点赞气泡效果先上代码: <view class="listImg"><block wx:for="{{8}}" wx:key= ...
微信小程序开发提示“获取手机号码失败 ERROR：该appid没有权限”解决方案
关于微信小程序开发提示"获取手机号码失败, ERROR:该appid没有权限"的解决方案一般这种情况的出现都是出现在二次开发上面,原开发人员变动,不在开发该程序.新人在接手这个程 ...
微信小程序自定义提示框制作的简单方法
微信小程序自定义提示框制作的简单方法下面的时候提示框的结构 wxml部分  <view class="showToast" wx:if= ...
uniapp 微信小程序 map自定义气泡customCallout
需求:要在marker的下方展示该站点名称,但默认的气泡是在上方,后查阅微信小程序官方文档发现marker属性有个customCallout可自定义气泡直接上代码 <template>& ...
微信小程序网络请求异常怎么办_微信小程序打开提示“网络异常，请检查网络状态”的解决方法...
症状:打开微信小程序的时候,提示"网络异常,请检查网络状态",无法加载数据. 问题客户端:安卓手机经过测试:IOS和微信桌面版,均正常. 唯独安卓手机不行,如下图所示,这个问题不 ...
未解决的问题记录——微信小程序开发提示：系统错误
前端:uniapp,编译成微信小程序后端:java springboot 数据库:mysq 5.7 事件描述在user表(小程序用户)中,我想试试看如果将当前小程序用户删除,会有什么效果. **效 ...
微信小程序-消息提示框实例
做Android的时候对toast是很熟悉的.微信小程序开发中toast也是重要的消息提示方式. 提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: ...
微信小程序导航栏高度。分析手机状态栏高度、微信小程序胶囊高度等。
//获取系统信息的概念 console.log(uni.getSystemInfoSync()); let res = uni.getSystemInfoSync() //胶囊按钮的信息 consol ...

微信小程序胶囊提示气泡

微信小程序胶囊提示气泡相关推荐

最新文章

热门文章