本文實例為大家分享了微信小程序實現無縫滾動的具體代碼，供大家參考，具體內容如下
wxml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<view class="wrap-item" style='transform:translateX({{posLeft2}}px)'> <view class="messages-scroll firstScroll"> <view class="{{index == 0?'yanse items':'items'}}" wx:for="{{zhuli}}" wx:key="index"> <image wx:if="{{index == 0}}" src="../../images/xiangq_yonhu_icon_p.png"></image> <image wx:if="{{index != 0}}" src="../../images/xiangq_yonhu_icon_n.png"></image> <view>{{index}}{{item.ip}}{{item.str}}</view> </view> </view> <view class="messages-scroll secondScroll" style='transform:translateX({{marginLeft}}px)'> <view class="{{index == 0?'yanse items':'items'}}" wx:for="{{zhuli}}" wx:key="index"> <image wx:if="{{index == 0}}" src="../../images/xiangq_yonhu_icon_p.png"></image> <image wx:if="{{index != 0}}" src="../../images/xiangq_yonhu_icon_n.png"></image> <view>{{item.ip}}{{item.str}}</view> </view> </view></view> |
JS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
onShow(){let windowWidth = wx.getSystemInfoSync().windowWidth; //屏幕寬度wx.createSelectorQuery().select('.firstScroll').boundingClientRect(function (rect) { let txtLength = rect.width;//文字+圖標長度 console.log(txtLength) console.log(rect) // that.setData({ // marginLeft: txtLength < windowWidth - that.data.marginLeft ? windowWidth - txtLength : that.data.marginLeft // }) console.log(that.data.marginLeft) that.roll2(that, txtLength, windowWidth); //調用滾動方法 }).exec()},roll2: function (that, txtLength, windowWidth) { var interval2 = setInterval(function () { if (-that.data.posLeft2 < txtLength) { that.setData({ posLeft2: that.data.posLeft2 - that.data.pace }) } else { // 第二段文字滾動到左邊后重新滾動 that.setData({ posLeft2: 0 }) clearInterval(interval2); that.roll2(that, txtLength, windowWidth); } }, 20)}, |
wxss:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
.wrap-item{position: relative;z-index: 10;display: flex;white-space: nowrap;}.brand-info .messages-scroll {display: flex;white-space: nowrap;margin-top: 148rpx;}.brand-info .messages-scroll .items {display: flex;white-space: nowrap;box-sizing: border-box;padding: 0 10rpx;margin-left: 10rpx;align-items: center;/* width: 332rpx; */height: 50rpx;background: rgba(0, 0, 0, 0.2);border-radius: 25rpx;color: #99A4BA;}.yanse{color: #C4FFFD !important;}.brand-info .messages-scroll .items image {width: 26rpx;height: 22rpx;margin-right: 10rpx;}.brand-info .messages-scroll .items view {font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;} |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/Edward_Cullens/article/details/103509884
