feat(notice-bar): update props

Tencent · Apr 12, 2022 · cecaff2 · cecaff2
1 parent 2f22125
commit cecaff2
Show file tree

Hide file tree

Showing 12 changed files with 862 additions and 6 deletions.
diff --git a/example/app.json b/example/app.json
@@ -54,7 +54,8 @@
     "pages/search/search",
     "pages/home/navigateFail/navigateFail",
     "pages/navbar/navbar",
-    "pages/date-time-picker/date-time-picker"
+    "pages/date-time-picker/date-time-picker",
+    "pages/notice-bar/notice-bar"
   ],
   "usingComponents": {
     "t-demo": "../../components/demo-block/index",
@@ -118,7 +119,8 @@
     "t-image": "tdesign-miniprogram/image/image",
     "t-search": "tdesign-miniprogram/search/search",
     "t-navbar": "tdesign-miniprogram/navbar/navbar",
-    "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker"
+    "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker",
+    "t-notice-bar": "tdesign-miniprogram/notice-bar/notice-bar"
   },
   "window": {
     "backgroundTextStyle": "light",

diff --git a/example/pages/home/data/display.ts b/example/pages/home/data/display.ts
@@ -78,6 +78,10 @@ const display = {
       name: 'Sticky',
       label: '吸顶',
     },
+    {
+      name: 'NoticeBar',
+      label: '公告栏',
+    },
   ],
 };
 

diff --git a/example/pages/notice-bar/notice-bar.json b/example/pages/notice-bar/notice-bar.json
@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "NoticeBar",
+  "navigationBarBackgroundColor": "#fff",
+  "usingComponents": {}
+}
diff --git a/example/pages/notice-bar/notice-bar.less b/example/pages/notice-bar/notice-bar.less
@@ -0,0 +1,27 @@
+.demo {
+  .demo-section__desc {
+    margin: 0 32rpx 32rpx;
+  }
+
+  .box {
+    margin-bottom: 32rpx;
+
+    .t-class {
+      color: #ffffff;
+      background-color: #a6a6a6;
+    }
+    .extre {
+      display: inline-block;
+      font-weight: 700;
+      border-bottom: 2rpx solid;
+    }
+
+    .swiper-wrap {
+      width: 494rpx;
+      display: inline-block;
+      .swiper {
+        height: 44rpx;
+      }
+    }
+  }
+}
diff --git a/example/pages/notice-bar/notice-bar.ts b/example/pages/notice-bar/notice-bar.ts
@@ -0,0 +1,60 @@
+const swiperList = [
+  {
+    message: 'swiper item0 描述信息',
+  },
+  {
+    message: 'swiper item1 描述信息',
+  },
+  {
+    message: 'swiper item2 描述信息',
+  },
+  {
+    message: 'swiper item3 描述信息',
+  },
+];
+Page({
+  data: {
+    visible: true,
+    marquee1: {
+      speed: 80,
+      loop: -1,
+      delay: 0,
+    },
+    marquee2: {
+      speed: 60,
+      loop: -1,
+      delay: 0,
+    },
+    swiperList,
+  },
+
+  onReady() {
+    /**
+     * notice-bar组件的滚动动画依赖自身样式数据。
+     * 页面中有多个滚动notice-bar时，建议用wx:if手动控制，需要显示时渲染组件，保证组件能够成功初始化。
+     * */
+  },
+
+  handleExtreText(e) {
+    console.log('click extre text', e);
+  },
+
+  handleSuffixIconCloseDemo(e) {
+    console.log('click suffix-icon close', e);
+    this.setData({
+      visible: false,
+    });
+  },
+
+  handleSuffixIconClose(e) {
+    console.log('click suffix-icon close', e);
+  },
+
+  handleSuffixIconLink(e) {
+    console.log('click suffix-icon link', e);
+  },
+
+  clickDetail() {
+    console.log('click detail text');
+  },
+});
diff --git a/example/pages/notice-bar/notice-bar.wxml b/example/pages/notice-bar/notice-bar.wxml
@@ -0,0 +1,156 @@
+<view class="demo">
+  <view class="demo-title">NoticeBar 公告栏</view>
+  <view class="demo-desc"> 在导航栏下方，用于给用户显示提示消息 </view>
+  <t-demo title="01 类型" desc="基础静态公告栏">
+    <view class="box">
+      <t-notice-bar visible="{{true}}" icon="{{false}}" content="提示文字描述提示文字描述提示文字描述" duration="0">
+      </t-notice-bar>
+    </view>
+
+    <view class="demo-section__desc">带图标静态公告栏</view>
+    <view class="box">
+      <t-notice-bar visible="{{true}}" duration="0" icon="{{false}}" content="提示文字描述提示文字描述提示文字描述">
+        <view slot="icon">
+          <t-icon name="error-circle-filled"> </t-icon>
+        </view>
+      </t-notice-bar>
+    </view>
+
+    <view class="demo-section__desc">带操作公告栏</view>
+    <view class="box">
+      <t-notice-bar
+        visible="{{true}}"
+        duration="0"
+        suffixIcon="chevron-right"
+        content="提示文字描述提示文字描述提示文字描述"
+        bind:suffix-icon="handleSuffixIconLink"
+      ></t-notice-bar>
+    </view>
+    <view class="box">
+      <t-notice-bar
+        visible="{{visible}}"
+        duration="0"
+        suffixIcon="close"
+        bind:extre="handleExtreText"
+        bind:suffix-icon="handleSuffixIconCloseDemo"
+      >
+        <view slot="content"> 提示文字描述提示文字描述 </view>
+        <view slot="extre" class="extre">详情</view>
+      </t-notice-bar>
+    </view>
+
+    <view class="demo-section__desc">滚动公告栏</view>
+    <view class="box">
+      <t-notice-bar
+        visible="{{true}}"
+        icon="{{false}}"
+        duration="0"
+        marquee="{{marquee1}}"
+        content="提示文字描述提示文字描述提示文字描述提示文字描述文"
+      ></t-notice-bar>
+    </view>
+    <view class="box">
+      <t-notice-bar
+        visible="{{true}}"
+        duration="0"
+        marquee="{{marquee2}}"
+        content="提示文字描述提示文字描述提示文字描述提示文字描述文"
+      ></t-notice-bar>
+    </view>
+
+    <!-- solt自定义content实现垂直滚动 -->
+    <!-- t-swiper不支持无缝衔接，暂时使用swiper，后期更换。 -->
+    <!-- <view class="box">
+      <t-notice-bar
+        visible="{{true}}"
+        duration="0"
+      >
+        <view slot="content"  class="swiper-wrap">
+          <swiper class="swiper" vertical="true"	circular="true" autoplay="true"  current="0" >
+            <swiper-item wx:for="{{swiperList}}" wx:key="index" class="swiper-item">
+              {{item.message}}
+            </swiper-item>
+          </swiper>
+        </view>
+      </t-notice-bar>
+    </view> -->
+
+    <view class="demo-section__desc">自定义样式</view>
+    <view class="box">
+      <t-notice-bar
+        visible="{{true}}"
+        duration="0"
+        icon="sound"
+        content="提示文字描述提示文字描述提示文字描述"
+        t-class="t-class"
+      ></t-notice-bar>
+    </view>
+  </t-demo>
+  <t-demo title="02 状态" desc="多行文字消息栏">
+    <view class="box">
+      <t-notice-bar visible="{{true}}" duration="0" content="默认状态公告栏默认状态公告栏"></t-notice-bar>
+    </view>
+    <view class="box">
+      <t-notice-bar
+        visible="{{true}}"
+        duration="0"
+        theme="success"
+        content="成功状态公告栏成功状态公告栏"
+      ></t-notice-bar>
+    </view>
+    <view class="box">
+      <t-notice-bar
+        visible="{{true}}"
+        duration="0"
+        theme="warning"
+        content="警示状态公告栏警示状态公告栏"
+      ></t-notice-bar>
+    </view>
+    <view class="box">
+      <t-notice-bar visible="{{true}}" duration="0" theme="error" content="错误状态公告栏错误状态公告栏"></t-notice-bar>
+    </view>
+
+    <view class="demo-section__desc">自定义样式</view>
+    <view class="box">
+      <t-notice-bar
+        visible="{{true}}"
+        duration="0"
+        icon="{{false}}"
+        wrapable
+        content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
+      ></t-notice-bar>
+    </view>
+    <view class="box">
+      <t-notice-bar
+        visible="{{true}}"
+        duration="0"
+        align="top"
+        wrapable
+        content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
+      ></t-notice-bar>
+    </view>
+    <view class="box">
+      <t-notice-bar
+        visible="{{true}}"
+        duration="0"
+        align="top"
+        suffixIcon="chevron-right"
+        bind:suffix-icon="handleSuffixIconLink"
+        wrapable
+        content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"
+      ></t-notice-bar>
+    </view>
+    <view class="box">
+      <!-- slot实现自定义content内容 -->
+      <t-notice-bar visible="{{true}}" duration="0" align="top" wrapable bind:suffix-icon="handleSuffixIconClose">
+        <view slot="content">
+          提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述
+          <view class="extre" bind:tap="clickDetail"> 详情 </view>
+        </view>
+        <view slot="suffixIcon">
+          <t-icon name="close"></t-icon>
+        </view>
+      </t-notice-bar>
+    </view>
+  </t-demo>
+</view>
diff --git a/src/common/utils.ts b/src/common/utils.ts
@@ -58,6 +58,16 @@ export const requestAnimationFrame = function (cb: Function) {
     });
 };
 
+export const getRect = function (context: any, selector: string) {
+  return new Promise<WechatMiniprogram.BoundingClientRectCallbackResult>((resolve) => {
+    wx.createSelectorQuery()
+      .in(context)
+      .select(selector)
+      .boundingClientRect()
+      .exec((rect = []) => resolve(rect[0]));
+  });
+};
+
 const isDef = function (value: any): boolean {
   return value !== undefined && value !== null;
 };
@@ -80,10 +90,7 @@ export const addUnit = function (value?: string | number): string | undefined {
  * @param maxCharacter 规定最大字符串长度
  * @returns 当没有传入maxCharacter时返回字符串字符长度，当传入maxCharacter时返回截取之后的字符串和长度。
  */
-export const getCharacterLength = (
-  str: string,
-  maxCharacter?: number,
-): { length: number; characters: string } => {
+export const getCharacterLength = (str: string, maxCharacter?: number): { length: number; characters: string } => {
   const hasMaxCharacter = typeof maxCharacter === 'number';
   if (!str || str.length === 0) {
     if (hasMaxCharacter) {