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


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 DOM学习第一章 W3C DOM简介
Feb 19 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
微信小程序实现自定义底部导航
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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
PHP 数字左侧自动补0
2008/03/31 PHP
PHP实时显示输出
2008/10/02 PHP
php daodb插入、更新与删除数据
2009/03/19 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
详解php中反射的应用
2016/03/15 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
Python使用minidom读写xml的方法
2015/06/03 Python
替换python字典中的key值方法
2018/07/06 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
Python  Django 母版和继承解析
2019/08/09 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
会计专业求职信范文
2014/03/16 职场文书
精彩广告词大全
2014/03/19 职场文书
win10搭建配置ftp服务器的方法
2022/08/05 Servers