bulade-ui 1.0.5 → 1.0.7

package/src/bld-nav-bar/index.wxss

@@ -33,4 +33,14 @@
 .operations.right .operation {
   margin-right: 0;
   margin-left: 12rpx;
+}
+
+.notice-wrap {
+  position: fixed;
+  width: 750rpx;
+  left: 0;
+}
+
+.preifx, .suffix {
+  padding: 0 6rpx;
 }

package/src/bld-notice-bar/index.js

@@ -0,0 +1,69 @@
+Component({
+  externalClasses: ['iclass'],
+  
+  options: {
+    addGlobalClass: true,
+    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+  },
+  
+  properties: {
+    // 延迟播放时长
+    delay: {
+      type: Number,
+      value: 1
+    },
+    // 滚动速度 rpx/s
+    speed: {
+      type: Number,
+      value: 150
+    },
+    // 长度溢出时自动滚动播放
+    scrollable: {
+      type: Boolean,
+      value: true
+    },
+    multiline: {
+      type: Boolean,
+      value: false
+    }
+  },
+
+  data: {
+    delaySec: 0,
+  },
+
+  lifetimes: {
+    ready() {
+      this.getContainerWidth()
+    }
+  },
+
+  methods: {
+    getContainerWidth() {
+      const query = this.createSelectorQuery()
+      query.select('.m-notice-bar').boundingClientRect()
+      query.select('.m-notice-bar__content').boundingClientRect()
+
+      query.exec(res => {
+        const wrapW = wx.getSystemInfoSync().windowWidth  // 容器宽度
+        const noticeW = (res[0].width) * (750 / wrapW)
+        const containW = (res[1].width) * (750 / wrapW)   // 内容宽度（折合为rpx）
+        
+        // 内容宽度小于内容区域宽度，则不滚动
+        if (containW <= noticeW) {
+          this.setData({
+            scrollable: false
+          })
+
+          return;
+        }
+
+        const delaySec = containW / this.data.speed
+
+        this.setData({
+          delaySec: parseInt(delaySec)
+        })
+      })
+    }
+  }
+});

package/src/bld-notice-bar/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/src/bld-notice-bar/index.scss

@@ -0,0 +1,59 @@
+.m-notice-bar__wrap {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  font-size: 28rpx;
+  color: #ed6a0c;
+  background-color: #fffbe8;
+
+  .m-notice-bar {
+    flex: 1;
+    position: relative;
+    padding: 20rpx 16rpx;
+    min-height: 76rpx;
+    line-height: 1.4;
+    overflow: hidden;
+    box-sizing:border-box;
+
+    .m-notice-bar__content {
+      z-index: 0;
+      position: absolute;
+      white-space: nowrap;
+      transform: translateX(0);
+    }
+
+    .is-ellipsis {
+      position: static;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .is-multiline {
+      position: static;
+      overflow: auto;
+      white-space: normal;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  @keyframes once {
+    0% {
+      transform: translateX(0);
+    }
+
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes round {
+    0% {
+      transform: translateX(750rpx);
+    }
+
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+}

package/src/bld-notice-bar/index.wxml

@@ -0,0 +1,30 @@
+<view class="m-notice-bar__wrap iclass">
+
+  <slot name="preifx" />
+
+  <view class="m-notice-bar">
+    <view 
+      class="m-notice-bar__content {{ !scrollable ? 'is-ellipsis' : '' }} {{ multiline ? 'is-multiline':'' }}"
+      style="{{ notice.setAnimation(scrollable, delaySec, speed, delay) }}"
+    >
+      <slot />
+    </view>
+  </view>
+
+  <slot name="suffix" />
+</view>
+
+
+<wxs module="notice">
+  function setAnimation(scrollable, sec, speed, delay) {
+    if(!scrollable || sec === 0) return ''
+
+    return [
+      'animation: once '+ sec +'s linear ' + delay + 's, round '+ (sec + 750 / speed) +'s linear '+ (sec + delay) +'s infinite',
+    ].join(';');
+  }
+
+  module.exports = {
+    setAnimation: setAnimation
+  }
+</wxs>

package/src/bld-notice-bar/index.wxss

@@ -0,0 +1,51 @@
+.m-notice-bar__wrap {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  font-size: 28rpx;
+  color: #ed6a0c;
+  background-color: #fffbe8;
+}
+.m-notice-bar__wrap .m-notice-bar {
+  flex: 1;
+  position: relative;
+  padding: 20rpx 16rpx;
+  min-height: 76rpx;
+  line-height: 1.4;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.m-notice-bar__wrap .m-notice-bar .m-notice-bar__content {
+  z-index: 0;
+  position: absolute;
+  white-space: nowrap;
+  transform: translateX(0);
+}
+.m-notice-bar__wrap .m-notice-bar .is-ellipsis {
+  position: static;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.m-notice-bar__wrap .m-notice-bar .is-multiline {
+  position: static;
+  overflow: auto;
+  white-space: normal;
+  -webkit-overflow-scrolling: touch;
+}
+@keyframes once {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+@keyframes round {
+  0% {
+    transform: translateX(750rpx);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}

package/src/utils/systemInfo.js

@@ -25,7 +25,8 @@ export default () => {
       menuButtonDistance,
       deviceInfo,
       isMobile,
-      isPc
+      isPc,
+      noticeText:''
     }
   } catch (e) {
     console.warn('getSystemInfoSync error')