uniapp 微信小程序 自定义tabBar 导航


Posted in Javascript onApril 22, 2022

需求

分包中如果有6个页面A B C D E F,这6个页面可以作为tabbar页面进行展示,具体配置通过后台接口返回(页面数量限制依然存在 2 - 5),比如后台配置A B C D E这个5个页面为tabbar页面,那么A B C D E将作为tab页展示,跳转方式也是tab方式跳转,跳转到F页面为普通navigate跳转。
这将解决 多商家底部tab配置问题,可以让商家自己配置小程序tab页的展示模式。

实现原理

1.自定义底部导航,数据通过接口获取

2.将需要配置成tab的页面内容抽离成为组件,对应页面直接引用组件,tab页面引用全部组件,并根据当前tab页对应的组件页面路径分别展示。

3.解决组件的生命周期问题。

实现

页面整体结构

uniapp 微信小程序 自定义tabBar 导航

pages.json页面配置好5个tabbar模板页面,并且使用了easycom模式,自动加载组件

"easycom": {
    "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
    "^sww-(.*)": "@/components/sww-$1/sww-$1.vue"
  },
"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index"
      },
      {
        "pagePath": "pages/module-page-one/index"
      },
      {
        "pagePath": "pages/module-page-two/index"
      },
      {
        "pagePath": "pages/module-page-three/index"
      },
      {
        "pagePath": "pages/module-page-four/index"
      }
    ]
  }

自定义tabbar使用的uview组件

//sww-tab-bar
<template>
  <u-tabbar v-model="current" :list="vuex_tab_bar.list" :active-color="vuex_tab_bar.activeColor"
            :inactive-color="vuex_tab_bar.inactiveColor"
            @change="onChange"></u-tabbar>
</template>
<script>
import {mapState} from 'vuex'
import {uniLinkTo} from "../../utils/uniPromise";

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['vuex_tab_bar', 'vuex_tab_page']),
    current: {
      get(){
        return this.$store.state.vuex_tab_bar.current
      },
      set(value){
        this.$store.commit('$uStore',{name: 'vuex_tab_bar.current', value})
      }
    }
  },
  methods: {
    onChange(index) {
      uniLinkTo(this.vuex_tab_page[index], 'tab')
    }
  }
}
</script>
<style lang="scss" scoped>
	::v-deep .u-fixed-placeholder {
		opacity: 0;
	}
</style>

vuex中保存的tabbar数据格式

vuex_tab_bar: {
            list: [],
            activeColor: '',
            inactiveColor: '',
            current: 0
        },
vuex_tab_bar_default: { //接口未获取到数据时使用的默认tabbar
            list: [
                {
                    iconPath: '/static/tab/home.png',
                    selectedIconPath: '/static/tab/home_fill.png',
                    text: '首页',
                    url: '/package/index/index'
                },
                {
                    iconPath: '/static/tab/cat.png',
                    selectedIconPath: '/static/tab/cat_fill.png',
                    text: '分类',
                    url: '/package/product/category/index'
                },
                {
                    iconPath: '/static/tab/community.png',
                    selectedIconPath: '/static/tab/community_fill.png',
                    text: '链圈',
                    url: '/package/index/circle/index'
                },
                {
                    iconPath: '/static/tab/cart.png',
                    selectedIconPath: '/static/tab/cart_fill.png',
                    text: '购物车',
                    // url: '/package/user/order/index'
                    url: '/package/user/cart/index'
                },
                {
                    iconPath: '/static/tab/user.png',
                    selectedIconPath: '/static/tab/user_fill.png',
                    text: '我的',
                    url: '/package/user/index'
                }
            ],
            activeColor: '#e93324',
            inactiveColor: '#666666',
            current: 0
        },

上面的步骤已经完成了自定义底部tabbar,接下来是tab页面中使用组件的方式和tabbar数据的获取

//这里的代码是5个模板tab页面的内容,页面引入了所有可配置成为tab的组件,js部分抽离到mixins中进行代码复用
<template>
  <view class="index-box">
    <block v-if="pageModuleName('/package/index/index')">
      <sww-page-home ref="modulePageRef"></sww-page-home>
    </block>
    <block v-if="pageModuleName('/package/product/category/index')">
      <sww-page-category ref="modulePageRef"></sww-page-category>
    </block>
    <block v-if="pageModuleName('/package/index/circle/index')">
      <sww-page-circle ref="modulePageRef"></sww-page-circle>
    </block>
    <block v-if="pageModuleName('/package/user/cart/index')">
      <sww-page-cart ref="modulePageRef"></sww-page-cart>
    </block>
    <block v-if="pageModuleName('/package/user/index')">
      <sww-page-user ref="modulePageRef"></sww-page-user>
    </block>
    <block v-if="pageModuleName('/package/user/order/index')">
      <sww-page-order ref="modulePageRef"></sww-page-order>
    </block>
    <sww-tab-bar ref="tabBarRef"></sww-tab-bar>
    <sww-login></sww-login>
  </view>
</template>
<script>
import {tabPage} from "../../mixins/tabPage";

export default {
  mixins: [tabPage],
  data() {
    return {
      tabIndex: 4
    }
  }
}
</script>
<style>
page {
  width: 100%;
  height: 100%;
}
.index-box {
  width: 100%;
  height: 100%;
}
</style>
// tabPagemixins
import {mapState} from 'vuex'
const App = getApp()

export const tabPage = {
    computed: {
        ...mapState(['vuex_tab_bar', 'vuex_module_page']),
        //获取当前tab页要显示的页面组件
        pageModuleName(name) {
            return (name) => {
                if (this.vuex_tab_bar.list.length > 0) {
                	//这里的url是后台用户配置的页面路径,此路径是分包中实际存在的页面路径,比如A页面要配置成为tab,那么就将A页面内容抽离成组件,后台配置此页面为tab,只需将A页面的实际路径进行配置即可
                    return this.vuex_tab_bar.list[this.tabIndex].url === name
                } else {
                    return false
                }
            }
        }
    },
    onLoad: function () {
        this.$nextTick(() => {
            try {
                if (this.vuex_tab_bar.list.length === 0) {
                   App.loadTabBarList().then(() => {
                       this.$refs.modulePageRef.$onLoad()
                   })
                } else {
                    this.$refs.modulePageRef.$onLoad()
                }
            } catch (e) {

            }
        })
    },
    // isoH5在onshow时要重置分享
    onShow: function () {
        this.$nextTick(() => {
            try {
                this.$refs.modulePageRef.$onShow()
            } catch (e) {

            }
        })
    },
    onHide: function () {
        this.$nextTick(() => {
            try {
                this.$refs.modulePageRef.$onHide()
            } catch (e) {

            }
        })
    },
    onPullDownRefresh: function () {
        try {
            this.$refs.modulePageRef.$onPullDownRefresh()
        } catch (e) {

        }
    },
    onReachBottom: function () {
        try {
            this.$refs.modulePageRef.$onReachBottom()
        } catch (e) {

        }
    },
    // 微信小程序分享(好友)
    onShareAppMessage: function () {
        return this.$refs.modulePageRef.getShareAppMessage()
    },
    // 微信小程序分享(朋友圈)
    onShareTimeline: function () {
        return this.$refs.modulePageRef.getShareTimeline()
    }
}

总结

到此这篇关于uniapp微信小程序底部动态tabBar的文章就介绍到这了!


Tags in this post...

Javascript 相关文章推荐
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
vue修饰符.capture和.self的区别
Apr 22 #Vue.js
vue 自定义组件添加原生事件
Apr 21 #Vue.js
vue 自定义的组件绑定点击事件
Apr 21 #Vue.js
微信小程序 WeUI扩展组件库的入门教程
vue组件vue-esign实现电子签名
Apr 21 #Vue.js
微信小程序 根据不同用户切换不同TabBar
Apr 21 #Javascript
vue动态绑定style样式
Apr 20 #Vue.js
You might like
一个PHP数组应该有多大的分析
2009/07/30 PHP
PHP取进制余数函数代码
2012/01/19 PHP
php模板函数 正则实现代码
2012/10/15 PHP
php中session使用示例
2014/03/29 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
js实现内置计时器
2019/12/16 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
python中正则表达式的使用详解
2014/10/17 Python
python 基础教程之Map使用方法
2017/01/17 Python
如何利用python查找电脑文件
2018/04/27 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
Django用户身份验证完成示例代码
2020/04/03 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
社区学雷锋活动策划方案
2014/01/30 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
小英雄雨来观后感
2015/06/09 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript