dataV 自定义组件开发（个人信息展示 自动轮播）

已于 2022-03-21 14:43:27 修改
阅读量3.1k 收藏 9
点赞数 5
文章标签： big data 前端 javascript
于 2022-03-21 14:42:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ccccc_cc_/article/details/123627399
版权

组件开发快速入门（Node版本在 8.0.0 及以上，10.12.0以下）

安装开发工具：npm install --registry=https://registry.npm.taobao.org datav-cli -g

查看datav版本：datav --version

cd 项目路径

datav run //运行项目

主要操作package.json和index.js文件

具体点击这里 

index.js

var Event = require('bcore/event');
var $ = require('jquery');
var _ = require('lodash');
//var Chart = require('XXX');

/**
 * 马良基础类
 */
module.exports = Event.extend(function Base(container, config) {
  this.config = {
    theme: {}
  }
  $(container).attr('id',"idname")
  this.container = $(container);           //容器
  this.apis = config.apis;                 //hook一定要有
  this._data = null;                       //数据
  this.chart = null;                       //图表
  this.init(config);
}, {
  /**
   * 公有初始化
   */
  init: function (config) {
    //1.初始化,合并配置
    this.mergeConfig(config);
    //2.刷新布局,针对有子组件的组件 可有可无
    this.updateLayout();
    //3.子组件实例化
    //this.chart = new Chart(this.container[0], this.config);
    //4.如果有需要, 更新样式
    this.updateStyle();
  },
  /**
   * 绘制
   * @param data
   * @param options 不一定有
   * !!注意: 第二个参数支持config, 就不需要updateOptions这个方法了
   */
  render: function (data, config) {
    data = this.data(data);
    var cfg = this.mergeConfig(config);
    //更新图表
    //this.chart.render(data, cfg);
    var h;
    //更新图表
    //this.chart.render(data, cfg);
    console.log( 4444,config);
    console.log(3333,data.num);
    if(config){
      this.container.html(null)
      const k= 100/config.num;
      for(let i = 0;i<config.array.length;i++){
        h=Math.ceil(config.array.length/config.num);
        this.container.append(`<div style="display: flex; width: ${k}%;height: 30%;" >
            <span style="width: 50%"><img width="100%" src='${config.array[i].imgUrl}' alt=""></span> 
           <div style="width: 50%"> 
               <div>姓名:${config.array[i].userName}</div> 
                <div>手机号:${config.array[i].mobile}</div> 
            </div> 
        </div>`
        )
      }
    }else if(data){
      this.container.html(null);
      const k= 100/data.num;
      for(let i = 0;i<data.array.length;i++){
        h=Math.ceil(data.array.length/data.num);
        this.container.append(`<div style="display: flex;width: ${k}%;height: 30%;" >
            <span style="width: 50%"><img width="100%" src='${data.array[i].value}' alt=""></span> 
           <div style="width: 50%"> 
               <div>姓名:${data.array[i].name}</div> 
                <div>手机号:${data.array[i].phone}</div> 
            </div> 
        </div>`
        )
      }
    }
    //如果有需要的话,更新样式
    this.updateStyle();
    var rolls = {
      currentY: 0,//滚动的总距离
      times: 0,//滚动一次的步长
      many: 0,//滚动次数
      MAX: 4,//滚动的总次数
      STEP: 100,//滚动一次的总步长
      ONCE: 20,//滚动一步的时间，注意ONCE*STEP<TIME
      TIME: 3000,//滚动一次的时间间隔
      INIT: function () {
        setInterval(function () {
          var container = document.getElementById("idname");
          if (rolls.many < rolls.MAX) {
            var timer;
            timer = setInterval(function () {
              if (rolls.times < rolls.STEP) {
                rolls.currentY--;
                container.style.marginTop = rolls.currentY + 'px';
                rolls.times++;
              } else {
                clearInterval(timer);
                rolls.times = 0;
              }
            }, rolls.ONCE);
            rolls.many++;
            // console.log(rolls.many);
          } else {
            rolls.many = 0;
            rolls.currentY = 0;
            container.style.marginTop = rolls.currentY + 'px';
          }
        }, rolls.TIME);
      },
    }
    console.log(112,h);
    if(h>3) {
      rolls.INIT();
    }
    //如果有需要的话,更新样式
    this.updateStyle();
  },
  /**
   *
   * @param width
   * @param height
   */
  resize: function (width, height) {
    this.updateLayout(width, height);
    //更新图表
    //this.chart.render({
    //  width: width,
    //  height: height
    //})
  },
  /**
   * 每个组件根据自身需要,从主题中获取颜色 覆盖到自身配置的颜色中.
   * 暂时可以不填内容
   */
  setColors: function () {
    //比如
    //var cfg = this.config;
    //cfg.color = cfg.theme.series[0] || cfg.color;
  },
  /**
   * 数据,设置和获取数据
   * @param data
   * @returns {*|number}
   */
  data: function (data) {
    if (data) {
      this._data = data;
    }
    return this._data;
  },
  /**
   * 更新配置
   * 优先级: config.colors > config.theme > this.config.theme > this.config.colors
   * [注] 有数组的配置一定要替换
   * @param config
   * @private
   */
  mergeConfig: function (config) {
    if (!config) {return this.config}
    this.config.theme = _.defaultsDeep(config.theme || {}, this.config.theme);
    this.setColors();
    this.config = _.defaultsDeep(config || {}, this.config);
    return this.config;
  },
  /**
   * 更新布局
   * 可有可无
   */
  updateLayout: function () {},
  /**
   * 更新样式
   * 有些子组件控制不到的,但是需要控制改变的,在这里实现
   */
  updateStyle: function () {
    var cfg = this.config;
    this.container.css({
      'font-size': cfg.size + 'px',
      'color': cfg.color || '#fff',
      'display': 'flex',
      'flex-wrap': 'wrap',
      'margin-top': '10px',
    });
    this.container.parent().css({
      'overflow': 'hidden'
    })
  },
  /**
   * 更新配置
   * !!注意:如果render支持第二个参数options, 那updateOptions不是必须的
   */
  //updateOptions: function (options) {},
  /**
   * 更新某些配置
   * 给可以增量更新配置的组件用
   */
  //updateXXX: function () {},
  /**
   * 销毁组件
   */
   destroy: function(){console.log('请实现 destroy 方法')}
});

package.json 

{
  "name": "@namespace/card",//这里card换成自己的项目名称
  "version": "0.0.1",
  "dependencies": {
    "bcore": "0.0.18",
    "jquery": "2.1.4",
    "lodash": "4.6.1"
  },
  "datav": {
    "cn_name": "卡片",
    "icon": "",
    "protocol": 2,
    "type": [
      "regular"
    ],
    "view": {
      "width": "600",
      "height": "300",
      "minWidth": "200",
      "minHeight": "100"
    },
    "apis": {
      "source": {
        "handler": "render",
        "description": "接口描述",
        "fields": {
          "value": {
            "description": "值说明"
          }
        }
      }
    },
    "config": {
      "num": {
        "name": "行数",
        "type": "number",
        "step": 1,
        "default": 4
      },
      "array": {
        "name": "数据系列",
        "type": "array",
        "default": [
          {
            "userName": "测试",
            "mobile": 13200000000,
            "imgUrl": "https://bkimg.cdn.bcebos.com/pic/eaf81a4c510fd9f9d72a2d09cd60c32a2834349b0e37?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UyNzI=,g_7,xp_5,yp_5/format,f_auto"
          }
        ],
        "child": {
          "name": "系列<%=i+1%>",
          "type": "object",
          "child": {
            "userName": {
              "name": "姓名",
              "type": "text",
              "default": ""
            },
            "mobile": {
              "name": "手机号",
              "type": "text",
              "default": null
            },
            "imgUrl": {
              "name": "图片地址",
              "type": "text",
              "default": ""
            }
          }
        }
      }
    },
    "api_data": {
      "source": {
        "array": [
          {
            "value": "https://tse1-mm.cn.bing.net/th/id/R-C.cac9668209d395fc580105a3eb4a094e?rik=ysSO6HOBOSpfqw&riu=http%3a%2f%2fp1.qhimg.com%2ft01c7e57f4c6f60261b.jpg&ehk=vT%2bQUlFMuLY8JHRFX7J%2bclF0OzfBYEZRyYCHfFtZDjI%3d&risl=&pid=ImgRaw&r=0",
            "name": "值",
            "phone": "15156797890"
          },
          {
            "value": "https://tse1-mm.cn.bing.net/th/id/R-C.cac9668209d395fc580105a3eb4a094e?rik=ysSO6HOBOSpfqw&riu=http%3a%2f%2fp1.qhimg.com%2ft01c7e57f4c6f60261b.jpg&ehk=vT%2bQUlFMuLY8JHRFX7J%2bclF0OzfBYEZRyYCHfFtZDjI%3d&risl=&pid=ImgRaw&r=0",
            "name": "值",
            "phone": "15156797890"
          },
          {
            "value": "https://tse1-mm.cn.bing.net/th/id/R-C.cac9668209d395fc580105a3eb4a094e?rik=ysSO6HOBOSpfqw&riu=http%3a%2f%2fp1.qhimg.com%2ft01c7e57f4c6f60261b.jpg&ehk=vT%2bQUlFMuLY8JHRFX7J%2bclF0OzfBYEZRyYCHfFtZDjI%3d&risl=&pid=ImgRaw&r=0",
            "name": "值",
            "phone": "15156797890"
          },
          {
            "value": "https://tse1-mm.cn.bing.net/th/id/R-C.cac9668209d395fc580105a3eb4a094e?rik=ysSO6HOBOSpfqw&riu=http%3a%2f%2fp1.qhimg.com%2ft01c7e57f4c6f60261b.jpg&ehk=vT%2bQUlFMuLY8JHRFX7J%2bclF0OzfBYEZRyYCHfFtZDjI%3d&risl=&pid=ImgRaw&r=0",
            "name": "值",
            "phone": "15156797890"
          },
          {
            "value": "https://tse1-mm.cn.bing.net/th/id/R-C.cac9668209d395fc580105a3eb4a094e?rik=ysSO6HOBOSpfqw&riu=http%3a%2f%2fp1.qhimg.com%2ft01c7e57f4c6f60261b.jpg&ehk=vT%2bQUlFMuLY8JHRFX7J%2bclF0OzfBYEZRyYCHfFtZDjI%3d&risl=&pid=ImgRaw&r=0",
            "name": "值",
            "phone": "15156797890"
          }
        ],
        "num":3
      }
    }
  }
}

 结果如下 

 项目打包上传

可以选择多种上传方式：登录datav账号直接datav publish就可以上传组件到服务器

我这里使用的是另外一种方式

控制台->我的资产->我的组件包->新建组件包 按要求和提示创建组件包等待组件包审核

执行datav package生成压缩包

 将压缩包上传到组件包中

上传注意事项

打包时package.json的名称要和组件包的名称相同否则上传不成功

 上传成功后可以在全部资产  其他  这里的卡片就是上传成功的组件包可以直接拖到页面使用 

预览效果

这里只放了5个信息一行3个超出3行会自动滚动

 踩坑记录：

只能选择容器内的dom操作，我在

添加了超出隐藏，使用的时候不能正常显示，因为操作了container的父元素

具体查看 

ccccc_cc_
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【可视化大屏系列】DataV的使用
wind的博客
06-23 1167
使用DataV组件库开发可视化大屏页面
自定义TextView实现垂直自动轮播
12-06
本示例中，我们探讨的是如何自定义一个TextView来实现垂直自动轮播功能，这个控件名为`ScrollTextView`，它继承了`TextSwitcher`。`TextSwitcher`是一个用于在两个视图之间切换文本的视图，通常用于动画效果，而在...
vue项目中使用DataV组件做排名轮播表
Dnn01的博客
08-30 8085
今天做轮播排名，发现了很好用的插件DataV，代码非常简单，在页面中直接引用标签，直接在data里面写数据就就行了。下面是基本用法。 第一步：我们先安装DataV npm install @jiaminghi/data-view 第二步：在main.js里面全局注册DataV // 将自动注册所有组件为全局组件 import dataV from '@jiaminghi/data-view' Vue.use(dataV) 第三步：就可以在页面里使用啦 ...
dataV下的轮播表使用(保姆级)
weixin_42425138的博客
07-02 617
因为dataV的轮播表是封装好的，能力有限，改不动，（md,人还能让N 憋死？4. 更多详细内容可参考官方文档：[DataV 官方文档](http://datav.jiaminghi.com/guide/)，上述的2、3两点文档里也有，只是为易错点，需特别注意。查了很多资料，也没找到类似的问题，只有官方论坛一个哥们有类似，但好像也是因为浏览器自动翻译引起的，这里不多叙述。也希望后续看到这篇文章的朋友若出现类似问题，并有思路解释的，告知一下。若有出现文中类似情况的小伙伴，欢迎评论区讨论哈，下一篇见！
Datav组件库轮播表行高设置
m0_61404523的博客
08-11 2226
Datav组件库轮播表行高设置
DataV轮播表数据太长内容展示不全的解决方法
renovateF5的博客
06-11 743
解决方法：直接手改源码+使用el-tooltip注：这里只涉及vue3的版本。
DataV数据可视化之轮播表
往事随风
01-19 8763
第一步 安装 npm install @jiaminghi/data-view //在main.js中引入 自动注册所有组件为全局组件 import dataV from ‘@jiaminghi/data-view’ Vue.use(dataV) 第二步 HTML部分 <div class="recentlyReportScollList" style="width:392px;height:290px;background: white"> <div style=
dataV实现扇形图轮播
u010007013的博客
03-11 3589
2019年3月11日 项目要求用dataV做一个大屏。 其中扇形图需要实现自动轮播的效果。举个例子：先播放A酒店的评论，2秒后播放B酒店的数据，再过2秒播放C酒店的数据。见下图： 初次使用datav的我一筹莫展。后来看了官方文档介绍了回调参数id,知道了怎么用回调参数id来实现自动轮播的效果。具体见下面分析： 1.首先往画板中添加一个叫时间轴的组件。 在画板中长这个样子： 在右侧的数据设置中...
DataV轮播表数据太长内容展示不全的解决方法React版本
renovateF5的博客
06-12 795
vue3的版本参考这个原理是：修改源码+使用antdv的tooltip。最后效果图。
修改dataV轮播表背景图
CSDN_go_die的博客
04-26 1568
修改第三方UI组件样式都适用！！ 项目需求：使用dataV轮播表组件库时，需要修改轮播表头的样式 但是dataV的参数配置里面只能设置background-color不能设置background-image 这时候需要F11检查找到需要修改的元素类名，比如红色框里圈出来的这些： 然后在你调用这个组件的vue文件里面的<style>里面设置样式： <style scoped> /deep/ .dv-scroll-board .header{ borde.
DataV图表-排名轮播表自定义
共同进步
06-15 9088
DataV图表-排名轮播表自定义数据大屏可视化 以下css代码适用于以上效果 如有更改或者有其他的兼容性 有用到rem适配等。场景：需要计算根据分数不同柱子的颜色不同 低于60分变成为橙色柱子。如碰到其他的问题 可以私下我 一起探讨学习。样式来实现 排名轮播表。这时候我们看的是默认样式。如需要适配可以看这篇。也可以私信我进行讨论。如果对你有所帮助还请。属性帮助你更好的开发。
轮播图和自定义组件，微信小程序开发，商城
10-21
在微信小程序的开发中，创建一个功能丰富的商城应用通常涉及到多个关键知识点，其中包括轮播图的实现、自定义组件的设计以及微信小程序的基础架构。这里我们将深入探讨这些主题。 首先，让我们来谈谈轮播图（Banner...
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
10-17
主要介绍了微信小程序非swiper组件实现的自定义伪3D轮播图效果,涉及微信小程序事件响应及元素属性动态操作实现轮播图效果相关技巧与注意事项,需要的朋友可以参考下
vue swipe自定义组件实现轮播效果
10-16
本文将深入探讨如何使用 Vue 自定义组件 `vue swipe` 来实现轮播效果。 轮播效果通常用于展示一系列图片或内容，用户可以通过滑动或点击导航点来浏览。在 Vue 中，我们可以创建一个名为 `VueSwipe` 的组件，以实现...
Android自定义控件实现简单的轮播图控件
01-20
本文将详细介绍如何实现一个简单的轮播图控件，它结合了ViewPager和指示器功能，用于展示广告或图片信息的左右滑动效果。 首先，轮播图的核心是ViewPager，它允许用户通过滑动查看多个页面。为了实现轮播图，我们...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 939
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 510
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
【前端面试】九、框架
最新发布
weixin_49015558的博客
07-31 338
1 Vue2 实现方式 2 Vue3 实现方式 3 React 实现方式 4 Angular 实现方式
vite+react 函数组件 使用swiper轮播图 自动轮播
05-28
好的，针对你的问题，我可以给出以下代码实现： 1. 首先，你需要安装 `swiper` 和 `react-id-...以上就是使用 `vite` 和 `react` 开发函数组件，在其中使用 `swiper` 进行自动轮播的实现方式。希望能够对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值