第微信小程序?qū)崿F(xiàn)輪播圖標題跑馬燈本文實例為大家分享了微信小程序?qū)崿F(xiàn)輪播圖標題跑馬燈的具體代碼，供大家參考，具體內(nèi)容如下

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

swipercurrent="0"bindchange="onSlideChange"

swiper-itemwx:for='{{carouselImgArr}}'wx:key='index'

image

src='{{item.image}}'

mode='heightFix'

/image

viewwx:if='{{item.title}}'

viewclass="swiper-tit-inner{{(currImgIndex-1)==index'active':''}}"

style='transform:translate({{((currImgIndex-1)==indexcarouselTitLeft:0)+"px"}})'

{{item.title}}

/view

/view

/swiper-item

/swiper

.swiper{

position:relative;

height:430rpx;

padding:0px;

margin:0px;

.swiperimage{

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);

varself=this;

varboxWidth,textWidth;

varquery=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(){

letboxWidth=self.data.windowWidth;//屏幕尺寸寬等于字體box寬，所以這里用屏幕寬替代了query獲取的寬

letscale=boxWidth/375;//以屏幕尺寸為375為標準（375下字體寬約為14），根據(jù)屏幕尺寸計算單個字體的寬度

//不知道為什么用query獲取的textWidth始終等于boxWidth的寬度，不得已只能使用文字長度乘以文字寬度來計算boxWidth。而

lettextWidth=self.data.carouselTitleLength[self.data.currImgIndex-1]*(14*scale);

console.log(scale,boxWidth,textWidth);

if(textWidth-3*scaleboxWidth){//減去3*scale防止textWidth只多出來一點點導致文字左右震蕩

letstayTime=1000;

letendStay=true;

marqueenTimer=setInterval(function(){

letcurrLeft=self.data.carouselTitLeft;

if(stayTime!==0){

stayTime=stayTime-30;

console.log('stay')

}elseif(currLeftboxWidth-textWidth){

self.setData({

carouselTitLeft:currLeft-2

});

}else{

if(endStay){//跑馬燈結(jié)尾停留1s;

endStay=false;

stayTime=1200;

return;

}

self.setData({

carouselTitLeft:0

}