解决小程序自定义底部菜单切换闪动

解决小程序自定义底部菜单切换闪动

业务上可能会有一个需求使用自定义底部菜单相信会有很多人遇到过这个需求

但是自定义底部菜单会有一个问题，在点击切换页面的时候底部菜单会重新加载，导致页面闪动，比较影响用户的体验性；

我采用的解决办法是建立一个公共的页面，所有底部菜单的对应页面采用组件的方法，这样可以解决底部菜单切换时闪动的问题；

我用的是uni开发的代码上可能与原生小程序有所差异，整体思路其实是一样的

头部我用的是自定义的头部，适配了不同机型（可能会有偏差）

接下来开始吧

1.新建一个indexRouter.vue的页面

<template><view style="position: relative;" :class="nowchos==1?'bg_index_top':''"><home ref='home' v-if="nowchos == 1"></home><curriculum v-if="nowchos == 2"></curriculum><business v-if="nowchos == 3"></business><circle v-if="nowchos == 4"></circle><mine ref='mine' v-if="nowchos == 5"></mine><view class="bottomboxs">//底部组件<navbottom :nowchos='nowchos' @botomchos='botomchos'></navbottom></view></view>
</template><script>import navbottom from '@/components/navbottom.vue'//引入 底部菜单组件import home from './index/index.vue'// 引入 首页import business from './business.vue'// 同上 引入相关页面import circle from './circle.vue'// 同上 引入相关页面import mine from './mine.vue'// 同上 引入相关页面import curriculum from './curriculum.vue'// 同上 引入相关页面export default {components: {//在这里注册相应的组件home,business,circle,mine,curriculum,navbottom},data() {return {nowchos: 1, //当前选择了那个底部菜单navtit: '页面标题',full: false, //是否全面屏bigscroll: false, //是否固定头部}},watch: {nowchos(e) {console.log(e);//可以监听 底部菜单的切换}},onPullDownRefresh() {//监听页面刷新 可以实现刷新重新请求组件里的接口重新渲染if(this.nowchos == 1){this.$refs.home.getlist()setTimeout(()=>{uni.stopPullDownRefresh()},500)}else if(this.nowchos == 2){}else if(this.nowchos == 3){}else if(this.nowchos == 5){}},onLoad(e) {let that = this;//判断是否是全面屏uni.getSystemInfo({success: function(res) {if (res.model.search(/iPhone\sX|iPhone\s11|iPhone\s12|iPhone\s13/) != -1) {that.full = true} else {that.full = false}}});},onPageScroll(e) {//如果高度超过多少 固定住自定义头部if (e.scrollTop > 60)this.bigscroll = trueelsethis.bigscroll = false},methods: {botomchos(e) {this.nowchos = eif (e == 1) {this.navtit = '我是菜单1'} else if (e == 2) {this.navtit = '我是菜单2'} else if (e == 3) {this.navtit = '我是菜单3'} else if (e == 4) {this.navtit = '我是菜单4'} else if (e == 5) {this.navtit = '我是菜单5'}}}}
</script><style lang="scss">.bg_index {position: absolute;top: 0;left: 0;width: 580rpx;height: 474rpx;background: rgba(172, 126, 255, 0.1);filter: blur(50rpx);}.bg_index_top{background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 13%, #F0F0F0 50%, #F7F7F7 100%);}.headerfix {position: fixed !important;top: 0;left: 0;background-color: #FFFFFF;z-index: 3 !important;.title {color: #000000 !important;}}.fullcss {padding-top: 100rpx !important;}.headerBox {width: 100vw;position: relative;box-sizing: border-box;padding: 60rpx 30rpx 20rpx;transition: 500ms all;z-index: 2;.title {position: absolute;left: 50%;font-size: 16px;font-weight: 500;color: #000000;transform: translate(-50%, 0%);}}.bottomboxs{position: relative;z-index: 99;}
</style>

2.新建一个底部组件navbottom.vue

<template><view class=""><view class="flexcenter navmainbox" :style="full?'height:130rpx;padding-bottom:30rpx;z-index:100;':''"><view v-for="(item,index) in list[0]" :key="index"class="navcont" @click="gonavs(item,index)"><image style="width: 52rpx;height: 52rpx;" :src="nowchos==(index+1)?item.chosicon:item.icon" ></image><view :class="nowchos==(index+1)?'navchosboxb':''">{{item.name}}</view></view></view>//防止 固定的底部菜单遮挡页面上的内容<view class="navmainbox" style="position: relative;opacity: 0;z-index: 0;" :style="full?'height:130rpx':''"></view></view>
</template><script>export default {name: 'navbottom',data() {return {full:false,//是否全面屏list: [[{name: '首页',//底部菜单展示文件icon: "/static/business/home.png",//底部菜单未激活时的图标chosicon: '/static/business/homes.png',//激活的图标//path: "/pages_business/index/index"//需要跳转的路径（不需要加）},{name: '页面',icon: '/static/business/class.png',chosicon: '/static/business/classs.png',//path: '/pages_business/curriculum'},{name: '页面',icon: '/static/business/business.png',chosicon: '/static/business/businesss.png',//path: '/pages_business/business'},{name: '页面',icon: '/static/business/chat.png',chosicon: '/static/business/chats.png',//path: '/pages_business/circle'},{name: '我的',icon: '/static/business/mine.png',chosicon: '/static/business/mines.png',//path: '/pages_business/mine'}]],//底部菜单数组}},props: {nowchos: {//接收当前激活的底部的下标type: Number,default: 1}},mounted() {let that = this;that.$nextTick(() => {//判断是否是全面屏 uni.getSystemInfo({success: function (res) {if (res.model.search(/iPhone\sX|iPhone\s11|iPhone\s12|iPhone\s13/) != -1) {that.full = true} else {that.full = false}}});})},methods: {gonavs(e,cindex) {if(index==1){//告诉父级要跳转去哪this.$emit('botomchos',cindex+1)}}}}
</script><style lang="less" scoped>view{box-sizing: border-box;}.navmainbox {position: fixed;bottom: 0;left: 0;width: 100vw;height: 112rpx;background-color: #FFFFFF;border-top: 1rpx solid #ebebeb;box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);font-size: 24rpx;padding: 14rpx 0 10rpx;z-index: 5;.navcont {width: 25%;color: #B0B0B0;text-align: center;}}.navchosbox {color: #F56C6C!important;}.navchosboxb{color: #0059FF!important;}.flexcenter{display: flex;justify-content: center;align-items: center;}
</style>

如果有遗漏或者有改善的地方可以指出

解决小程序自定义底部菜单切换闪动相关推荐

html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
小程序自定义底部菜单栏
问题:小程序的底部菜单栏基本的样式根本不能满足我们的审美要求,所以我们可以通过自己来自定义一套小程序底部栏,可以设置透明背景哟,想要什么样式都可以自己定义,好了,废话不多说,直接上代码! 首先在和pa ...
微信小程序——自定义顶部菜单navigationBar方式（可详细了！）
前言: 开发中,设计师也是奇思妙想,把小程序顶部的默认菜单改成了自己觉得好看的样式,改了返回icon的样式,加了各种返回首页.收藏.什么鬼的按钮,甚至把胶囊按钮都给改了~~~,好吧,遵从设计师的审美, ...
解决小程序自定义导航栏和右边胶囊高度一致
名词解释: 1.statusBarHeight:状态栏高度(小程序可获取),是指顶部显示手机信号,时间,电量的那一个小的状态条的高度.如图红色部分. 2.titleBarHeight:标题栏高度(小程 ...
解决小程序自定义弹窗滚动穿透问题
在小程序页面里有自定义弹窗时候,希望弹框里的scroll-view可以动,底部背景页面不要动方法一.catchtouchmove="true" 可以实现弹框背景不滚动,但是也会导 ...
小程序自定义底部导航 custom-tab-bar
前言: 在开发小程序过程中,如果你需要根据不同用户角色显示不同底部导航:或者导航样式需要个性化设计.此时就需要用到自定义底部导航 custom-tab-bar. 具体操作: 1.根目录下创建custo ...
微信小程序自定义底部栏凸起效果+自定义扫码详细介绍
项目结构: 主页面图: 扫码界面: 使用步骤如下: - **第一步**:找到项目中的tabbarComponent目录,拷贝到你的工程中,然后将tabbarComponent->icon图标替 ...
禾匠小程序前端底部菜单DIY后不见了？
禾匠小程序前端diy内容中,并没有底部菜单这个设置,有些人又轻飘飘的去设置了标签,结果前台菜单不见了,对此我只能说 . . . . . . . 哈哈哈哈哈哈哈哈哈哈哈哈哈哈不动标签能行吗?不要这么手 ...

解决小程序自定义底部菜单切换闪动

解决小程序自定义底部菜单切换闪动相关推荐

最新文章

热门文章