微信小程序之公告自右往左滑动_小程序 从右往左公告

在微信小程序中，除了轮播图和广告之外，公告的使用频率也很多，一般都是从右往左移动，今天我就此做了以下的代码记录

这是样式，由于不知道怎么弄动态图片，只能这样展示：

.wxml

<!-- 公告 -->
  <view class="inform">
    <view class="inform-img">
      <image src="/images/horn.png" class="inform-image"></image>
    </view>
    <view class='marquee' style='width:{{marqueeWidth}}rpx;'>
      <view class='marqueeTitle' style="width:{{length}}rpx;transform:translateX( {{marqueeDistance}}rpx);font-size: {{size}}rpx;">{{text}}</view>
    </view>
  </view>

.wxss

.inform{
  width:96%;
  height:70rpx;
  background-color: #F6F6F6;
  margin:10rpx 0;
  margin-left: 2%;
  border-radius: 10rpx;
  display: flex;
  float: left;
  
}
.inform-img{
  width:10%;
  margin-left: 5%;
  text-align: center;
  
}
.inform-image{
  width:60rpx;
  height:60rpx;
  margin-top:5rpx;
}
 
 
.marquee{
  width:80%;
  height: 70rpx;
  overflow: hidden;
  line-height: 70rpx;
}
.marqueeTitle{
  height: 70rpx;
  color:#ff0000;
}

.js

// pages/home/home.js
var app = getApp();
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    
    //公告滚动
 
    text: "通知：即日起在小程序商城消费满一百元可享受免费包邮服务!",
    marqueePace: 1,   //滚动速度
    marqueeDistance: 0,   //初始滚动距离
    size: 28,
    marqueeWidth: 660,
    marqueeMargin: 40,
 
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
 
  },
 
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
 
    var that = this;
    var length = that.data.text.length * that.data.size;     //计算文字的长度
    console.log(length)
    that.setData({
      length: length,
      // 当文字长度小于屏幕长度时，需要增加补白
      marqueeMargin: length < that.data.marqueeWidth ? (that.data.marqueeWidth - length) / 4 : that.data.marqueeMargin
    })
    if (that.data.length > that.data.marqueeWidth) {
      that.run1();
    }
 
  },
  // 标题超过限制宽度时做滚动播放
  run1: function () {
    var that = this;
    var mytime = setInterval(function () {
      if (-that.data.marqueeDistance < that.data.length) {
        that.setData({
          marqueeDistance: that.data.marqueeDistance - that.data.marqueePace,
        })
      } else {
        clearInterval(mytime);
        that.setData({
          marqueeDistance: that.data.marqueeWidth
        });
        that.run1();
      }
    }, 5)
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {
 
  }
})

这只是我写的一个简单的公告样式，如果有哪些地方需要优化，还请各位告知。