滚动条样式

滚动区域默认使用如下样式。

使用示例

基本用法

<template>
  <f-list class="demo-loadmore-list" bordered :loading="initLoading" item-layout="horizontal" :data-source="list">
    <template #loadMore>
      <div v-if="!initLoading && !loading" :style="{ textAlign: 'center', padding: '12px 0', lineHeight: '18px' }">
        <span @click="onLoadMore" :style="{ cursor: 'pointer', color: '#378EEF' }">loading more</span>
      </div>
    </template>
    <template #renderItem="{ item }">
      <f-list-item>
        <template #actions>
          <a key="list-loadmore-edit">edit</a>
          <a key="list-loadmore-more">more</a>
        </template>
        <f-skeleton avatar :title="false" :loading="!!item.loading" active>
          <f-list-item-meta
            description="Ant Design, a design language for background applications, is refined by Ant UED Team"
          >
            <template #title>
              <a href="https://www.antdv.com/">{{ item.name.last }}</a>
            </template>
            <template #avatar>
              <f-avatar :src="item.picture.large" :size="40" />
            </template>
          </f-list-item-meta>
        </f-skeleton>
      </f-list-item>
    </template>
  </f-list>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, nextTick } from 'vue'
const count = 3
const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`

export default defineComponent({
  setup() {
    const initLoading = ref(true)
    const loading = ref(false)
    const data = ref([])
    const list = ref([])
    onMounted(() => {
      fetch(fakeDataUrl)
        .then(res => res.json())
        .then(res => {
          initLoading.value = false
          data.value = res.results
          list.value = res.results
        })
    })

    const onLoadMore = () => {
      loading.value = true
      list.value = data.value.concat([...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })))
      fetch(fakeDataUrl)
        .then(res => res.json())
        .then(res => {
          const newData = data.value.concat(res.results)
          loading.value = false
          data.value = newData
          list.value = newData
          nextTick(() => {
            // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
            // In real scene, you can using public method of react-virtualized:
            // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
            window.dispatchEvent(new Event('resize'))
          })
        })
    }

    return {
      loading,
      initLoading,
      data,
      list,
      onLoadMore,
    }
  },
})
</script>
<style scoped>
.demo-loadmore-list {
  height: 200px;
  overflow-y: scroll;
}
</style>

css

/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* 定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track {
  border-radius: 3px;
  background: rgba(255, 255, 255, 1);
}

/* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #dddddd;
}

/* 滚动条悬停时的滑块 */
::-webkit-scrollbar-thumb:hover {
  background-color: #cccccc;
}