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


Posted in Javascript onNovember 18, 2020

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

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

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
 },
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
微信小程序实现自定义底部导航
Nov 18 #Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 #Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 #Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 #Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 #Javascript
springboot+vue实现文件上传下载
Nov 17 #Vue.js
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 #Vue.js
You might like
php字符串截取问题
2006/11/28 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
json数据的列循环示例
2013/09/06 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
使用python编写监听端
2018/04/12 Python
python递归函数绘制分形树的方法
2018/06/22 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
NumPy统计函数的实现方法
2020/01/21 Python
Django静态文件加载失败解决方案
2020/08/26 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
编写strcpy函数
2014/06/24 面试题
介绍一下Linux中的链接
2016/05/28 面试题
为什么要用EJB
2014/04/17 面试题
毕业生的自我鉴定
2013/10/29 职场文书
对祖国的寄语大全
2014/04/11 职场文书
计算机专业自荐信
2014/05/24 职场文书
联欢会开场白
2015/06/01 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL