微信小程序公告滚动

子组件JS文件

export default Component({
  properties: {
    // 是否显示组件
    isShow: {
      type: Boolean,
      value: true
    },
    // 是否滚动显示
    scroll: {
      type: Boolean,
      value: false
    },
    // 公告文案
    notice: {
      type: String,
      value: ''
    },
    // 背景颜色
    bgColor: {
      type: String,
      value: 'none'
    },
    // 文字颜色
    color: {
      type: String,
      value: '#fff'
    },
    // 是否显示公告Icon
    showIcon: {
      type: Boolean,
      value: false
    },
    // 是否显示关闭按钮
    close: {
      type: Boolean,
      value: false
    },
   	// 公告文字大小
    fontSize: {
      type: String,
      value: '28rpx'
    },
    // 公告滚动速度
    speed: {
      type: Number,
      value: 8
    },
  },
  methods: {
    onDismissNotice(event) {
      this.setData({
        isShow: false
      });
      let detail = event.detail;
      let option = {};
      this.triggerEvent('close', detail, option);
    }
  }
});

子组件wxml文件

<view wx:if="{{isShow && notice}}" class="notice" style="background-color: {{bgColor}};">
	<!-- 公告图标`在这里插入代码片`(可以替换为自己的UI) -->
    <image wx:if="{{showIcon}}" class="notice-tips-img" src="/images/meeting/notice_img.png"></image>
    <view class="notice__text--wrap" style="color: {{color}};">
        <view wx:if="{{scroll}}" class="notice__text notice__text--animate" style="font-size: {{fontSize}};animation: notice {{speed}}s linear infinite;">
            <text class="notice__text--span">{{notice}}</text>
            <text class="notice__text--span">{{notice}}</text>
        </view>
        <view wx:else class="no_scroll_notice_text" style="font-size: {{fontSize}}">
            <text class="">{{notice}}</text>
        </view>
    </view>
    <!-- 关闭按钮(可以替换为自己的UI) -->
    <block wx:if="{{close}}">
		<image wx:if="{{showIcon}}" class="notice-tips-img" src="/images/meeting/notice_close.png"></image>
    </block>
</view>

子组件wxss文件

@keyframes notice {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}
.notice {
  display: flex;
  position: relative;
  align-items: center;
}
.notice__icon {
  display: block;
  width: 36rpx;
  height: 30rpx;
  line-height: 30rpx;
  margin-right: 12rpx;
}
.notice__text {
  display: inline-block;
  margin-right: 30rpx;
  white-space: nowrap;
  font-size: 28rpx;
}
.no_scroll_notice_text{
  font-size: 30rpx;
  white-space: nowrap;
}
.notice__text--wrap {
  flex: 1;
  overflow: hidden;
}
.notice__text--animate {
  animation: notice 8s linear infinite;
}
.notice__text--overlay {
  position: absolute;
  width: 44rpx;
  height: 100%;
  top: 0;
  right: 60rpx;
  z-index: 1;
}
.notice__text--span {
  display: inline-block;
  margin-right: 36rpx;
}
.notice__close {
  margin-left: 20rpx;
  color: #fff;
  font-size: 24rpx;
}
.notice-tips-img{
  width: 41rpx;
  height: 25rpx;
  margin-right: 15rpx;
  margin-top: 4rpx;
}

父组件调用

<notice 
	<!-- 根据文本长度动态设置滚动开关 例如: 文本长度 > 38 -->
  	scroll="{{true}}" 
  	<!-- 根据文本长度动态设置滚动速度 例如: 文本长度 > 80 ? 12 : 8 -->
	speed="{{10}}" 
	<!-- 公告文本 -->
	notice="{{noticeText}}" 
	<!-- 文本字体大小 -->
	fontSize="26rpx" 
	<!-- 是否显示左侧公告图标 -->
	showIcon="{{true}}">
</notice>

帮到你的话，点个赞吧(⊙_⊙)