uniapp插件实现自定义tabbar栏

本文主要是介绍uniapp插件实现自定义tabbar栏，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

注意，先需要下载并引入该插件到HBuilder之中，并在page.json中配置好。

请按照uniapp官方插件在github上的引入教程进行引入

1.在pages文件下新建所需的tabbar栏页面。

• tabbar栏比如home页面样式如下

数据来源于uniapp

<template>
  <scroll-view class="page"
    scroll-y
    :style="{
    display: visible ? 'block' : 'none'
  }">
    <view>我的</view>
    <button @click="handleClick">切换到购物车</button>
    <view v-if="!isGetData">模拟数据加载中...</view>
    <view v-for="item in list"
      :key="item">
      <text>我的页面的第{{item }}条数据</text>
    </view>
  </scroll-view>
</template>

<script>
export default {
  props: {
    visible: Boolean
  },
  data () {
    return {
      list: [],
      isGetData: false
    }
  },
  methods: {
    // 模拟请求数据
    getData () {
      setTimeout(() => {
        for (let i = 0; i < 50; i++) {
          this.list.push(i + 1)
        }
        this.isGetData = true
      }, 1000)
    },
    handleClick () {
      this.$emit('change', 'cart')
    }
  },
  watch: {
    visible: {
      handler (newVal) {
        if (newVal && !this.isGetData) {
          this.getData()
        }
      },
      immediate: true
    }
  }
}

</script>

2.在主页面配置tabbar

样式如下;

<template>
  <view class="content">
    <view class="layout-page">
      <!-- 首页 -->
      <home :visible="active === 'home'"
        :height="height"
        @change="handleTabChange">
      </home>
      <!-- 购物车 -->
      <cart :visible="active === 'cart'"
        :height="height"
        @change="handleTabChange">
      </cart>
      <!-- 消息 -->
      <notice :visible="active === 'notice'"
        :height="height"
        @change="handleTabChange">
      </notice>
      <!-- 我的 -->
      <mine :visible="active === 'mine'"
        :height="height"
        @change="handleTabChange">
      </mine>
    </view>
    <!-- 此处因为不需要点击凸起的发布按钮进行页面变化或跳转，故将v-model="active"修改成:value="active" -->
    <!-- 在handleChange中手动判断进行active的赋值 -->
    <lb-tabbar ref="tabbar"
      :value="active"
			active-color="#f27506"
      :animate="animate"
      @change="handleChange">
      <lb-tabbar-item v-for="item in tabbars"
        :key="item.name"
        :name="item.name"
        :icon="item.icon"
        :dot="item.dot"
        :info="item.info"
        :raisede="item.raisede"
        icon-prefix="iconfont"
        @click="handleTabbarItemClick">
        {{ item.text }}
      </lb-tabbar-item>
    </lb-tabbar>
  </view>
</template>

<script>
import Home from '@/pages/home/home'
import Cart from '@/pages/cart/cart'
import Notice from '@/pages/notice/notice'
import Mine from '@/pages/mine/mine'
export default {
	components: {
		Home,
		Cart,
		Notice,
		Mine
	},
  data () {
    return {
      active: '',
      animate: 'bounce',
      height: '',
      tabbarHeight: '',
      tabbars: [
        {
          name: 'home',
          text: '首页',
          icon: '../../static/home.png',
          dot: true
        },
        {
          name: 'cart',
          text: '购物车',
          icon: '../../static/cart.png'
        },
        {
          name: 'plus',
          text: '发布',
          icon: '../../static/plus.png',
          raisede: true
        },
        {
          name: 'notice',
          text: '消息',
          icon: '../../static/notice.png',
          info: 99
        },
        {
          name: 'mine',
          text: '我的',
          icon: '../../static/mine.png'
        }
      ]
    }
  },
  onl oad (query) {
    // 可通过地址栏传tab参数可指定默认显示哪个tab页面
    this.active = query.tab || 'home'
  },
  onReady () {
    const res = uni.getSystemInfoSync()
    const { windowHeight } = res
    this.tabbarHeight = this.$refs.tabbar.tabbarHeight
    this.height = windowHeight - this.tabbarHeight + 'px'
  },
  methods: {
    handleChange (e) {
      console.log('change::', e)
      if (e.name !== 'plus') {
        this.active = e.name
      }
    },
    handleTabChange (name) {
      this.active = name
    },
    handleTabbarItemClick (e) {
      console.log('click::', e)
			uni.navigateTo({
				url:'../cart/cart'
			})
      if (e.name === 'plus') {
        uni.showToast({
          title: '发布',
          icon: 'none'
        })
      }
    }
  },
  watch: {
    active: {
      handler (newVal) {
        if (newVal) {
          // pages.json中设置页面的title为空，可在此处动态设置标题及颜色等等
          const item = this.tabbars.find(item => item.name === this.active)
          uni.setNavigationBarTitle({
            title: item.text
          })
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  .layout-page {
    min-height: 0;
    flex: 1;
    /deep/ .page {
      height: 100%;
    }
  }
}
</style>

3.以上即可。

这篇关于uniapp插件实现自定义tabbar栏的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！