微信小程序怎么實現輪播圖標題跑馬燈

這篇“微信小程序怎么實現輪播圖標題跑馬燈”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序怎么實現輪播圖標題跑馬燈”文章吧。

微信小程序做輪播圖，輪播圖下的標題如果不長不需要跑馬燈效果，過長的無法顯示全的則添加跑馬燈效果

<swiper class="swiper" current="0" bindchange="onSlideChange">
    <swiper-item wx:for='{{carouselImgArr}}' wx:key='index'>
      <image 
          src='{{item.image}}' 
          mode='heightFix'
          class="swiper-item-img">
      </image>
      <view class="swiper-item-tit" wx:if='{{item.title}}'>
        <view class="swiper-tit-inner {{(currImgIndex - 1) == index ? 'active' : ''}}" 
              style='transform:translate({{ ((currImgIndex - 1) == index ? carouselTitLeft : 0) + "px" }})'>
          {{item.title}}
        </view>
      </view>
    </swiper-item>
</swiper>

.swiper{
  position: relative;
  height: 430rpx;
  padding: 0px;
  margin: 0px;
}
.swiper image{
  height: 430rpx;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}
.swiper-item-tit{
  position: absolute;
  bottom: 0rpx;
  left:0rpx;
  z-index: 2;
  height: 80rpx;
  line-height: 80rpx;
  color:#fff;
  width:100%;
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  background-color: rgba(0,0,0,0.5);
}
.swiper-item-tit .swiper-tit-inner{
  text-align: center;
  white-space: nowrap;
}

data: {
    carouselImgArr: [{
        image:'../../image/1.png',title:'標題',
    },{
        image:'../../image/1.png',title:'標題標題標題標題標題標題標題標題標題',
    },{
        image:'../../image/1.png',title:'標題',
    } ],
    carouselTitleLength:[2,18,2],// 輪播圖標題的文字長度
    carouselTitLeft:0,
    currImgIndex: 1,
    windowWidth: wx.getSystemInfoSync().windowWidth
  },
onSlideChange(e) {
    this.setData({
      currImgIndex: e.detail.current + 1,
      carouselTitLeft: 0
    });
    this.initMarqueen();
  },
  initMarqueen() {
    clearInterval(marqueenTimer);
    var self = this;
    var boxWidth,textWidth;
    var query = wx.createSelectorQuery();
    // query.select('.swiper-item-tit').fields({size:true},function(res){
    //   boxWidth = res.width;
    // }).exec();
    // query.select('.active').fields({size:true},function(res){
    //   textWidth = res.width;
    // }).exec();
    setTimeout(function(){
      let boxWidth = self.data.windowWidth;// 屏幕尺寸寬等于字體box寬，所以這里用屏幕寬替代了query獲取的寬
      let scale = boxWidth / 375;// 以屏幕尺寸為375為標準（375下字體寬約為14），根據屏幕尺寸計算單個字體的寬度
    // 不知道為什么用query 獲取的textWidth始終等于boxWidth的寬度，不得已只能使用文字長度乘以文字寬度來計算boxWidth。而
      let textWidth = self.data.carouselTitleLength[self.data.currImgIndex - 1] * (14*scale);
      console.log(scale,boxWidth,textWidth);
      if (textWidth - 3*scale > boxWidth) {// 減去3*scale防止textWidth只多出來一點點導致文字左右震蕩
        let stayTime = 1000;
        let endStay = true;
        marqueenTimer = setInterval(function(){
          let currLeft = self.data.carouselTitLeft;
          if (stayTime !== 0) {
            stayTime = stayTime - 30;
            console.log('stay')
          } else if (currLeft > boxWidth - textWidth) {
            self.setData({
              carouselTitLeft: currLeft - 2
            });
          } else {
            if (endStay) {// 跑馬燈結尾停留1s;
              endStay = false;
              stayTime = 1200;
              return;
            }
            self.setData({
              carouselTitLeft: 0
            });
            stayTime = 1200;// 回到跑馬燈開頭再停留1s;
            endStay = true;
          }
        },100)
      }
    },100);
  },

以上就是關于“微信小程序怎么實現輪播圖標題跑馬燈”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。