微信小程序公告实例(以组件的形式显示)

1.html:

<view wx:if="{{isShow && notice}}" class="notice" style="{{bgColor}};">

    <view class="notice__text--wrap" style="color: {{color}};">

      <view wx:if="{{scroll}}" class="notice__text notice__text--animate"><text class="notice__text--span">{{notice}}</text><text class="notice__text--span">{{notice}}</text></view>

      <view wx:else class="notice__text"><text class="notice__text--span">{{notice}}</text></view>

    </view>

    <block wx:if="{{close}}">

      <view class="notice__text--overlay" style="background: linear-gradient(to right, {{bgRgba}}, {{bgColor}});"></view>

    </block>

  </view>

2.css:

@keyframes notice {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-50%);

  }

}

.notice {

  display: flex;

  position: relative;

  height: 60rpx;

  padding: 0 24rpx 0 30rpx;

  align-items: center;

  border-top: 2rpx #CFAA73 solid;

  border-bottom: 2rpx #CFAA73 solid;

  box-sizing: content-box;

}

.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: 24rpx;

  line-height: 60rpx;

}

.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: 18rpx;

}

.notice__close {

  margin-left: 20rpx;

  color: #fff;

  font-size: 24rpx;

}

 

3.js:

Component({

  properties: {

    scroll: {

      type: Boolean,

      value: false,

    },

    isShow: {

      type: Boolean,

      value: true,

    },

    notice: {

      type: String,

      value: "",

    },

    bgColor: {

      type: String,

      value: "transparent;", // 通告栏背景色

    },

    color: {

      type: String,

      value: "#fff", // 文字颜色

    },

    showIcon: {

      type: Boolean,

      value: false,

    },

    iconColor: {

      type: String,

      value: "#fff",

    },

    close: {

      type: Boolean,

      value: false,

    },

    bgRgba: {

      type: String,

      value: "rgba(255, 85, 119, 0)", // 背景颜色的rgba形式，a的值为0，配合close使用

    },

  },

  data: {},

  methods: {

    onDismissNotice(event) {

      this.setData({

        isShow: false,

      });

      let detail = event.detail;

      let option = {};

      this.triggerEvent("close", detail, option);

    },

  },

});