init

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/noticebar/noticebar.js

@@ -0,0 +1,353 @@
+"use strict";
+const common_vendor = require("../../../../common/vendor.js");
+const uni_modules_nutuiUni_components__constants_event = require("../_constants/event.js");
+const uni_modules_nutuiUni_components__constants_prefix = require("../_constants/prefix.js");
+const uni_modules_nutuiUni_components__hooks_useSelectorQuery = require("../_hooks/useSelectorQuery.js");
+const uni_modules_nutuiUni_components__utils_is = require("../_utils/is.js");
+require("../_utils/env.js");
+const uni_modules_nutuiUni_components__utils_pxCheck = require("../_utils/pxCheck.js");
+const uni_modules_nutuiUni_components__utils_style = require("../_utils/style.js");
+const uni_modules_nutuiUni_components__utils_props = require("../_utils/props.js");
+const noticebarProps = {
+  ...uni_modules_nutuiUni_components__utils_props.commonProps,
+  /**
+   * @description 滚动的方向，可选 `across`、`vertical`
+   */
+  direction: uni_modules_nutuiUni_components__utils_props.makeStringProp("across"),
+  /**
+   * @description 纵向滚动数据列表, `vertical`方向
+   */
+  list: uni_modules_nutuiUni_components__utils_props.makeArrayProp([]),
+  /**
+   * @description 停留时间(毫秒),`vertical`方向
+   */
+  standTime: uni_modules_nutuiUni_components__utils_props.makeNumberProp(1e3),
+  /**
+   * @description 稍复杂的动画，耗能会高,`vertical`方向
+   */
+  complexAm: Boolean,
+  /**
+   * @description 每一个滚动列的高度(px)，注意：在使用 slot 插槽定义滚动单元时，按照实际高度修改此值
+   */
+  height: uni_modules_nutuiUni_components__utils_props.makeNumberProp(40),
+  /**
+   * @description 提示的信息
+   */
+  text: uni_modules_nutuiUni_components__utils_props.makeStringProp(""),
+  /**
+   * @description 是否启用关闭模式
+   */
+  closeMode: Boolean,
+  /**
+   * @description 是否展示左侧图标, 滚动方向为 `across` 生效
+   */
+  leftIcon: uni_modules_nutuiUni_components__utils_props.truthProp,
+  /**
+   * @description 导航栏的文字颜色
+   */
+  customColor: uni_modules_nutuiUni_components__utils_props.makeStringProp(""),
+  /**
+   * @description 导航栏的背景颜色
+   */
+  background: uni_modules_nutuiUni_components__utils_props.makeStringProp(""),
+  /**
+   * @description 延时多少秒
+   */
+  delay: uni_modules_nutuiUni_components__utils_props.makeNumericProp(1),
+  /**
+   * @description 是否可以滚动
+   */
+  scrollable: uni_modules_nutuiUni_components__utils_props.truthProp,
+  /**
+   * @description 滚动速率 (px/s)
+   */
+  speed: uni_modules_nutuiUni_components__utils_props.makeNumberProp(50),
+  /**
+   * @description 是否开启文本换行,`scrollable` 会设置为 `false`
+   */
+  wrapable: Boolean,
+  /**
+   * @description `vertical`方向时`list`属性如果传入数组对象，显示文本的字段名
+   */
+  fieldName: String
+};
+const noticebarEmits = {
+  [uni_modules_nutuiUni_components__constants_event.CLICK_EVENT]: (value) => value instanceof Object || uni_modules_nutuiUni_components__utils_is.isString(value),
+  [uni_modules_nutuiUni_components__constants_event.CLOSE_EVENT]: (evt) => evt instanceof Object || uni_modules_nutuiUni_components__utils_is.isString(evt),
+  acrossEnd: (evt) => evt instanceof Object
+};
+if (!Math) {
+  NutIcon();
+}
+const NutIcon = () => "../icon/icon.js";
+const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-noticebar`;
+const __default__ = common_vendor.defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: "shared"
+  }
+});
+const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
+  ...__default__,
+  props: noticebarProps,
+  emits: noticebarEmits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const instance = common_vendor.getCurrentInstance();
+    const { getSelectorNodeInfo } = uni_modules_nutuiUni_components__hooks_useSelectorQuery.useSelectorQuery(instance);
+    common_vendor.ref(null);
+    common_vendor.ref(null);
+    const state = common_vendor.reactive({
+      wrapWidth: 0,
+      firstRound: true,
+      duration: 0,
+      offsetWidth: 0,
+      showNoticebar: true,
+      animationClass: "",
+      animate: false,
+      scrollList: [],
+      distance: 0,
+      timer: null,
+      keepAlive: false,
+      isCanScroll: null,
+      showNotica: true,
+      id: Math.round(Math.random() * 1e5)
+    });
+    const classes = common_vendor.computed(() => {
+      return uni_modules_nutuiUni_components__utils_style.getMainClass(props, componentName);
+    });
+    const isEllipsis = common_vendor.computed(() => {
+      if (state.isCanScroll == null)
+        return false;
+      else
+        return !state.isCanScroll && !props.wrapable;
+    });
+    const wrapContentClass = common_vendor.computed(() => {
+      return {
+        "nut-noticebar__page-wrap-content": true,
+        "nut-ellipsis": isEllipsis.value,
+        [`content${state.id}`]: true,
+        [state.animationClass]: true
+      };
+    });
+    const barStyle = common_vendor.computed(() => {
+      const style = {};
+      props.customColor && (style.color = props.customColor);
+      props.background && (style.background = props.background);
+      if (props.direction === "vertical")
+        style.height = `${props.height}px`;
+      return style;
+    });
+    const contentStyle = common_vendor.computed(() => {
+      return {
+        animationDelay: `${state.firstRound ? props.delay : 0}s`,
+        animationDuration: `${state.duration}s`,
+        transform: `translateX(${state.firstRound ? 0 : `${state.wrapWidth}px`})`
+      };
+    });
+    const horseLampStyle = common_vendor.computed(() => {
+      let styles = {};
+      if (props.complexAm) {
+        styles = {
+          transform: `translateY(${state.distance}px)`
+        };
+      } else {
+        if (state.animate) {
+          styles = {
+            "transition": `all ${~~(props.height / props.speed / 4)}s`,
+            "margin-top": `-${props.height}px`
+          };
+        }
+      }
+      return styles;
+    });
+    common_vendor.watch(
+      () => props.text,
+      () => {
+        initScrollWrap();
+      }
+    );
+    common_vendor.watch(
+      () => props.list,
+      (value) => {
+        state.scrollList = [].concat(value);
+      }
+    );
+    function initScrollWrap() {
+      if (state.showNoticebar === false)
+        return;
+      setTimeout(() => {
+        if (state.showNoticebar === false)
+          return;
+        let wrapWidth = 0;
+        let offsetWidth = 0;
+        getSelectorNodeInfo(`.wrap${state.id}`).then((rect) => {
+          if (rect.width > 0)
+            wrapWidth = rect.width;
+          getSelectorNodeInfo(`.content${state.id}`).then((rect2) => {
+            if (rect2.width > 0)
+              offsetWidth = rect2.width;
+            state.isCanScroll = props.scrollable == null ? offsetWidth > wrapWidth : props.scrollable;
+            if (state.isCanScroll) {
+              state.wrapWidth = wrapWidth;
+              state.offsetWidth = offsetWidth;
+              state.duration = offsetWidth / props.speed;
+              state.animationClass = "play";
+            } else {
+              state.animationClass = "";
+            }
+          });
+        });
+      }, 100);
+    }
+    function handleClick(event) {
+      emit("click", event);
+    }
+    function onClickIcon(event) {
+      if (props.closeMode)
+        state.showNoticebar = !props.closeMode;
+      emit("close", event);
+    }
+    function onAnimationEnd(event) {
+      state.firstRound = false;
+      emit("acrossEnd", event);
+      setTimeout(() => {
+        state.duration = (state.offsetWidth + state.wrapWidth) / props.speed;
+        state.animationClass = "play-infinite";
+      }, 0);
+    }
+    function startRollEasy() {
+      showhorseLamp();
+      state.timer = setInterval(showhorseLamp, ~~(props.height / props.speed / 4) * 1e3 + props.standTime);
+    }
+    function showhorseLamp() {
+      state.animate = true;
+      setTimeout(() => {
+        state.scrollList.push(state.scrollList[0]);
+        state.scrollList.shift();
+        state.animate = false;
+      }, ~~(props.height / props.speed / 4) * 1e3);
+    }
+    function startRoll() {
+      state.timer = setInterval(() => {
+        const chunk = 100;
+        for (let i = 0; i < chunk; i++)
+          scroll(i, !(i < chunk - 1));
+      }, props.standTime + 100 * props.speed);
+    }
+    function scroll(n, last) {
+      setTimeout(() => {
+        state.distance -= props.height / 100;
+        if (last) {
+          state.scrollList.push(state.scrollList[0]);
+          state.scrollList.shift();
+          state.distance = 0;
+        }
+      }, n * props.speed);
+    }
+    function go(item) {
+      emit(uni_modules_nutuiUni_components__constants_event.CLICK_EVENT, item);
+    }
+    function handleClickIcon() {
+      if (props.closeMode)
+        state.showNoticebar = !props.closeMode;
+      emit(uni_modules_nutuiUni_components__constants_event.CLOSE_EVENT, state.scrollList[0]);
+    }
+    common_vendor.onMounted(() => {
+      if (props.direction === "vertical") {
+        state.scrollList = [].concat(props.list);
+        setTimeout(() => {
+          props.complexAm ? startRoll() : startRollEasy();
+        }, props.standTime);
+      } else {
+        initScrollWrap();
+      }
+    });
+    common_vendor.onActivated(() => {
+      if (state.keepAlive)
+        state.keepAlive = false;
+    });
+    common_vendor.onDeactivated(() => {
+      state.keepAlive = true;
+      clearInterval(state.timer);
+    });
+    common_vendor.onUnmounted(() => {
+      clearInterval(state.timer);
+    });
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: _ctx.direction === "across"
+      }, _ctx.direction === "across" ? common_vendor.e({
+        b: _ctx.leftIcon
+      }, _ctx.leftIcon ? {
+        c: common_vendor.p({
+          name: "notice",
+          size: "16px"
+        })
+      } : {}, {
+        d: common_vendor.t(_ctx.text),
+        e: common_vendor.n(wrapContentClass.value),
+        f: common_vendor.s(contentStyle.value),
+        g: common_vendor.o(
+          //@ts-ignore
+          (...args) => onAnimationEnd && onAnimationEnd(...args)
+        ),
+        h: common_vendor.o(
+          //@ts-ignore
+          (...args) => onAnimationEnd && onAnimationEnd(...args)
+        ),
+        i: common_vendor.n(`nut-noticebar__page-wrap wrap${state.id}`),
+        j: _ctx.closeMode || _ctx.$slots.rightIcon
+      }, _ctx.closeMode || _ctx.$slots.rightIcon ? {
+        k: common_vendor.p({
+          name: "circle-close"
+        }),
+        l: common_vendor.o(
+          //@ts-ignore
+          (...args) => onClickIcon && onClickIcon(...args)
+        )
+      } : {}, {
+        m: _ctx.closeMode ? 1 : "",
+        n: _ctx.closeMode ? 1 : "",
+        o: _ctx.wrapable ? 1 : "",
+        p: !state.showNoticebar ? 1 : "",
+        q: common_vendor.s(barStyle.value),
+        r: common_vendor.o(
+          //@ts-ignore
+          (...args) => handleClick && handleClick(...args)
+        )
+      }) : {}, {
+        s: state.scrollList.length > 0 && _ctx.direction === "vertical" && state.showNoticebar
+      }, state.scrollList.length > 0 && _ctx.direction === "vertical" && state.showNoticebar ? common_vendor.e({
+        t: common_vendor.f(state.scrollList, (item, index, i0) => {
+          return {
+            a: common_vendor.t(props.fieldName && common_vendor.unref(uni_modules_nutuiUni_components__utils_is.isObject)(item) ? item[props.fieldName] : item),
+            b: index,
+            c: common_vendor.o(($event) => go(item), index)
+          };
+        }),
+        v: common_vendor.unref(uni_modules_nutuiUni_components__utils_pxCheck.pxCheck)(_ctx.height),
+        w: common_vendor.unref(uni_modules_nutuiUni_components__utils_pxCheck.pxCheck)(_ctx.height),
+        x: common_vendor.s(horseLampStyle.value),
+        y: _ctx.closeMode
+      }, _ctx.closeMode ? {
+        z: common_vendor.p({
+          name: "circle-close",
+          ["custom-color"]: _ctx.customColor,
+          size: "11px"
+        })
+      } : {}, {
+        A: common_vendor.o(($event) => handleClickIcon()),
+        B: common_vendor.s(barStyle.value)
+      }) : {}, {
+        C: common_vendor.n(classes.value),
+        D: common_vendor.s(_ctx.customStyle)
+      });
+    };
+  }
+});
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/noticebar/noticebar.js.map

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/noticebar/noticebar.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "nut-icon": "../icon/icon"
+  }
+}

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/noticebar/noticebar.wxml

@@ -0,0 +1 @@
+<view class="{{C}}" style="{{D}}"><view wx:if="{{a}}" class="{{['nut-noticebar__page', m && 'nut-noticebar__page--withicon', n && 'nut-noticebar__page--close', o && 'nut-noticebar__page--wrapable', p && 'nut-hidden']}}" style="{{q}}" bindtap="{{r}}"><view wx:if="{{b}}" class="nut-noticebar__page-lefticon"><block wx:if="{{$slots.leftIcon}}"><slot name="leftIcon"></slot></block><block wx:else><nut-icon wx:if="{{c}}" u-i="762e8852-0" bind:__l="__l" u-p="{{c}}"/></block></view><view ref="wrap" class="{{i}}"><view ref="content" class="{{e}}" style="{{f}}" bindanimationend="{{g}}" bind:webkit-animation-end="{{h}}"><block wx:if="{{$slots.d}}"><slot></slot></block><block wx:else>{{d}}</block></view></view><view wx:if="{{j}}" class="nut-noticebar__page-righticon" catchtap="{{l}}"><block wx:if="{{$slots.rightIcon}}"><slot name="rightIcon"></slot></block><block wx:else><nut-icon wx:if="{{k}}" u-i="762e8852-1" bind:__l="__l" u-p="{{k}}"/></block></view></view><view wx:if="{{s}}" class="nut-noticebar__vertical" style="{{B}}"><view class="nut-noticebar__vertical-list" style="{{x}}"><view wx:for="{{t}}" wx:for-item="item" wx:key="b" class="nut-noticebar__vertical-item" style="{{'height:' + v + ';' + ('line-height:' + w)}}" bindtap="{{item.c}}">{{item.a}}</view></view><view class="go" bindtap="{{A}}"><block wx:if="{{$slots.rightIcon}}"><slot name="rightIcon"></slot></block><block wx:else><nut-icon wx:if="{{y}}" u-i="762e8852-2" bind:__l="__l" u-p="{{z}}"/></block></view></view></view>

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/noticebar/noticebar.wxss

@@ -0,0 +1,174 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+/* stylelint-disable keyframes-name-pattern */
+.nut-theme-dark .nut-noticebar__page {
+  color: var(--nut-dark-color, var(--nut-white, #fff));
+  background: var(--nut-dark-background2, #1b1b1b);
+}
+.nut-theme-dark .nut-noticebar__vertical {
+  color: var(--nut-dark-color, var(--nut-white, #fff));
+}
+.nut-noticebar__page {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--nut-noticebar-across-height, 40px);
+  padding: var(--nut-noticebar-box-padding, 0 16px);
+  font-size: var(--nut-noticebar-font-size, 14px);
+  color: var(--nut-noticebar-color, #d9500b);
+  background: var(--nut-noticebar-background, #fbf8dc);
+}
+.nut-noticebar__page--wrapable {
+  height: auto;
+  padding: var(--nut-noticebar-wrapable-padding, 16px);
+}
+.nut-noticebar__page--wrapable .nut-noticebar__page-wrap {
+  height: auto !important;
+}
+.nut-noticebar__page--wrapable .nut-noticebar__page-wrap .nut-noticebar__page-wrap-content {
+  position: relative;
+  word-wrap: break-word;
+  white-space: normal;
+}
+.nut-noticebar__page .nut-noticebar__page--withicon {
+  position: relative;
+  padding-right: 40px;
+}
+.nut-noticebar__page .nut-noticebar__page-lefticon {
+  display: flex;
+  align-items: center;
+  margin: var(--nut-noticebar-lefticon-margin, 0 10px);
+  background-size: 100% 100%;
+}
+.nut-noticebar__page .nut-noticebar__page-righticon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: var(--nut-noticebar-righticon-margin, 0 10px);
+}
+.nut-noticebar__page .nut-noticebar__page-wrap {
+  position: relative;
+  display: flex;
+  flex: 1;
+  height: var(--nut-noticebar-across-line-height, 24px);
+  overflow: hidden;
+  line-height: var(--nut-noticebar-across-line-height, 24px);
+}
+.nut-noticebar__page .nut-noticebar__page-wrap-content {
+  position: absolute;
+  white-space: nowrap;
+}
+.nut-noticebar__page .nut-noticebar__page-wrap-content.nut-ellipsis {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nut-noticebar__page .play {
+  animation: nut-notice-bar-play linear both running;
+}
+.nut-noticebar__page .play-infinite {
+  animation: nut-notice-bar-play-infinite linear infinite both running;
+}
+.nut-noticebar__page .play-vertical {
+  animation: nut-notice-bar-play-vertical linear infinite both running;
+}
+@keyframes nut-notice-bar-play {
+to {
+    transform: translate3d(-100%, 0, 0);
+}
+}
+@keyframes nut-notice-bar-play-infinite {
+to {
+    transform: translateX(-100%);
+}
+}
+@keyframes nut-notice-bar-play-vertical {
+to {
+    transform: translateY(var(--nut-noticebar-across-height, 40px));
+}
+}
+.nut-noticebar__vertical {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  height: var(--nut-noticebar-across-height, 40px);
+  padding: var(--nut-noticebar-box-padding, 0 16px);
+  overflow: hidden;
+  font-size: var(--nut-noticebar-font-size, 14px);
+  color: var(--nut-noticebar-color, #d9500b);
+  background: var(--nut-noticebar-background, #fbf8dc);
+}
+.nut-noticebar__vertical .nut-noticebar__vertical-list {
+  display: block;
+  flex: 1;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+.nut-noticebar__vertical .nut-noticebar__vertical-list .nut-noticebar__vertical-item {
+  width: 100%;
+  height: var(--nut-noticebar-across-height, 40px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nut-noticebar__vertical .nut-noticebar-custom-item {
+  position: absolute;
+  top: 999999px;
+}
+.nut-noticebar__vertical .go {
+  display: flex;
+  align-self: center;
+  margin: var(--nut-noticebar-righticon-margin, 0 10px);
+}