微信小程序动态导航栏tabbar

Question

有没有人知道这种样式的小程序导航栏怎么做出来？导入了sky-lineUI组件库，总是缺一些东西，报错解决不了，有没有实践者可以出来讨论一下吗？非常感谢

Answer 1

引自免费微信小程序：皆我百晓生

要实现一个具有动态导航栏（TabBar）的微信小程序，你需要使用sky-lineUI库。首先确保已经安装了这个库。如果你还没有安装，可以通过npm或yarn进行安装。

npm install sky-line-ui
# 或者
yarn add sky-line-ui

接下来，我们将创建一个简单的示例来展示如何在App.vue文件中添加动态导航栏。在这个例子中，我们将在顶部添加一个静态的导航条，并在其下方添加一个动态的滚动菜单。

第一步：创建项目

首先，我们需要创建一个新的Vue.js项目。你可以选择任何文本编辑器，然后运行以下命令创建一个基本的Vue.js应用：

vue create my-vue-app
cd my-vue-app

这将创建一个名为my-vue-app的新目录，其中包含基础的Vue.js项目结构。

第二步：安装sky-line-ui

在项目中安装sky-line-ui库：

npm install sky-line-ui --save
# 或者
yarn add sky-line-ui

第三步：创建App.vue文件

在src/components/App/App.vue文件中编写代码，添加一个动态的导航栏：

<template>
  <div class="app">
    <!-- 静态导航栏 -->
    <nav-bar class="static-nav-bar" :items="navbarItems"></nav-bar>

    <!-- 动态滚动菜单 -->
    <scroll-view scroll-y class="dynamic-scroll" :data="scrollData"></scroll-view>
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'
import ScrollView from './components/ScrollView.vue'

export default {
  components: {
    NavBar,
    ScrollView
  },
  data() {
    return {
      navbarItems: [
        { label: '首页', path: '/' },
        { label: '消息', path: '/message' },
        { label: '历史', path: '/history' },
        { label: '个人', path: '/personal' }
      ],
      scrollData: [
        { index: 0, label: '首页', path: '/', icon: 'home' },
        { index: 1, label: '消息', path: '/message', icon: 'bell' },
        { index: 2, label: '历史', path: '/history', icon: 'history' },
        { index: 3, label: '个人', path: '/personal', icon: 'person' }
      ]
    }
  }
}
</script>

第四步：创建NavBar、ScrollView和相关组件

• NavBar.vue:

  <template>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <router-link :to="item.path">{{ item.label }}</router-link>
        <span @click="changeIcon(index)" class="icon">{{ item.icon }}</span>
      </li>
    </ul>
  </template>
  
  <script>
  export default {
    props: ['items'],
    methods: {
      changeIcon(index) {
        // 点击图标改变当前页面路径
        this.$emit('change-icon', index);
      }
    }
  }
  </script>
  

• ScrollView.vue:

  <template>
    <view class="scroll-container">
      <list-item v-for="(item, index) in listItems" :key="index" :title="item.title" :desc="item.desc" @click="handleClick(item)">
        {{ item.title }}
      </list-item>
    </view>
  </template>
  
  <script>
  import ListItem from '@/components/ListItem.vue';
  
  export default {
    components: {
      ListItem
    },
    data() {
      return {
        listItems: [
          { title: 'Item 1', desc: 'Description 1' },
          { title: 'Item 2', desc: 'Description 2' },
          { title: 'Item 3', desc: 'Description 3' }
        ]
      };
    },
    methods: {
      handleClick(item) {
        // 在这里处理点击事件，例如跳转到新的页面或显示弹窗
        console.log(`Clicked on ${item.title}`);
      }
    }
  }
  </script>
  

第五步：编译并启动应用程序

保存所有更改后，在终端中运行以下命令以启动应用程序：

vue serve src/

现在你应该能看到一个简单的微信小程序导航栏界面。你可以通过修改navbarItems数组中的元素来调整导航栏的布局。

如果你遇到任何具体的问题或错误，随时告诉我，我会尽力帮助你解决。