更新记录

0.0.1（2022-09-02）

TS简易版本

平台兼容性

说明 ranking_dynamic

主要是一维数组进行【升序 or 倒序】排列

动画方面每个人需求不一样，使用者自己更改

二维数组如有需求自己搞定或者联系作者

    // 核心代码
    const sortList = computed(() => {
        if (resData.value.length) {
            const fn = (a, b) => b.count - a.count
            const newArr = JSON.parse(JSON.stringify(resData.value)).sort(fn)
            const fn2 = i => {
                i.width = ((i.count / counts.value) * 308).toFixed(2) + 'px'
                const ins = newArr.findIndex(t => t.orgName === i.orgName)
                i.sort = ins
                return i
            }
            return resData.value.map(fn2)
        }
        return null
    })

    // 更好的动画缓冲，请将i.sort分的更加细致
    <view class="it-items" 
        :style="{
            top: `${i.sort * 36}px`,
            transition: `all .${i.sort < 4 ? 4 : i.sort /5}s`,
        }">

使用方法

    // resData 数据源 在父组件还是本身，仁者见仁，智者见智，根据自己需求吧
    <ranking_dynamic
      v-if="resData.length"
      :resData="resData"> 
    </ranking_dynamic>