微信小程序黑色背景页面跳转闪屏

当微信小程序使用黑色背景，页面跳转时会出现闪屏现象。在微信开发工具中没有出现此问题，但是在真机测试中苹果显示正常，安卓会出现页面闪屏现象。

在微信小程序论坛中，也有很多人反映，但是官方至今也未解决。有人推测可能是和安卓底层渲染有关。

但是不能直接重新更改UI，因此想出一个折中办法。

思路：

1 做一个白色背景遮罩

2 然后页面加载时加载动画使该遮罩透明度变为0

效果如下：

预览图

wxss

.mask{background: #e7c8b8;position: fixed;width: 100%;height: 100vh;opacity: 1;z-index: 2000;
}

wxml

<view class="mask" animation="{{animation}}" hidden="{{ismask}}">
</view>


onShow(){this.maskAnima();   //动画完成后将遮罩层隐藏setTimeout(() => {this.setData({ismask:true,})    }, 1000);},//遮罩层动画maskAnima(){var animation = wx.createAnimation({duration: 1000,timingFunction: 'ease-out',});animation.opacity(0).step()this.setData({animation:  animation.export()})}

微信小程序黑色背景页面跳转闪屏相关推荐

uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
微信小程序开发-页面跳转传递参数
微信小程序开发-页面跳转传递参数页面跳转有四种方式,分别为wx.navigateTo.wx.redirectTo.wx.reLaunch.wx.switchTab,前面三种可通过url路径携带参数实 ...
微信小程序--简单页面跳转
微信小程序--简单页面跳转例如:点击一个text ,跳转入一个新的页面blueberry.wxml 首先对text 设置监听事件 <view bindtap="toast" ...
微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
微信小程序开发系列七：微信小程序的页面跳转
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法微信小程序开发系列四:微信小程序 ...
微信小程序：页面跳转时传递数据到另一个页面
一.功能描述页面跳转时,同时把当前页面的数据传递给跳转的目标页面,并在跳转后的目标页面进行展示二.功能实现 1. 代码实现 test1页面 // pages/test1/test1.js Page ...
参数携带跳转_微信小程序：页面跳转及参数传递
本文首发自个人自有博客:[FaxMiao个人博客],一个关注Web前端开发技术.关注用户体验.记录前端点滴,坚持更多原创,为大家提供高质量技术博文! 前言小程序的跳转方法有很多种,有的人一直只用wx ...
微信小程序开发-页面跳转的几种方式
最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:"保留当前页面,跳转到应用内的某个 ...
解决uniapp微信小程序v-if（v-else）闪屏现象
项目场景: 在页面中使用 v-if 和 v-else 来根据数据的total来判断是渲染数据还是显示暂无, 问题描述进入页面会出现闪屏现象,先显示暂无数据的图片,再渲染数据列表. 解决方案: 首先, ...
微信小程序中页面跳转时要始终返回首页的问题
首先,要先说一下项目的需求,我要实现的功能是在首页有一个按钮可以跳转到一个展示的页面,这个展示的页面上下两个部分,上边的部分是可以切换学科种类的,下面的部分可以展示这个学科下的所有科目,上面切换的部 ...

微信小程序黑色背景页面跳转闪屏

微信小程序黑色背景页面跳转闪屏相关推荐

最新文章

热门文章

微信小程序 黑色背景 页面跳转闪屏

微信小程序 黑色背景 页面跳转闪屏相关推荐

最新文章

热门文章

微信小程序黑色背景页面跳转闪屏

微信小程序黑色背景页面跳转闪屏相关推荐