排行榜页面设计

效果：

排行榜页面

每一行采用div和v-for循环显示

最后的柱状图：设置div的宽度、高度、圆角、颜色实现

<div class="ranking-item-chart">
     <div :style="{background: colors[index], width: item.count / maxValue * 100 + '%'}"
               class="ranking-bar" style="transition: width 1.5s; width: 1px">
     </div>
</div>

其中宽度动态设置百分比，父div设置同一宽度，以上代码可得静态柱子

动态增长：

通过给予 初始宽度，并更改其宽度，style.transition: width 1.5s;  为宽度设置变化，且时间为1.5秒

宽度变化通过JavaScript进行更改：

const chartShow = () => {
  const rankingBar = document.querySelectorAll('.ranking-bar')
  for (let i = 10; i < rankingBar.length; i++) {
    const bar = rankingBar[i]
    bar.style.width = showData.value[i - 10].count / maxValue.value * 100 + '%'
  }
}

注意：此处 i 从 10开始是因为左右两边的组件不在一个文件中

在onMounted等待渲染完成，调用宽度变化函数

<script setup lang="ts">
import {onMounted, ref, nextTick} from "vue";

onMounted(async () => {
  getData()
  await nextTick()
  chartShow()
})
</script>

######### 以下为不成熟思路 #########

在适当的地方调用该宽度变换函数即可实现动态增长，持续时间为1.5秒

适当地方1--窗口刷新：

window.addEventListener('load', () => {
  chartShow()
})

窗口刷新并不会更改路径

适当地方2--路径变化监听：

window.addEventListener('popstate', function() {
  // 监听路径变化
  if(window.location.href === 'http://localhost:5173/home') {
    chartShow()
  }
});

由于只是同一页面内的链接跳转，无法监听如onpageshow、visibilitychange等页面函数，故选择为链接添加click事件监听