TnScrollList 横向滚动

该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表

组件位置

nodeuni_modules

typescript

import TnScrollList from '@tuniao/tnui-vue3-uniapp/components/scroll-list/src/scroll-list.vue'

import TnScrollList from '@tuniao/tnui-vue3-uniapp/components/scroll-list/src/scroll-list.vue'

typescript

import TnScrollList from '@/uni_modules/tuniaoui-vue3/components/scroll-list/src/scroll-list.vue'

import TnScrollList from '@/uni_modules/tuniaoui-vue3/components/scroll-list/src/scroll-list.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

将需要显示的内容放在slot中即可

vue

<template>
  <TnScrollList>
    <view class="item-container">
      <view
        v-for="i in 20"
        :key="i"
        class="scroll-item tn-flex-center tn-flex-column"
      >
        <view class="empty tn-grey-light_bg" />
        <view class="title">图鸟UI</view>
      </view>
    </view>
  </TnScrollList>
</template>

<style lang="scss" scoped>
.item-container {
  position: relative;
  width: fit-content;

  display: flex;
  flex-wrap: nowrap;

  .scroll-item {
    flex-grow: 1;
    flex-shrink: 0;
    margin: 0rpx 20rpx;

    .empty {
      width: 100rpx;
      height: 100rpx;
      border-radius: 15rpx;
    }

    .title {
      margin-top: 10rpx;
    }
  }
}
</style>

<template>
  <TnScrollList>
    <view class="item-container">
      <view
        v-for="i in 20"
        :key="i"
        class="scroll-item tn-flex-center tn-flex-column"
      >
        <view class="empty tn-grey-light_bg" />
        <view class="title">图鸟UI</view>
      </view>
    </view>
  </TnScrollList>
</template>

<style lang="scss" scoped>
.item-container {
  position: relative;
  width: fit-content;

  display: flex;
  flex-wrap: nowrap;

  .scroll-item {
    flex-grow: 1;
    flex-shrink: 0;
    margin: 0rpx 20rpx;

    .empty {
      width: 100rpx;
      height: 100rpx;
      border-radius: 15rpx;
    }

    .title {
      margin-top: 10rpx;
    }
  }
}
</style>

修改指示器样式

通过indicator-color和indicator-block-color可以修改指示器的颜色和滑块的颜色，

通过indicator-width和indicator-block-width可以修改指示器和滑块的宽度，单位为px

vue

<template>
  <TnScrollList
    indicator-color="tn-blue"
    indicator-block-color="rgba(1, 190, 255, 0.8)"
    indicator-width="60"
    indicator-block-width="40"
  >
    <view class="item-container">
      <view
        v-for="i in 20"
        :key="i"
        class="scroll-item tn-flex-center tn-flex-column"
      >
        <view class="empty tn-grey-light_bg" />
        <view class="title">图鸟UI</view>
      </view>
    </view>
  </TnScrollList>
</template>

<template>
  <TnScrollList
    indicator-color="tn-blue"
    indicator-block-color="rgba(1, 190, 255, 0.8)"
    indicator-width="60"
    indicator-block-width="40"
  >
    <view class="item-container">
      <view
        v-for="i in 20"
        :key="i"
        class="scroll-item tn-flex-center tn-flex-column"
      >
        <view class="empty tn-grey-light_bg" />
        <view class="title">图鸟UI</view>
      </view>
    </view>
  </TnScrollList>
</template>

API

Props

属性名	说明	类型	默认值	可选值
indicator	是否显示指示器	Boolean	`true`	`false`
indicator-width	指示器宽度，单位 px	Number	40	-
indicator-block-width	指示器滑块宽度，单位 px	Number	20	-
indicator-color	指示器颜色，可以使用图鸟内置的背景色、hex、rgb、rgba	String	-	-
indicator-block-color	指示器滑块颜色，可以使用图鸟内置的背景色、hex、rgb、rgba	String	-	-

Emits

事件名	说明	类型
scroll-left	滚动到最左边	`() => void`
scroll-right	滚动到最右边	`() => void`

Slots

插槽名	说明
default	自定义滚动内容

TnScrollList 横向滚动 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

修改指示器样式 ​

API ​

Props ​

Emits ​

Slots ​