公告组件横向滚动

src/components/ThemeDataPlant.vue

@@ -60,7 +60,7 @@ export default {
   },
   methods: {
     setHomeBgImg({ backgroundImage, imgRgb }) {
-      // console.log(imgRgb,'-imgRgb')
+      console.log('imgRgb->', imgRgb)
       // this.bacImage = backgroundImage;
       if (this.pageCode != 1) return;
       this.bacImage = "";

static/nativeComponents/Notice/index.json

 {
   "component": true,
   "usingComponents": {
-    "van-icon": "/static/vant/icon/index"
+    "van-icon": "/static/vant/icon/index",
+    "van-notice-bar": "/static/vant/notice-bar/index"
   }
 }

static/nativeComponents/Notice/index.wxml

 <!--static/nativeComponents/Notice/index.wxml-->
 <view class="notice" style="border-radius:{{datas.componentData.borderRadius}}px;background-color:{{datas.componentData.backgroundColor}};margin:{{NoticeMargin}};padding:{{NoticePadding}};height:{{(CommonHeight)}}">
-  <swiper autoplay interval="3000" vertical style="height:{{CommonHeight}}" circular>
+  <swiper autoplay interval="3000" vertical circular>
     <swiper-item wx:for="{{datas.componentData.noticeList}}" wx:key="index">
-      <view class="container" bindtap="onclickHandle" data-index="{{index}}" style="width: 100%;height:{{CommonHeight}}">
+      <view class="container" bindtap="onclickHandle" data-index="{{index}}" style="width: 100%;">
         <block wx:if="{{item.imageUrl||datas.componentData.singleImage}}">
           <view wx:if="{{datas.componentData.styleType===1}}">
             <image class="notice-icon" mode="widthFix" style="width:{{datas.componentData.imageWidth}}px !important;height:{{datas.componentData.imageWidth}}px;" src="{{item.imageUrl}}" />
@@ -12,7 +12,9 @@
           </view>
         </block>
         <view class="notice-content" style="font-size:{{datas.componentData.fontSize}}px;color:{{datas.componentData.fontColor}}">
-          <text class="content">{{item.title}}</text>
+          <van-notice-bar custom-class="vanNoticeBar" scrollable background="{{datas.componentData.backgroundColor}}" >
+            <view class="vanNoticeBar__text" style="font-size:{{datas.componentData.fontSize}}px;color:{{datas.componentData.fontColor}}">{{item.title}}</view>
+          </van-notice-bar>
         </view>
         <van-icon class="notice-arrowhead" name="arrow" color="#000" wx:if="{{!datas.componentData.showArrow}}"></van-icon>
       </view>

static/vant/notice-bar/index.d.ts

+export {};

static/vant/notice-bar/index.js

+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(true);
+                    }
+                });
+            });
+        },
+        scroll(isInit = false) {
+            this.timer && clearTimeout(this.timer);
+            this.timer = null;
+            this.setData({
+                animationData: this.resetAnimation
+                    .translateX(isInit ? 0 : this.wrapWidth)
+                    .step()
+                    .export(),
+            });
+            requestAnimationFrame(() => {
+                this.setData({
+                    animationData: this.animation
+                        .translateX(-this.contentWidth)
+                        .step()
+                        .export(),
+                });
+            });
+            this.timer = setTimeout(() => {
+                this.scroll();
+            }, this.duration + this.data.delay);
+        },
+        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);
+        },
+    },
+});

static/vant/notice-bar/index.json

+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}

static/vant/notice-bar/index.wxml

+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  wx:if="{{ show }}"
+  class="custom-class {{ utils.bem('notice-bar', { withicon: mode, wrapable }) }}"
+  style="{{ computed.rootStyle({ color, backgroundColor, background }) }}"
+  bind:tap="onClick"
+>
+  <van-icon
+    wx:if="{{ leftIcon }}"
+    name="{{ leftIcon }}"
+    class="van-notice-bar__left-icon"
+  />
+  <slot wx:else name="left-icon" />
+
+  <view class="van-notice-bar__wrap">
+    <view class="van-notice-bar__content {{ scrollable === false && !wrapable ? 'van-ellipsis' : '' }}" animation="{{ animationData }}">
+      {{ text }}
+      <slot wx:if="{{ !text }}"></slot>
+    </view>
+  </view>
+
+  <van-icon
+    wx:if="{{ mode === 'closeable' }}"
+    class="van-notice-bar__right-icon"
+    name="cross"
+    catch:tap="onClickIcon"
+  />
+  <navigator
+    wx:elif="{{ mode === 'link' }}"
+    url="{{ url }}"
+    open-type="{{ openType }}"
+  >
+    <van-icon class="van-notice-bar__right-icon" name="arrow" />
+  </navigator>
+  <slot wx:else name="right-icon" />
+</view>

static/vant/notice-bar/index.wxs

+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style({
+    color: data.color,
+    'background-color': data.backgroundColor,
+    background: data.background,
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

static/vant/notice-bar/index.wxss

+@import '../common/index.wxss';.van-notice-bar{align-items:center;background-color:var(--notice-bar-background-color,#fffbe8);color:var(--notice-bar-text-color,#ed6a0c);display:flex;font-size:var(--notice-bar-font-size,14px);height:var(--notice-bar-height,40px);line-height:var(--notice-bar-line-height,24px);padding:var(--notice-bar-padding,0 16px)}.van-notice-bar--withicon{padding-right:40px;position:relative}.van-notice-bar--wrapable{height:auto;padding:var(--notice-bar-wrapable-padding,8px 16px)}.van-notice-bar--wrapable .van-notice-bar__wrap{height:auto}.van-notice-bar--wrapable .van-notice-bar__content{position:relative;white-space:normal}.van-notice-bar__left-icon{align-items:center;display:flex;margin-right:4px;vertical-align:middle}.van-notice-bar__left-icon,.van-notice-bar__right-icon{font-size:var(--notice-bar-icon-size,16px);min-width:var(--notice-bar-icon-min-width,22px)}.van-notice-bar__right-icon{position:absolute;right:15px;top:10px}.van-notice-bar__wrap{flex:1;height:var(--notice-bar-line-height,24px);overflow:hidden;position:relative}.van-notice-bar__content{position:absolute;white-space:nowrap}.van-notice-bar__content.van-ellipsis{max-width:100%}
\ No newline at end of file