<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);
? },