微信小程序公告组件

最近在编写小程序时遇到需要一个公告组件，于是手写了一个，废话不多少说了，直接上代码

在components中新建组件

这是JS文件

// components/notice/notice.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
      text: {
        type: String,
        observer:function(newVal, oldVal) {
          this.setData({
            text: newVal
          })
        }
      }
  },

  /**
   * 组件的初始数据
   */
  data: {
    text: '',
    marqueePace: 1,//滚动速度
    marqueeDistance: 0,//初始滚动距离
    marquee_margin: 30,
    size:14,
    interval: 20, // 时间间隔
    windowWidth: 0,
    scrollInterval: null
  },

  /**
   * 组件的方法列表
   */
  methods: {
    scrolltxt: function () {
      var that = this;
      var length = that.data.length;//滚动文字的宽度
      var windowWidth = that.data.windowWidth;//屏幕宽度

      if (length > windowWidth){
        var interval = setInterval(function () {
          console.log(interval)
          var maxscrollwidth = length + that.data.marquee_margin;//滚动的最大宽度，文字宽度+间距，如果需要一行文字滚完后再显示第二行可以修改marquee_margin值等于windowWidth即可
          var crentleft = that.data.marqueeDistance;
          if (crentleft < maxscrollwidth) {//判断是否滚动到最大宽度
            that.setData({
              marqueeDistance: crentleft + that.data.marqueePace
            })
          }
          else {
            //console.log("替换");
            that.setData({
              marqueeDistance: 0 // 直接重新滚动
            });
            clearInterval(interval);
            that.scrolltxt();
          }
        }, that.data.interval);
        this.setData({
          scrollInterval: interval
        })
      }
      else{
        that.setData({ marquee_margin:"1000"});//只显示一条不滚动右边间距加大，防止重复显示
      } 
    }  
  },
  pageLifetimes: {
    show: function() {
      var that = this;
      var length = that.data.text.length * that.data.size;//文字长度
      var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
      that.setData({
        length: length,
        windowWidth: windowWidth
      });
      that.scrolltxt();// 第一个字消失后立即从右边出现
  
    },
    hide: function () {
      console.log(this.data.scrollInterval)
      clearInterval(this.data.scrollInterval)
    }
  },
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
      clearInterval(this.data.scrollInterval)
    },
  },
})

配置JSON文件

// components/notice/notice.json
{
  "component": true,
  "usingComponents": {}
}

WXML

<!--components/notice/notice.wxml-->
<scroll-view class="container">
  <view class="scrolltxt">
      <view class="marquee_left_Title">
        <image src="../../images/icon/notice.png" mode="aspectFit" class="marquee_icon" />
        <text class="marquee_icon_text">公告 |</text>
      </view>
    <view class="marquee_box">
      <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)">
        <text>{{text}}</text>
        <text style="margin-right:{{marquee_margin}}px;"></text>
        <text style="margin-right:{{marquee_margin}}px;">{{text}}</text>        
      </view>
    </view>
  </view>
</scroll-view>

WXSS

/* components/notice/notice.wxss */
.container {
  height: 100%;
  width:670rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  border-radius: 45rpx;
  border: 1px solid rgb(255, 149, 0);
 }
.scrolltxt{
  position: relative;
  padding:0 30rpx;
  background: rgba(255, 149, 0, 0.3);
  border-radius: 45rpx;
}
.marquee_box {
  position:relative;
  color:rgb(254, 232, 0);
  height:90rpx;
  display:flex;
  align-items: center;
  overflow:hidden;
  margin-left: 120rpx;
} 

.marquee_left_Title {
  position: absolute;
  left: 30rpx;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.marquee_icon {
  height: 38rpx;
  width: 30rpx;
  margin-right: 8rpx;
  display: inline-block;
}

.marquee_icon_text {
  font-size: 26rpx;
	letter-spacing: 0;
  color: rgb(254, 232, 0);
  height: 30rpx;
  line-height: 30rpx;
}


.marquee_text {
  white-space: nowrap;
  position:absolute;
  width: 90%;
  top:0;
  font-size:14px;
  height:90rpx;
  line-height:90rpx;
}

引入组件

在需要使用的页面中引入，配置.json文件

{
  "usingComponents": {
    "notice": "/components/notice/notice"
  }
}

使用

<notice text="这是一条测试公告，看看效果怎么样，2020年8月12日" />

转载[微信小程序实现文字从右往左无限滚动（类似公告）](https://blog.csdn.net/qq_21041889/article/details/103597647)