vue项目中使用DataV组件做排名轮播表

今天做轮播排名，发现了很好用的插件DataV，代码非常简单，在页面中直接引用标签，直接在data里面写数据就就行了。下面是基本用法。
官网链接：DataV.

第一步：我们先安装DataV

npm install @jiaminghi/data-view

第二步：在main.js里面全局注册DataV

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

第三步：就可以在页面里使用啦

demo1

我这里做了一个排名轮播表，代码如下：

//1.在template里面像div那样写标签就好（具体标签请参考DataV官网）
<dv-scroll-ranking-board :config="ranking" style="height: 100%" />
...
//在data里面写数据
 ranking: {
        data: [
          {
            name: "虹口区",
            value: 55,
          },
          {
            name: "奉贤区",
            value: 120,
          },
          {
            name: "浦东新区",
            value: 78,
          },
          {
            name: "宝山区",
            value: 66,
          },
          {
            name: "徐汇区",
            value: 40,
          },
          {
            name: "金山区",
            value: 60,
          },
          {
            name: "长宁区",
            value: 88,
          },
          {
            name: "普陀区",
            value: 45,
          },
          {
            name: "闵行区",
            value: 39,
          },
          {
            name: "静安区",
            value: 82,
          },
          {
            name: "嘉定区",
            value: 58,
          },
          {
            name: "青浦区",
            value: 94,
          },
          {
            name: "松江区",
            value: 40,
          },
          {
            name: "杨浦区",
            value: 80,
          },
        ],
        carousel: "single",
        unit: "次",
      },

这样就好了，是不是非常简单。

demo2

我还做了一个列表的向上自动轮播列表，代码如下：

//1.template里面的标签
 <dv-scroll-board  :config="config1"  style="width: 100%；"  />
//2.data里面的数据
 config1: {
        header: ["组织名称", "组织编号", "组织联系方式"],
        data: [
          ["张三慈善会", "2233111", "13797646522"],
          ["李四互助会", "2233112", "13766258223"],
          ["王五慈善会", "2233113", "13781519821"],
          ["飞蝗慈善会", "2255156", "18915123112"],
          ["飞度", "2255623", "18911231212"],
          ["雷诺机构", "2233111", "18632456985"],
          ["并艾车友会", "1155631", "18123121232"],
          ["成群网络会", "1100352", "18121212301"],
          ["毒友交流会", "1252120", "16896656562"],
          ["Scaner交流会", "1212512", "15366568456"],
        ],
        rowNum: 7, //表格行数
        headerHeight: 35,
        headerBGC: "#00baff", //表头
        // oddRowBGC: "#0f1325", //奇数行
        // evenRowBGC: "#171c33", //偶数行
        index: true,
        columnWidth: [50],
        align: ["center"],
      },

DataV官网还有很多组件，非常简单实用，官网链接: DataV.