uni-tab-bar、uni-list，解释这两个组件含义和使用方法。并举例子

uni-tab-bar 是一个底部选项卡组件，可以让用户在不同的页面之间进行切换。使用方法是在页面的 template 中引入该组件，然后在 script 中配置选项卡的样式和每个选项卡对应的页面路径。用户点击选项卡时，会自动跳转到对应的页面。以下是一个示例代码：

<template>
  <view>
    <uni-tab-bar :tab-list="tabList" :current="current" @change="onChange"></uni-tab-bar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        current: 0,
        tabList: [
          {
            iconPath: "/static/home.png",
            selectedIconPath: "/static/home-active.png",
            text: "首页",
            pagePath: "/pages/home/home"
          },
          {
            iconPath: "/static/user.png",
            selectedIconPath: "/static/user-active.png",
            text: "个人中心",
            pagePath: "/pages/user/user"
          }
        ]
      }
    },
    methods: {
      onChange(event) {
        this.current = event.currentTarget.dataset.index
        uni.switchTab({
          url: this.tabList[this.current].pagePath
        })
      }
    }
  }
</script>

uni-list 是一个列表组件，可以用来展示一组数据。使用方法是在页面的 template 中引入该组件，然后在 script 中配置列表的数据来源和每个列表项的样式。以下是一个示例代码：

<template>
  <view>
    <uni-list>
      <uni-list-item v-for="(item, index) in list" :key="index" :title="item.title" :note="item.note"></uni-list-item>
    </uni-list>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {
            title: "标题1",
            note: "描述1"
          },
          {
            title: "标题2",
            note: "描述2"
          }
        ]
      }
    }
  }
</script>