E-DataV

Appearance

On this page

排名轮播图 ​

基本示例 ​

点击查看代码
js
<template>
  <e-scroll-ranking-board style="height:250px;width:450px;" :items="items" @row-click="handleClick"></e-scroll-ranking-board>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      items: Array(10).fill(0).map((item, index) => {
          return {
              label: `测试${index}`,
              value: index * 100
          }
      })
    }
  },
  methods: {
    handleClick(value, rowIndex) {
      console.log(value, rowIndex);
    }
  }
}
</script>
vue
<template>
    <e-scroll-ranking-board style="height:250px;width:450px;" :items="items" @rowClick="handleClick"></e-scroll-ranking-board>
</template>
<script setup>
import { EScrollRankingBoard } from 'e-datav-vue3';

// ref 用法
const items = ref(Array(10).fill(0).map((item, index) => {
    return {
        label: `测试${index}`,
        value: index * 100
    }
}));

// reactive 用法
const data = reactive({
    items: Array(10).fill(0).map((item, index) => {
        return {
            label: `测试${index}`,
            value: index * 100
        }
    })
})

const handleClick = (value, rowIndex) => {
    console.log(value, rowIndex);
}
</script>
js
import { ScrollRankingBoard } from 'e-datav-react';

function Page() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    setItems(Array(6).fill(0).map((item, index) => {
      return {
        label: `测试${index}`,
        value: index * 100
      }
    }));
  }, [])

  const handleRowClick = (item, rowIndex) => {
    console.log(item, rowIndex);
  }

  return (
    <div>
      <ScrollRankingBoard items={items} onRowClick={handleRowClick} />
    </div>
  )
}

export default Page

整页滚动 ​

点击查看代码
js
<template>
  <e-scroll-ranking-board style="height:250px;width:450px;" type="page" :items="items" @row-click="handleClick"></e-scroll-ranking-board>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      items: Array(10).fill(0).map((item, index) => {
          return {
              label: `测试${index}`,
              value: index * 100
          }
      })
    }
  },
  methods: {
    handleClick(value, rowIndex) {
      console.log(value, rowIndex);
    }
  }
}
</script>
vue
<template>
    <e-scroll-ranking-board style="height:250px;width:450px;" type="page" :items="items" @rowClick="handleClick"></e-scroll-ranking-board>
</template>
<script setup>
import { EScrollRankingBoard } from 'e-datav-vue3';

const items = Array(10).fill(0).map((item, index) => {
    return {
        label: `测试${index}`,
        value: index * 100
    }
})

const handleClick = (value, rowIndex) => {
    console.log(value, rowIndex);
}
</script>
js
import { ScrollRankingBoard } from 'e-datav-react';

function Page() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    setItems(Array(6).fill(0).map((item, index) => {
      return {
        label: `测试${index}`,
        value: index * 100
      }
    }));
  }, [])

  const handleRowClick = (item, rowIndex) => {
    console.log(item, rowIndex);
  }

  return (
    <div>
      <ScrollRankingBoard type="page" items={items} onRowClick={handleRowClick} />
    </div>
  )
}

export default Page

自定义高亮颜色 ​

点击查看代码
js
<template>
  <e-scroll-ranking-board style="height:250px;width:450px;" :highlight-colors="highlightColors" :items="items" @row-click="handleClick"></e-scroll-ranking-board>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      items: Array(10).fill(0).map((item, index) => {
          return {
              label: `测试${index}`,
              value: index * 100
          }
      }),
      highlightColors: ['#FF6E76', '#FFA600', '#FFD600']
    }
  },
  methods: {
    handleClick(value, rowIndex) {
      console.log(value, rowIndex);
    }
  }
}
</script>
vue
<template>
    <e-scroll-ranking-board style="height:250px;width:450px;" :items="items" @rowClick="handleClick" :highlight-colors="['#FF6E76', '#FFA600', '#FFD600']"></e-scroll-ranking-board>
</template>
<script setup>
import { EScrollRankingBoard } from 'e-datav-vue3';

const items = Array(10).fill(0).map((item, index) => {
    return {
        label: `测试${index}`,
        value: index * 100
    }
})

const handleClick = (value, rowIndex) => {
    console.log(value, rowIndex);
}
</script>
js
import { ScrollRankingBoard } from 'e-datav-react';

function Page() {
  const [items, setItems] = useState([]);
  const highlightColors = ['#FF6E76', '#FFA600', '#FFD600'];

  useEffect(() => {
    setItems(Array(6).fill(0).map((item, index) => {
      return {
        label: `测试${index}`,
        value: index * 100
      }
    }));
  }, [])

  const handleRowClick = (item, rowIndex) => {
    console.log(item, rowIndex);
  }

  return (
    <div>
      <ScrollRankingBoard items={items} onRowClick={handleRowClick} highlightColors={highlightColors} />
    </div>
  )
}

export default Page

属性 ​

字段类型备注
itemsScrollRankingBoardItem[]数据源
rowNumnumber显示的行数，默认5
intervalnumber滚动间隔(ms)，默认3000ms
typestring滚动类型，默认single，single单个滚动，page整页滚动
highlightRowNumnumber高亮行数，默认3
highlightColorsstring[]高亮颜色，默认['#1e80ff', '#4cc7f3', '#CDDC39']
rankingFontSizenumber排名字号，默认18
labelFontSizenumber文本字号，默认14
valueFontSizenumber值字号，默认18
colorstring字体颜色, 默认#fff

ScrollRankingBoardItem ​

字段
类型
备注
labelstring标签
valuenumber值

事件 ​

名称
备注
rowClick点击行时触发，返回当前行item对象及行索引rowIndex