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


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 相关文章推荐
js中将String转换为number以便比较
Jul 08 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
微信小程序8种数据通信的方式小结
Feb 03 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
extjs form textfield的隐藏方法
2008/12/29 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
重命名批处理python脚本
2013/04/05 Python
简单解决Python文件中文编码问题
2015/11/22 Python
python实现实时监控文件的方法
2016/08/26 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
python属于解释型语言么
2020/06/15 Python
没编程基础可以学python吗
2020/06/17 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
工程管理专业毕业生自荐信
2014/01/24 职场文书
一年级小学生评语
2014/04/22 职场文书
班主任评语大全
2014/04/26 职场文书
初三语文教学计划
2015/01/22 职场文书
工程部岗位职责范本
2015/04/11 职场文书
借款民事起诉状范文
2015/05/19 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
Python深度学习之Pytorch初步使用
2021/05/20 Python
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript