鸡汤来咯开发学习笔记-9

1.使用扩展插件uni-popup弹出层，引入写入index.vue中

<uni-popup ref="usePopup" type="center" @maskClick="closeUsePopup">// 建立弹出事件
        <view class="usePopup">
            <image src="../../static/images/upward.png" mode="heightFix" @click="closeUsePopup"></image>
        </view>

2.写入弹出层的css样式

usePopup{
 padding-top: 15vh;
 
 image{
     height: 150rpx;
     transform: translateY(100rpx); //位移
     opacity: 0; //透明度
     animation: useanimate 1.5s infinite; //引入动画，写入1.5s循环
 }
}
@keyframes useanimate {     //动画
0%{
    transform: translateY(100rpx);
    opacity: 0;
}
100%{
    transform: translateY(-100rpx);
    opacity: 1;
}
 }

3.写入事件

import{onReady} from "@dcloudio/uni-app"
onReady(()=>{

let useState=uni.getStorageSync("useState") || false;  
if(!useState) usePopup.value.open();
//判断是否存在缓存数值，然后是否打开遮罩

})
//点击操作的遮罩层
const closeUsePopup =()=>{
usePopup.value.close();  //点击后关闭
uni.setStorageSync("useState",true);  //设置一个缓存数值

}