微信小程序?qū)崿F(xiàn)輪播圖標(biāo)題跑馬燈
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)輪播圖標(biāo)題跑馬燈的具體代碼,供大家參考,具體內(nèi)容如下
微信小程序做輪播圖,輪播圖下的標(biāo)題如果不長(zhǎng)不需要跑馬燈效果,過(guò)長(zhǎng)的無(wú)法顯示全的則添加跑馬燈效果
<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:'標(biāo)題', ?? ?},{ ?? ??? ?image:'../../image/1.png',title:'標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題', ?? ?},{ ?? ??? ?image:'../../image/1.png',title:'標(biāo)題', ?? ?} ], ? ? carouselTitleLength:[2,18,2],// 輪播圖標(biāo)題的文字長(zhǎng)度 ? ? 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為標(biāo)準(zhǔn)(375下字體寬約為14),根據(jù)屏幕尺寸計(jì)算單個(gè)字體的寬度 ? ? // 不知道為什么用query 獲取的textWidth始終等于boxWidth的寬度,不得已只能使用文字長(zhǎng)度乘以文字寬度來(lái)計(jì)算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只多出來(lái)一點(diǎn)點(diǎn)導(dǎo)致文字左右震蕩 ? ? ? ? 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) {// 跑馬燈結(jié)尾停留1s; ? ? ? ? ? ? ? endStay = false; ? ? ? ? ? ? ? stayTime = 1200; ? ? ? ? ? ? ? return; ? ? ? ? ? ? } ? ? ? ? ? ? self.setData({ ? ? ? ? ? ? ? carouselTitLeft: 0 ? ? ? ? ? ? }); ? ? ? ? ? ? stayTime = 1200;// 回到跑馬燈開(kāi)頭再停留1s; ? ? ? ? ? ? endStay = true; ? ? ? ? ? } ? ? ? ? },100) ? ? ? } ? ? },100); ? },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
原生js簡(jiǎn)單實(shí)現(xiàn)放大鏡特效
這篇文章主要為大家詳細(xì)介紹了原生js簡(jiǎn)單實(shí)現(xiàn)放大鏡特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05學(xué)習(xí)JS中的DOM節(jié)點(diǎn)以及操作
本篇文章給大家整理了關(guān)于JS中DOM節(jié)點(diǎn)的相關(guān)知識(shí)點(diǎn)以及代碼實(shí)例,有興趣的朋友可以跟著學(xué)習(xí)下。2018-04-04Js中FileReader讀取文件內(nèi)容方法詳解(async/await)
這篇文章主要給大家介紹了關(guān)于Js中FileReader讀取文件內(nèi)容(async/await)的相關(guān)資料,FileReader是前端進(jìn)行文件處理的一個(gè)重要的Api,特別是在對(duì)圖片的處理上,如果你想知道圖片的處理原理,你就永遠(yuǎn)不可能繞過(guò)它,需要的朋友可以參考下2023-11-11Node.js實(shí)戰(zhàn) 建立簡(jiǎn)單的Web服務(wù)器
本章我們同樣通過(guò)實(shí)戰(zhàn)的演練,利用Node.js建立一個(gè)簡(jiǎn)單的Web服務(wù)器2012-03-03詳解JavaScript中typeof與instanceof用法
typeof用以獲取一個(gè)變量或者表達(dá)式的類型而instanceof用于判斷一個(gè)變量是否某個(gè)對(duì)象的實(shí)例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-10-10使用getBoundingClientRect方法實(shí)現(xiàn)簡(jiǎn)潔的sticky組件的方法
本文介紹這種組件的實(shí)現(xiàn)思路,并提供一個(gè)同時(shí)支持將sticky元素固定在頂部或底部的具體實(shí)現(xiàn),由于這種組件在網(wǎng)站中非常常見(jiàn),所以有必要掌握它的實(shí)現(xiàn)方式,以便在有需要的時(shí)候基于它的思路寫(xiě)出功能更多的組件出來(lái)2016-03-03JS采用絕對(duì)定位實(shí)現(xiàn)回到頂部效果完整實(shí)例
這篇文章主要介紹了JS采用絕對(duì)定位實(shí)現(xiàn)回到頂部效果,以完整實(shí)例形式分析了JS定位到頁(yè)面頂部功能的實(shí)現(xiàn)方法,涉及javascript動(dòng)態(tài)操作頁(yè)面元素與屬性的相關(guān)技巧,需要的朋友可以參考下2016-06-06Bootstrap模態(tài)框調(diào)用功能實(shí)現(xiàn)方法
這篇文章主要介紹了Bootstrap模態(tài)框調(diào)用功能實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-09-09gulp-htmlmin壓縮html的gulp插件實(shí)例代碼
這篇文章主要介紹了gulp-htmlmin壓縮html的gulp插件實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-06-06