今天做轮播排名,发现了很好用的插件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.