欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)輪播圖標(biāo)題跑馬燈

 更新時(shí)間:2022年06月24日 14:19:04   作者:Zmikoo成長(zhǎng)之路  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)輪播圖標(biāo)題跑馬燈,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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模擬鍵盤(pán)打字效果的方法

    JS模擬鍵盤(pán)打字效果的方法

    這篇文章主要介紹了JS模擬鍵盤(pán)打字效果的方法,涉及javascript鼠標(biāo)事件及字符串操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-08-08
  • 原生js簡(jiǎn)單實(shí)現(xià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)以及操作

    學(xué)習(xí)JS中的DOM節(jié)點(diǎn)以及操作

    本篇文章給大家整理了關(guān)于JS中DOM節(jié)點(diǎn)的相關(guān)知識(shí)點(diǎn)以及代碼實(shí)例,有興趣的朋友可以跟著學(xué)習(xí)下。
    2018-04-04
  • Js中FileReader讀取文件內(nèi)容方法詳解(async/await)

    Js中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-11
  • Node.js實(shí)戰(zhàn) 建立簡(jiǎn)單的Web服務(wù)器

    Node.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用法

    詳解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組件的方法

    使用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-03
  • JS采用絕對(duì)定位實(shí)現(xiàn)回到頂部效果完整實(shí)例

    JS采用絕對(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-06
  • Bootstrap模態(tài)框調(diào)用功能實(shí)現(xiàn)方法

    Bootstrap模態(tài)框調(diào)用功能實(shí)現(xiàn)方法

    這篇文章主要介紹了Bootstrap模態(tài)框調(diào)用功能實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧
    2016-09-09
  • gulp-htmlmin壓縮html的gulp插件實(shí)例代碼

    gulp-htmlmin壓縮html的gulp插件實(shí)例代碼

    這篇文章主要介紹了gulp-htmlmin壓縮html的gulp插件實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
    2016-06-06

最新評(píng)論