index.js 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. const ZanNoticeBar = {
  2. initZanNoticeBarScroll(componentId) {
  3. this.zanNoticeBarNode = this.zanNoticeBarNode || {};
  4. this.zanNoticeBarNode[`${componentId}`] = {
  5. width: undefined,
  6. wrapWidth: undefined,
  7. animation: null,
  8. resetAnimation: null
  9. };
  10. const currentComponent = this.zanNoticeBarNode[`${componentId}`];
  11. wx.createSelectorQuery()
  12. .in(this)
  13. .select(`#${componentId}__content`)
  14. .boundingClientRect((rect) => {
  15. if (!rect || !rect.width) {
  16. console.warn('页面缺少 noticebar 元素');
  17. return;
  18. }
  19. currentComponent.width = rect.width;
  20. wx
  21. .createSelectorQuery()
  22. .in(this)
  23. .select(`#${componentId}__content-wrap`)
  24. .boundingClientRect((rect) => {
  25. if (!rect || !rect.width) {
  26. return;
  27. }
  28. clearTimeout(this.data[componentId].setTimeoutId)
  29. currentComponent.wrapWidth = rect.width;
  30. if (currentComponent.wrapWidth < currentComponent.width) {
  31. var mstime = currentComponent.width / 40 * 1000;
  32. currentComponent.animation = wx.createAnimation({
  33. duration: mstime,
  34. timingFunction: 'linear'
  35. });
  36. currentComponent.resetAnimation = wx.createAnimation({
  37. duration: 0,
  38. timingFunction: 'linear'
  39. });
  40. this.scrollZanNoticeBar(componentId, mstime);
  41. }
  42. })
  43. .exec();
  44. })
  45. .exec();
  46. },
  47. scrollZanNoticeBar(componentId, mstime) {
  48. const currentComponent = this.zanNoticeBarNode[`${componentId}`];
  49. const resetAnimationData = currentComponent.resetAnimation.translateX(currentComponent.wrapWidth).step();
  50. this.setData({
  51. [`${componentId}.animationData`]: resetAnimationData.export()
  52. });
  53. const aninationData = currentComponent.animation.translateX(-mstime * 40 / 1000).step();
  54. setTimeout(() => {
  55. this.setData({
  56. [`${componentId}.animationData`]: aninationData.export()
  57. });
  58. }, 100);
  59. const setTimeoutId = setTimeout(() => {
  60. this.scrollZanNoticeBar(componentId, mstime);
  61. }, mstime);
  62. this.setData({
  63. [`${componentId}.setTimeoutId`]: setTimeoutId
  64. })
  65. }
  66. };
  67. module.exports = ZanNoticeBar;