技術標籤：微信小程式技術小程式前端

微信小程式 – 通知訊息橫向滾動 – 無縫連線1

wxml

<view class="notice">
    <view class="left"><view>通知公告</view></view>
    <view class="right scrollx">
      <view class="notice-text-box">
        <text class="notice-text {{ismove? 'animte-move':''}}" style='--width--:{{-width/2}}px; --time--:{{time}};margin-left:{{marginLeft}}px;'>
          <slot name="before"></slot>
        </text>
        <text class="notice-text {{ismove? 'animte-move':''}}" style='--width--:{{-width/2}}px; --time--:{{time}};margin-left:{{marginLeft}}px;'>
          <slot name="after"></slot>
        </text>
      </view>
    </view>
  </view>



 

JS

// pages/component/newsScroll/newsScroll.js
Component({
  options: {
    multipleSlots: true
  },
  /**
   * 元件的屬性列表
   */
  properties: {
    marginLeft:{
      type:Number,
      value:60
    }
  },

  /**
   * 元件的初始資料
   */
  data: {
    width: 0,
    ismove: false,
    time: 0,
  },
  ready() {
    this.getDom()
  },
  /**
   * 元件的方法列表
   */
  methods: {
    getDom() {
      let that = this
      let windowWidth = ""
      wx.getSystemInfo({
        success(res) {
          windowWidth = res.windowWidth
        }
      });
      const query = wx.createSelectorQuery().in(this);
      query.select('.notice-text-box').boundingClientRect().exec((res) => {
        console.log(' res[0].width', res[0].width);
        that.setData({
          width: res[0].width, //動態獲取通知公告的寬度
          ismove: true,
          time: (((res[0].width) / windowWidth) * 3).toFixed(2) + 's' //設定通知公告滾動的完需要的時間
        })
      });
    }
  }

})

 

css

.notice{
  width:100%;
  height:68rpx;
  background:rgba(255,255,255,1);
  opacity:1;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content:flex-start;
  align-items:center;
  padding-left: 20rpx;
  padding-right: 20rpx;
  box-sizing: border-box;
}
.notice .left{
  width: 128rpx;
  height: 44rpx;
  background:linear-gradient(180deg,rgba(225,44,44,1) 0%,rgba(175,19,19,1) 100%);
  transform:skewX(-15deg);
  border-radius: 8rpx;
  padding-left: 16rpx;
  padding-right: 16rpx;
  position: relative;
  top: 0;
  left: 0;
}
.notice .left view{
  width: 96rpx;
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) skewX(15deg);
  font-size:24rpx;
  color: #fff;
  white-space: nowrap;
}
.notice .right{
  position: relative;
  top: 0;
  left: 0;
  height:34rpx;
  font-size:24rpx;
  line-height:34rpx;
  color:rgba(51,51,51,1);
  margin-left: 10rpx;
  overflow: hidden;
}
.scrollx{
  width: 100%;
  white-space: nowrap;
}
.notice-text-box{
  position: absolute;
  top: 0;
  left: 0;
  height: 34rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  overflow: hidden;
}

.animte-move{
  animation: move var(--time--) linear infinite;
}
@keyframes move{
  0%{
    /* margin-left: 300px; */
    transform: translateX(0);
  }
  100%{
    transform: translateX(var(--width--));
  }
}
.notice-text text{
  padding-left: 10rpx;
  padding-right: 10rpx;
}