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

MySQL data type selection principles

Table of contents Small but beautiful Keep it sim...

jQuery realizes the full function of shopping cart

This article shares the specific code of jQuery t...

CSS Summary Notes: Examples of Transformations, Transitions, and Animations

1. Transition Transition property usage: transiti...

How to configure MySQL on Ubuntu 16.04 server and enable remote connection

background I am learning nodejs recently, and I r...

The most comprehensive collection of front-end interview questions

HTML+CSS 1. Understanding and knowledge of WEB st...

Implementation of Docker deployment of web projects

The previous article has installed the docker ser...

Graphical explanation of the function call of proto file in Vue

1. Compile proto Create a new proto folder under ...

Specific example of MySQL multi-table query

1. Use the SELECT clause to query multiple tables...

Nginx reverse proxy springboot jar package process analysis

The common way to deploy a springboot project to ...

Solution to MySQL master-slave delay problem

Today we will look at why master-slave delay occu...

Intellij IDEA quick implementation of Docker image deployment method steps

Table of contents 1. Docker enables remote access...

Form submission page refresh does not jump

1. Design source code Copy code The code is as fol...

Summary of basic operations for MySQL beginners

Library Operations Query 1.SHOW DATABASE; ----Que...