微信小程序实现多行文字滚动效果

本文实例为大家分享了微信小程序实现多行文字滚动的具体代码，供大家参考，具体内容如下

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//获取应用实例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) //调用     //调用之后[[{
"new_id":1,"new_topic":"111"}
,{
"new_id":2,"new_topic":"222"}
],[{
"new_id":3,"new_topic":"333"}
,{
"new_id":4,"new_topic":"444"}
]]    }
)   }
  }
) }
, /**  * 分割数组创建二维数组封装  * @param data 数组  * @param senArrLen 需要分割成子数组的长度  */ splitArr(data, senArrLen){
      //处理成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;
    //内层数组的长度  let arrOuter = new Array(arrOuter_len);
    //最外层数组  let arrOuter_index = 0;
    //外层数组的子元素下标  // 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;
        //将内层数组的长度最小取决于数据长度对len取余，平时最内层由下面赋值决定    arrOuter[arrOuter_index - 1] = new Array(data_len % senArrLen);
        if (arrOuter_index === arrOuter_len)//最后一组     data_len % senArrLen === 0 ?      len = data_len % senArrLen + senArrLen * arrOuter_index :      len = data_len % senArrLen + senArrLen * (arrOuter_index - 1);
        let arrSec_index = 0;
    //第二层数组的索引    for (let k = i;
     k  len;
 k++) {
    //第一层数组的开始取决于第二层数组长度*当前第一层的索引     arrOuter[arrOuter_index - 1][arrSec_index] = data[k];
         arrSec_index++;
    }
   }
  }
  return arrOuter }
, // 截获竖向滑动 catchTouchMove: function (res) {
  return false }
,}
    )

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 微信小程序 scroll-view隐藏滚动条详解
• 微信小程序scroll-view实现滚动穿透和阻止滚动的方法
• 详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
• 微信小程序顶部可滚动导航效果
• 微信小程序scroll-view组件实现滚动动画
• 微信小程序-滚动消息通知的实例代码
• 微信小程序滚动Tab实现左右可滑动切换
• 微信小程序实现文字滚动
• 微信小程序实现水平垂直滚动
• 微信小程序实现无缝滚动

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！