智慧宿舍系统小程序

wechat/miniprogram/node_modules/@vant/weapp/dist/notice-bar/index.js

@@ -0,0 +1,123 @@
+import { VantComponent } from '../common/component';
+import { getRect, requestAnimationFrame } from '../common/utils';
+VantComponent({
+  props: {
+    text: {
+      type: String,
+      value: '',
+      observer: 'init',
+    },
+    mode: {
+      type: String,
+      value: '',
+    },
+    url: {
+      type: String,
+      value: '',
+    },
+    openType: {
+      type: String,
+      value: 'navigate',
+    },
+    delay: {
+      type: Number,
+      value: 1,
+    },
+    speed: {
+      type: Number,
+      value: 60,
+      observer: 'init',
+    },
+    scrollable: null,
+    leftIcon: {
+      type: String,
+      value: '',
+    },
+    color: String,
+    backgroundColor: String,
+    background: String,
+    wrapable: Boolean,
+  },
+  data: {
+    show: true,
+  },
+  created() {
+    this.resetAnimation = wx.createAnimation({
+      duration: 0,
+      timingFunction: 'linear',
+    });
+  },
+  destroyed() {
+    this.timer && clearTimeout(this.timer);
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      requestAnimationFrame(() => {
+        Promise.all([
+          getRect(this, '.van-notice-bar__content'),
+          getRect(this, '.van-notice-bar__wrap'),
+        ]).then((rects) => {
+          const [contentRect, wrapRect] = rects;
+          const { speed, scrollable, delay } = this.data;
+          if (
+            contentRect == null ||
+            wrapRect == null ||
+            !contentRect.width ||
+            !wrapRect.width ||
+            scrollable === false
+          ) {
+            return;
+          }
+          if (scrollable || wrapRect.width < contentRect.width) {
+            const duration =
+              ((wrapRect.width + contentRect.width) / speed) * 1000;
+            this.wrapWidth = wrapRect.width;
+            this.contentWidth = contentRect.width;
+            this.duration = duration;
+            this.animation = wx.createAnimation({
+              duration,
+              timingFunction: 'linear',
+              delay,
+            });
+            this.scroll();
+          }
+        });
+      });
+    },
+    scroll() {
+      this.timer && clearTimeout(this.timer);
+      this.timer = null;
+      this.setData({
+        animationData: this.resetAnimation
+          .translateX(this.wrapWidth)
+          .step()
+          .export(),
+      });
+      requestAnimationFrame(() => {
+        this.setData({
+          animationData: this.animation
+            .translateX(-this.contentWidth)
+            .step()
+            .export(),
+        });
+      });
+      this.timer = setTimeout(() => {
+        this.scroll();
+      }, this.duration);
+    },
+    onClickIcon(event) {
+      if (this.data.mode === 'closeable') {
+        this.timer && clearTimeout(this.timer);
+        this.timer = null;
+        this.setData({ show: false });
+        this.$emit('close', event.detail);
+      }
+    },
+    onClick(event) {
+      this.$emit('click', event);
+    },
+  },
+});