WeChat Mini Programs Achieve Seamless Scrolling

WeChat Mini Programs Achieve Seamless Scrolling

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:
  • WeChat applet implements a simple calculator
  • WeChat applet + mqtt, esp8266 temperature and humidity reading implementation method
  • WeChat applet custom scroll-view example code
  • WeChat applet to achieve the revolving lantern effect example
  • C language to achieve the whole process of recording the minesweeper game
  • Java simple game production code
  • Implementing a puzzle game with js
  • C# implements a simple flying chess game
  • Implementing the Snake Game in C Language under Linux
  • How to create WeChat games with CocosCreator

<<:  Methods to enhance access control security in Linux kernel

>>:  The difference between storing full-width characters and half-width characters in MySQL

Recommend

Front-end JavaScript Promise

Table of contents 1. What is Promise 2. Basic usa...

The latest 36 high-quality free English fonts shared

01. Infinity Font Download 02. Banda Font Download...

Detailed explanation of Docker daemon security configuration items

Table of contents 1. Test environment 1.1 Install...

Implementation of grayscale release with Nginx and Lua

Install memcached yum install -y memcached #Start...

How to install nginx under Linux

Nginx is developed in C language and is recommend...

How to use MyCat to implement MySQL master-slave read-write separation in Linux

Table of contents Linux-Use MyCat to implement My...

Installation tutorial of docker in linux

The Docker package is already included in the def...

Drawing fireworks effect of 2021 based on JS with source code download

This work uses the knowledge of front-end develop...

Explanation of the usage scenarios of sql and various nosql databases

SQL is the main trunk. Why do I understand it thi...

Detailed explanation of common template commands in docker-compose.yml files

Note: When writing the docker-compose.yml file, a...

Implementation steps for docker deployment of springboot and vue projects

Table of contents A. Docker deployment of springb...

HTML sub tag and sup tag

Today I will introduce two HTML tags that I don’t...