WeChat applet realizes multi-line text scrolling effect

WeChat applet realizes multi-line text scrolling effect

This article example shares the specific code for WeChat applet to implement multi-line text scrolling for your reference. The specific content is as follows

wxml

<view class="full" style="height:100%;overflow:hidden">
   <swiper autoplay="true" interval="3000" duration="500" circular="true" vertical="true" style="height:100%">
    <swiper-item wx:for="{{topnewslist}}" wx:key="{{index}}" catchtouchmove='catchTouchMove'>
     <van-notice-bar scrollable="{{false}}" bindtap="tonewsdetail" wx:for="{{item}}" wx:for-item="it" wx:key="{{index}}" data-newsid="{{it.new_id}}" style="width:100%" text="{{it.new_topic}}" />
    </swiper-item>
   </swiper>
</view>

wxss

swiper-item {
 height: 100%;
}

js

//index.js
//Get the application instance import api from "../../utils/api.js"
var token = ''
const app = getApp()

Page({
 data: {
  topnewslist:[]
 },
 onLoad: function () {
 },
 tonewsdetail(e){
  var newsid=e.currentTarget.dataset.newsid;
  wx.navigateTo({
   url: '/pages/newsdetail/newsdetail?newsid='+newsid,
  })
 },

 loadscrollnews(){
  api.get("mpapi/mpmnews.ashx", { action:'toplist', token: token}).then((res)=>{
   if(res.code==1){
   //res.list=[{"new_id":1,"new_topic":"111"},{"new_id":2,"new_topic":"222"},{"new_id":3,"new_topic":"333"},{"new_id":4,"new_topic":"444"}]
    this.setData({
     topnewslist: this.splitArr(res.list, 2) //Call//After calling [[{"new_id":1,"new_topic":"111"},{"new_id":2,"new_topic":"222"}],[{"new_id":3,"new_topic":"333"},{"new_id":4,"new_topic":"444"}]]
    })
   }
  })
 },
 /**
  * Split array to create a two-dimensional array package * @param data array * @param senArrLen length of the sub-array to be split */
 splitArr(data, senArrLen){
  //Process the data into groups of len let data_len = data.length;
  let arrOuter_len = data_len % senArrLen === 0 ? data_len / senArrLen : parseInt((data_len / senArrLen) + '') + 1;
  let arrSec_len = data_len > senArrLen ? senArrLen : data_len; //The length of the inner array let arrOuter = new Array(arrOuter_len); //The outermost array let arrOuter_index = 0; //Sub-element index of the outer array // console.log(data_len % len);
  for (let i = 0; i < data_len; i++) {
   if (i % senArrLen === 0) {
    arrOuter_index++;
    let len ​​= arrSec_len * arrOuter_index;
    //The minimum length of the inner array depends on the modulo of the data length and len. Usually the innermost layer is determined by the following assignment arrOuter[arrOuter_index - 1] = new Array(data_len % senArrLen);
    if (arrOuter_index === arrOuter_len) //The last group of data_len % senArrLen === 0 ?
      len = data_len % senArrLen + senArrLen * arrOuter_index :
      len = data_len % senArrLen + senArrLen * (arrOuter_index - 1);
    let arrSec_index = 0; //The index of the second layer array for (let k = i; k < len; k++) { //The start of the first layer array depends on the length of the second layer array * the current first layer index arrOuter[arrOuter_index - 1][arrSec_index] = data[k];
     arrSec_index++;
    }
   }
  }
  return arrOuter
 },
 //Intercept vertical sliding catchTouchMove: function (res) {
  return false
 },
})

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 scroll-view hidden scroll bar detailed explanation
  • How to implement scroll penetration and prevent scrolling in WeChat applet scroll-view
  • Detailed explanation of the practical pitfalls of WeChat applet scroll-view horizontal scrolling and the implementation of hiding its scroll bar
  • WeChat applet top scrollable navigation effect
  • WeChat applet scroll-view component implements scrolling animation
  • WeChat applet-example code for scrolling message notification
  • WeChat applet scroll tab to achieve left and right sliding switching
  • WeChat applet implements text scrolling
  • WeChat applet realizes horizontal and vertical scrolling
  • WeChat Mini Programs Achieve Seamless Scrolling

<<:  Example of how to install nginx to a specified directory

>>:  MySQL uses UNIQUE to implement non-duplicate data insertion

Recommend

iview implements dynamic form and custom verification time period overlap

Dynamically adding form items iview's dynamic...

Introduction to useRef and useState in JavaScript

Table of contents 1. useState hook 2. useRef hook...

Example of converting JavaScript flat array to tree structure

Table of contents 10,000 pieces of data were lost...

Docker deploys Mysql, .Net6, Sqlserver and other containers

Table of contents Install Docker on CentOS 8 1. U...

A brief discussion on JS regular RegExp object

Table of contents 1. RegExp object 2. Grammar 2.1...

10 bad habits to avoid in Docker container applications

There is no doubt that containers have become an ...

How to modify create-react-app's configuration without using eject

1. Why is eject not recommended? 1. What changes ...

Docker Basic Tutorial: Detailed Explanation of Dockerfile Syntax

Preface Dockerfile is a script interpreted by the...

5 commonly used objects in JavaScript

Table of contents 1. JavaScript Objects 1).Array ...

Solution for front-end browser font size less than 12px

Preface When I was working on a project recently,...