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:
|
<<: Example of how to install nginx to a specified directory
>>: MySQL uses UNIQUE to implement non-duplicate data insertion
I use the simultaneous interpretation voice recog...
Dynamically adding form items iview's dynamic...
Table of contents 1. useState hook 2. useRef hook...
Table of contents 10,000 pieces of data were lost...
The command line mysqld –skip-grant-tables cannot...
A few days ago, I wrote an article about using CS...
Table of contents Install Docker on CentOS 8 1. U...
Table of contents 1. RegExp object 2. Grammar 2.1...
There is no doubt that containers have become an ...
question: My blog encoding is utf-8. Sometimes whe...
1. Why is eject not recommended? 1. What changes ...
Preface Dockerfile is a script interpreted by the...
Table of contents 1. JavaScript Objects 1).Array ...
Business scenario: Use vue + element ui's el-...
Preface When I was working on a project recently,...