小程序两种滚动公告栏的实现方法

悠悠 2023-07-14 15:58 2阅读 0赞

先上效果图：

![20200314225247319.gif][]

![20200314225232161.gif][]

### **横向滚动栏实现** ###

> 网上的几种方案或多或少都有一些问题：  
> 1.setData定时器更新text view的margin-left方法，由于setData的毫秒延时，动画播放起来一卡一卡；  
> 2.纯CSS实现，keyframe等，无法实现循环播放的设置；  
> 3.使用string.length\*font-size的方法获取字符串像素长度，不够精确，多次循环播放后误差会累积变大。  
> 我采用的animate动画方法，实测动画流畅，循环播放无误差。

**wxml**

// wxml
    <view class='notice'>
      <view class="left">
        <text class='iconfont icon-labagonggao voice'></text>
          <view class="left-box">
            <view class="left-text"></view>
            <view class='content-box'>
              <view class='content-text' animation="{
       {animationData}}"><text id="text">{
       {text}}</text></view>
            </view>
            <view class="right-text"></view>
          </view>
      </view>
      <view class="right" bindtap="goApp">
        
        <text class="more">更多应用></text>
      </view>
    </view>

**wxss**

// wxss
    .notice {
      display: flex;
      align-content: center;
      justify-content: space-between;
      padding: 10rpx 25rpx;
      background: #f1f1f1;
    }
    
    .left {
      display: flex;
      align-items: center;
    }
    
    .voice {
      margin-right: 5rpx;
      margin-top: 2rpx;
      color: #fa6016;
    }
    
    .left-box {
      position: relative;
      display: flex;
      align-items: center;
    }
    
    .left-text {
      position: absolute;
      left: 0;
      width: 40rpx;
      height: 100%;
      background: linear-gradient(to left,rgba(241,241,241,0),rgba(241,241,241,1));
      z-index: 99;
    }
    
    .right-text {
      position: absolute;
      right: -1rpx;
      width: 40rpx;
      height: 100%;
      background: linear-gradient(to left,rgba(241,241,241,1),rgba(241,241,241,0));
      z-index: 99;
    }
    
    .content-box {
      overflow: hidden;
      width: 350rpx;
    }
    
    .content-text {
      color: #5e5e5e;
      white-space: nowrap;
      font-size: 28rpx;
    }
    
    .right {
      display: flex;
      align-items: center;
    }
    
    .app {
      height: 48rpx;
    }
    
    .more {
      margin-left: 5rpx;
      color: #aaa;
      font-size: 32rpx;
    }

**js**

// js
      data: {
        text: "1.【评分标准】页可以查看不同年龄段的评分标准，通过首页选择对应的性别、类别和年龄。2.【单项成绩】页包含了详细的单项打分情况及成绩雷达图，直观地看出自己的弱项和强项。",
        animation: null,
        timer: null,
        duration: 0,
        textWidth: 0,
        wrapWidth: 0
      },
      onShow() {
        this.initAnimation(this.data.text)
      },
      onHide() {
        this.destroyTimer()
        this.setData({
          timer: null
        })
      },
      onUnload() {
        this.destroyTimer()
        this.setData({
          timer: null
        })
      },
    destroyTimer() {
        if (this.data.timer) {
          clearTimeout(this.data.timer);
        }
      },
      /**
       * 开启公告字幕滚动动画
       * @param  {String} text 公告内容
       * @return {[type]} 
       */
      initAnimation(text) {
        let that = this
        this.data.duration = 15000
        this.data.animation = wx.createAnimation({
          duration: this.data.duration,
          timingFunction: 'linear'   
        })
        let query = wx.createSelectorQuery()
        query.select('.content-box').boundingClientRect()
        query.select('#text').boundingClientRect()
        query.exec((rect) => {
          that.setData({
            wrapWidth: rect[0].width,
            textWidth: rect[1].width
          }, () => {
            this.startAnimation()
          })
        })
      },
      // 定时器动画
      startAnimation() {
        //reset
        // this.data.animation.option.transition.duration = 0
        const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step({ duration: 0 })
        this.setData({
          animationData: resetAnimation.export()
        })
        // this.data.animation.option.transition.duration = this.data.duration
        const animationData = this.data.animation.translateX(-this.data.textWidth).step({ duration: this.data.duration })
        setTimeout(() => {
          this.setData({
            animationData: animationData.export()
          })
        }, 100)
        const timer = setTimeout(() => {
          this.startAnimation()
        }, this.data.duration)
        this.setData({
          timer
        })
      },

## sipwer滚动方式代码如下所示 ##

swiper默认为横向滚动，vertical为true，则纵向滚动

**wxml**

// wxml
    
    <text class='swiper-notice'>公告：</text>
    <swiper class='swiper-container' autoplay='true' vertical='true' circular='true' interval='2000'>
        <block wx:for='{
       {msgList}}'>
            <navigator url='/pages/notice/notice?title={
       {item.url}}' open-type='navigate'>
                <swiper-item>
                    <view class='swiper-item'>{
       {item.title}}</view>
                </swiper-item>
            </navigator>
        </block>
    </swiper>

**wxss**

// wxss
    /* 公告start */
    .swiper-notice {
      font-size: 28rpx;
      color:    #fa6016;
    }
    
    .swiper-container {
      margin-left: 10rpx;
      width: 400rpx;
      height: 100%;
    }
    
    .swiper-item {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      font-size: 28rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      letter-spacing: 2rpx;
    }
    /* 公告end */

[20200314225247319.gif]: /images/20230529/59a142179a3b44a78bafe8b869e4cc57.png
[20200314225232161.gif]: /images/20230529/ff07c0d79a194ccbbb03dc289bb27c7a.png