coolui-scroller

Appearance

当前文档uni-app 版coolui-scroller-uni 改用 原生微信小程序版 →

Nav 分类导航组件 ​

<coolui-scroller-nav> 是分类导航（横向滚动 + 选中态），常放在 coolui-scroller 的 header 插槽里，与 nav-pannel 联动切换内容。

对应原生微信小程序版：Nav 分类导航组件

代码演示 ​

vue
<template>
  <coolui-scroller :isEmpty="isEmpty" @refresh="refresh" @loadmore="loadmore">
    <template #header>
      <coolui-scroller-nav
        :list="navList"
        :type="type"
        :navPerView="navPerView"
        :spaceBetween="spaceBetween"
        :border="border"
        :text="textStyle"
        :background="backgroundStyle"
        v-model:active="active"
        @change="onChange"
      />
    </template>

    <view class="item" v-for="(item, index) in list" :key="index">{{ item.title }}</view>
  </coolui-scroller>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isEmpty = ref(false)
const list = ref<{ title: string }[]>([])

const navList = ref([
  { id: 1, title: '分类一' },
  { id: 2, title: '分类二' },
])
const type = ref('line')          // line | round | plain
const navPerView = ref(4.5)       // 也可传 'auto'
const spaceBetween = ref(0)
const border = ref(true)
const active = ref(0)
const textStyle = ref({ color: '#333333', activeColor: '#d13435' })
const backgroundStyle = ref({ color: '#333333', activeColor: '#d13435' })

function onChange({ id, index }: { id: number; index: number }) {
  // 切换分类后同步内容
}

function refresh() {
  return Promise.resolve()
}

function loadmore() {
  return Promise.resolve()
}
</script>
vue
<template>
  <coolui-scroller :isEmpty="isEmpty" @refresh="refresh" @loadmore="loadmore">
    <template #header>
      <coolui-scroller-nav
        :list="navList"
        :type="type"
        :navPerView="navPerView"
        :spaceBetween="spaceBetween"
        :border="border"
        :text="textStyle"
        :background="backgroundStyle"
        v-model:active="active"
        @change="onChange"
      />
    </template>

    <view class="item" v-for="(item, index) in list" :key="index">{{ item.title }}</view>
  </coolui-scroller>
</template>

<script>
export default {
  data() {
    return {
      isEmpty: false,
      list: [],
      navList: [
        { id: 1, title: '分类一' },
        { id: 2, title: '分类二' },
      ],
      type: 'line',          // line | round | plain
      navPerView: 4.5,       // 也可传 'auto'
      spaceBetween: 0,
      border: true,
      active: 0,
      textStyle: { color: '#333333', activeColor: '#d13435' },
      backgroundStyle: { color: '#333333', activeColor: '#d13435' },
    }
  },
  methods: {
    onChange({ id, index }) {
      // 切换分类后同步内容
    },
    refresh() {
      return Promise.resolve()
    },
    loadmore() {
      return Promise.resolve()
    },
  },
}
</script>

属性 ​

属性说明类型默认值
list导航数据，每项 { id, title }Array[]
border是否显示下边框Booleantrue
text文字颜色配置 { color, activeColor }Object{ color: '#333333', activeColor: '#d13435' }
background背景配置 { color, activeColor }Object{ color: '#333333', activeColor: '#d13435' }
navPerView一屏显示几个（可传 'auto' 由内容撑开）Number / String4.5
spaceBetween相邻项间距Number0
type展示类型：line / round / plainString'line'
active当前选中索引，支持 v-model:activeNumber0

事件 ​

事件说明参数
change选中项变化{ id, index }
update:active选中索引变化（配 v-model:active）index: number

与原生版的差异 ​

  • 属性一致；
  • change 事件原生只返回 { id }，uni-app 版返回 { id, index }；
  • 新增 update:active，可直接 v-model:active 受控。

相关 ​