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
Table of contents 1. What is Promise 2. Basic usa...
01. Infinity Font Download 02. Banda Font Download...
Table of contents 1. Test environment 1.1 Install...
Install memcached yum install -y memcached #Start...
Nginx is developed in C language and is recommend...
MySQL x64 does not provide an installer, does not...
Table of contents Linux-Use MyCat to implement My...
The Docker package is already included in the def...
The default remote repository of Nexus is https:/...
This work uses the knowledge of front-end develop...
SQL is the main trunk. Why do I understand it thi...
Note: When writing the docker-compose.yml file, a...
Table of contents A. Docker deployment of springb...
Preface Recently, I encountered a requirement. Du...
Today I will introduce two HTML tags that I don’t...