This article example shares the specific code for WeChat applet to achieve seamless scrolling for your reference. The specific content is as follows wxml <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 onShow(){ let windowWidth = wx.getSystemInfoSync().windowWidth; //Screen width wx.createSelectorQuery().select('.firstScroll').boundingClientRect(function (rect) { let txtLength = rect.width; //text + icon length 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); //Call the scroll method}).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 { // The second paragraph scrolls to the left and then scrolls again that.setData({ posLeft2: 0 }) clearInterval(interval2); that.roll2(that, txtLength, windowWidth); } }, 20) }, wxss: .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; } The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Methods to enhance access control security in Linux kernel
>>: The difference between storing full-width characters and half-width characters in MySQL
Copy code The code is as follows: <span style=...
MySQL advantage: Small size, fast speed, low tota...
This article example shares the specific code of ...
Table of contents 1. Function signature 2. Functi...
After MySQL is installed, you can verify whether ...
I believe many programmers are familiar with MySQ...
Add the following code to the CSS style of the el...
This article shares the specific code for JavaScr...
Case Description: - Use tables to achieve page ef...
When using HTML tables, we sometimes need to chan...
Table of contents Preface Prepare Summarize n way...
This article shares the specific code of JS to ac...
The purpose of using HTML to mark up content is t...
Preface: When we are making web pages, we often n...
Definition of Generics // Requirement 1: Generics...