小程序兩種滾動(dòng)公告欄的實(shí)現(xiàn)方法

更新時(shí)間：2019年09月17日 09:08:53 作者：superWifi

這篇文章主要介紹了小程序兩種滾動(dòng)公告欄的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

先上效果圖：

橫向滾動(dòng)欄實(shí)現(xiàn)：
網(wǎng)上的幾種方案或多或少都有一些問(wèn)題：
1.setData定時(shí)器更新text view的margin-left方法，由于setData的毫秒延時(shí)，動(dòng)畫(huà)播放起來(lái)一卡一卡；
2.純CSS實(shí)現(xiàn)，keyframe等，無(wú)法實(shí)現(xiàn)循環(huán)播放的設(shè)置；
3.使用string.length*font-size的方法獲取字符串像素長(zhǎng)度，不夠精確，多次循環(huán)播放后誤差會(huì)累積變大。
我采用的animate動(dòng)畫(huà)方法，實(shí)測(cè)動(dòng)畫(huà)流暢，循環(huán)播放無(wú)誤差。

橫向滾動(dòng)代碼如下所示

// 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">
  <!-- <image class="app" mode="aspectFit" src="/assets/images/app.png" style="width:{{widthrpx}}rpx" bindload="imageLoad"></image> -->
  <text class="more">更多應(yīng)用></text>
 </view>
</view>

// 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
 data: {
  text: "1.【評(píng)分標(biāo)準(zhǔn)】頁(yè)可以查看不同年齡段的評(píng)分標(biāo)準(zhǔn)，通過(guò)首頁(yè)選擇對(duì)應(yīng)的性別、類別和年齡。2.【單項(xiàng)成績(jī)】頁(yè)包含了詳細(xì)的單項(xiàng)打分情況及成績(jī)雷達(dá)圖，直觀地看出自己的弱項(xiàng)和強(qiáng)項(xiàng)。",
  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);
  }
 },
 /**
  * 開(kāi)啟公告字幕滾動(dòng)動(dòng)畫(huà)
  * @param {String} text 公告內(nèi)容
  * @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()
   })
  })
 },
 // 定時(shí)器動(dòng)畫(huà)
 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滾動(dòng)方式代碼如下所示

swiper默認(rèn)為橫向滾動(dòng)，vertical為true，則縱向滾動(dòng)

// 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>
<!-- 公告 end -->
// 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 */

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: