DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/demo/component/nav.vue

<template>
  <view>
    <view class="bg-grey padding margin text-center">当前页面索引号:{{ tab }}</view>

    <l-title>默认页签：</l-title>
    <l-nav v-model="tab" :items="['首页', '收藏', '发现', '我的']" />
    <l-demo-description>
      页签使用 l-nav 标签，给 item 属性绑定一个数组参数作为页签项；
      使用 v-model 属性绑定当前选中的页签索引
    </l-demo-description>

    <l-title>标签居中：</l-title>
    <l-nav v-model="tab" :items="['首页', '收藏', '发现', '我的']" type="center" />
    <l-demo-description>
      添加 type="center" 即可使用居中标签
    </l-demo-description>

    <l-title>标签平均排布：</l-title>
    <l-nav v-model="tab" :items="['首页', '收藏', '发现', '我的']" type="flex" />
    <l-demo-description>
      添加 type="flex" 即可使用平均排布的标签
    </l-demo-description>

    <l-title>标签背景色：</l-title>
    <l-nav v-model="tab" :items="['首页', '收藏', '发现', '我的']" color="blue" />
    <l-demo-description>
      添加 color 属性来设置背景色
    </l-demo-description>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tab: 0
    }
  }
}
</script>