孙肖宁

微信小程序的开屏动画
微信小程序本身是没有开屏的,所以我们通过我们自己的逻辑制作一个自己的开屏,需求就是,当用户打开小程序的时候我们会先...
扫描右侧二维码阅读全文
02
2019/10

微信小程序的开屏动画

微信小程序本身是没有开屏的,所以我们通过我们自己的逻辑制作一个自己的开屏,需求就是,当用户打开小程序的时候我们会先显示一个开屏,然后开屏自动关闭。如果进入的不是首页那么我们的开屏就不展示。并且还要使用各种手机的屏幕。
我们的开屏其实是显示的一张大图片,我们让宽度等于屏幕的宽度,高度通过图片的宽高比计算出来,在图片外面加一个view,这个view的背景色和图片的背景色一样这样就可以适应不同的屏幕了。
首先我们先来写下样式

 <!-- 开屏 -->
    <view wx:if='{{kaiping}}' style=' position: fixed;top: 0;left: 0;display: flex;flex-direction: row;justify-content: center;align-items: center;width: 100%;height: 100vh;z-index: 99999999;background:#a00b0a;'>
        <view style='position: fixed;'>
            <image src="../../kaiping.png" style='width:{{width}}px;height:{{width*1.51}}px' />
        </view>
    </view>

然后在我们的js里面写下逻辑:
在data里面设置:kaiping: false
在onload里面把kaiping: true

that.setData({
     kaiping: true
})

在onshow里面写一个定时器关闭开屏

if (that.data.kaiping) {
        setTimeout(function() {
             that.setData({
             kaiping: false
        })
     }, 4000);
}
Last modification:October 2nd, 2019 at 11:14 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment