antvis/wx-f2

wx-f2的插件使用方案

BugDongDong opened this issue · 4 comments

首部及导言

感谢f2开发者,我忠实粉,已在公司极力推广Ant系技术。
欢迎转载本文,请标注来处。

Scroll bar的使用及扩展

  1. 小程序新建终端,请自行学习终端方向知识。
  2. npm install @antv/wx-f2 --save
  3. 关闭微信小程序,使用编辑器打开node_modules/@antv/wx-f2/src/index.js。
  4. 注入代码
    import F2 from '@antv/f2'; // 第一步:加载插件 ScrollBar const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar'); // 第二步:注册插件 ScrollBar F2.Chart.plugins.register(ScrollBar); // 这里进行全局注册,也可以给 chart 的实例注册
    5.node_modules@antv\wx-f2路径下,window可以使用git bash here,linux可以直接操作。
    6.执行npm install、npm run build
    7.完成后删除node_modules@antv\wx-f2\node_modules
    8.重新打开微信小程序,开启npm使用功能,构建npm包。
    9.此时Scroll bar已经被注册到F2中了,无需引入,直接使用。
    10.PS:微信小程序Pan平滑仍存在bug,即使你引入了ScrollBar,也没法触发滑动。

使用逻辑

wx-f2实际上就是f2,只不过因为小程序的原因,新增了事件传导(touchStart、touchMove、touchEnd)。
使用小程序工具>构建npm时,没有引入ScrollBar,所以构建完成的f2及wx-f2都不会存在ScrollBar。
必须在构建前,提前修改wx-f2,剩下的事情交给微信开发工具即可。

首部及导言

感谢f2开发者,我忠实粉,已在公司极力推广Ant系技术。
欢迎转载本文,请标注来处。

Scroll bar的使用及扩展

  1. 小程序新建终端,请自行学习终端方向知识。
  2. npm install @antv/wx-f2 --save
  3. 关闭微信小程序,使用编辑器打开node_modules/@antv/wx-f2/src/index.js。
  4. 注入代码
    import F2 from '@antv/f2'; // 第一步:加载插件 ScrollBar const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar'); // 第二步:注册插件 ScrollBar F2.Chart.plugins.register(ScrollBar); // 这里进行全局注册,也可以给 chart 的实例注册
    5.node_modules@antv\wx-f2路径下,window可以使用git bash here,linux可以直接操作。
    6.执行npm install、npm run build
    7.完成后删除node_modules@antv\wx-f2\node_modules
    8.重新打开微信小程序,开启npm使用功能,构建npm包。
    9.此时Scroll bar已经被注册到F2中了,无需引入,直接使用。
    10.PS:微信小程序Pan平滑仍存在bug,即使你引入了ScrollBar,也没法触发滑动。

使用逻辑

wx-f2实际上就是f2,只不过因为小程序的原因,新增了事件传导(touchStart、touchMove、touchEnd)。
使用小程序工具>构建npm时,没有引入ScrollBar,所以构建完成的f2及wx-f2都不会存在ScrollBar。
必须在构建前,提前修改wx-f2,剩下的事情交给微信开发工具即可。

兄弟,能教教我嘛,碰到饼图的哪个报错,搞一天了,没搞定

所以通过你的方式构建就可以用ScrollBar了吗? 平滑还是有bug的问题是能用还是完全划不动

首部及导言

感谢f2开发者,我忠实粉,已在公司极力推广Ant系技术。
欢迎转载本文,请标注来处。

Scroll bar的使用及扩展

  1. 小程序新建终端,请自行学习终端方向知识。
  2. npm install @antv/wx-f2 --save
  3. 关闭微信小程序,使用编辑器打开node_modules/@antv/wx-f2/src/index.js。
  4. 注入代码
    import F2 from '@antv/f2'; // 第一步:加载插件 ScrollBar const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar'); // 第二步:注册插件 ScrollBar F2.Chart.plugins.register(ScrollBar); // 这里进行全局注册,也可以给 chart 的实例注册
    5.node_modules@antv\wx-f2路径下,window可以使用git bash here,linux可以直接操作。
    6.执行npm install、npm run build
    7.完成后删除node_modules@antv\wx-f2\node_modules
    8.重新打开微信小程序,开启npm使用功能,构建npm包。
    9.此时Scroll bar已经被注册到F2中了,无需引入,直接使用。
    10.PS:微信小程序Pan平滑仍存在bug,即使你引入了ScrollBar,也没法触发滑动。

使用逻辑

wx-f2实际上就是f2,只不过因为小程序的原因,新增了事件传导(touchStart、touchMove、touchEnd)。
使用小程序工具>构建npm时,没有引入ScrollBar,所以构建完成的f2及wx-f2都不会存在ScrollBar。
必须在构建前,提前修改wx-f2,剩下的事情交给微信开发工具即可。

希望能尽快解决该BUG,这个需求功能蛮重要的,涉及较多x轴显示的时候,需要用到ScrollBar来提高用户体验,希望能给出解决BUG的时间点,拜托大神些~~~

这个问题解决了?