MENU

(初次尝试)解决小程序底部导航跳转时闪烁的问题

• August 28, 2019 • 微信小程序

  相信有很多朋友尤其是强迫症的朋友都有一个痛点,那就是微信小程序的自定义底部tabbar切换闪烁的问题。

  虽说微信官方开放了自定义tabbar的api,但是还是不能像微信原生的tabbar那样流畅,自定义的在切换页面的时候会有那么一瞬间闪烁,尤其在页面组件多的时候尤为明显。

  我作为一个初学者,尝试了一下使用include加载页面布局,目前效果还不错!

  其实方法很简单,如上图底部tabbar为5个,通常需要创建5个页面,现在的方法是,只创建一个页面作为载体,然后通过include分别按需载入其他几个wxml页面文件,比如点击首页,则include首页的wxml文件,这样做到了切换的效果,又可以避免底部tabbar切换时闪烁的问题了。

  • 弊端

  这么做虽说解决了底部tabbar闪烁的问题,但是css的样式只能写在创建的页面载体的wxss文件里或者单独创建一个wxss文件,然后载体页面wxss再import。

  js代码也只能写在载体页面的js文件里或者单独创建js文件再引入,本人菜鸟目前还在摸索阶段,如果大家有更好的解决办法,请留言给我哈!!!

  • 源码

  代码没有加备注,有空再完善,大家凑合看

  腾讯代码托管:https://dev.tencent.com/u/LoveEmpathy/p/custom-tabbar/git

  • 鸣谢

  源码界面中使用到了最好看的小程序UI之一的ColorUI,欢迎大家去看看!!!

  github:https://github.com/weilanwl/ColorUI

  官网:https://www.color-ui.com

Last Modified: December 28, 2019