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

Add ?v= version number after js or css to prevent browser caching

Copy code The code is as follows: <span style=...

JavaScript clicks the button to generate a 4-digit random verification code

This article example shares the specific code of ...

Function overloading in TypeScript

Table of contents 1. Function signature 2. Functi...

How to verify whether MySQL is installed successfully

After MySQL is installed, you can verify whether ...

Summary of methods to improve mysql count

I believe many programmers are familiar with MySQ...

JavaScript to achieve slow motion animation effect

This article shares the specific code for JavaScr...

HTML uses form tags to implement the registration page example code

Case Description: - Use tables to achieve page ef...

Example of how to change the line spacing of HTML table

When using HTML tables, we sometimes need to chan...

Diving into JS inheritance

Table of contents Preface Prepare Summarize n way...

JS achieves five-star praise case

This article shares the specific code of JS to ac...

Detailed explanation of HTML programming tags and document structure

The purpose of using HTML to mark up content is t...

html+css+js to realize the function of photo preview and upload picture

Preface: When we are making web pages, we often n...

Detailed explanation of generic cases in TypeScript

Definition of Generics // Requirement 1: Generics...