标签：uniapp 插件 name .. text cart item home 自定义

注意，先需要下载并引入该插件到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,插件,name,..,text,cart,item,home,自定义
来源： https://blog.csdn.net/CHENC0518/article/details/122852046

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。