热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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

这篇文章主要介绍了微信小程序实现多行文字滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

wxml


   
    
     
    
   

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 

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


推荐阅读
  • 微信小程序导航跟随的实现方法
    本文介绍了在微信小程序中实现导航跟随的方法。通过设置导航的position属性和绑定滚动事件,可以实现页面向下滚动到导航位置时,导航固定在页面最上方;页面向上滚动到导航位置时,导航恢复到原始位置;点击导航可以平滑跳转到相应位置。代码示例也给出了具体实现方法。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 小程序自动授权和手动接入的方式及操作步骤
    本文介绍了小程序支持的两种接入方式:自动授权和手动接入,并详细说明了它们的操作步骤。同时还介绍了如何在两种方式之间切换,以及手动接入后如何下载代码包和提交审核。 ... [详细]
  • 本文介绍了小程序商城引进流量的优化策略与方法。首先,通过附近小程序功能可以增加周围门店的方位并展示,吸引附近用户。其次,利用微信群聊功能,将小程序分享到多个微信群聊中,扩大影响力。最后,通过设置一些固定的活动机制,打造仪式感来吸引用户。这些方法能够有效提升小程序商城的流量,增加用户数量。 ... [详细]
  • 微信答题小程序的设计与实现详解
    本文详细介绍了如何设计和实现一个微信答题小程序,包括题库的设计和题目的呈现。通过抽取题目编号和使用全局变量记录当前题目的信息,实现了题目的刷新和显示。同时,还介绍了题目的展示方式和容器的创建。本文适合零基础的小白学习微信答题小程序的开发。 ... [详细]
  • 微信民众号商城/小顺序商城开源项目介绍及使用教程
    本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目,包括前端和后端的目录结构,以及所使用的技术栈。同时提供了项目的运行和打包方法,并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接,以及加入前端交流QQ群的方式。 ... [详细]
  • 14亿人的大项目,腾讯云数据库拿下!
    全国人 ... [详细]
  • 起因由于我录制过一个小程序的课程,里面有消息模板的讲解。最近有几位同学反馈官方要取消消息模板,使用订阅消息。为了方便大家容易学 PythonFlask构建微信小程序订餐系统 课程。 ... [详细]
  • 使用flex弹性布局来为微信小程序写自适应页面
    我们知道,写习惯了前端的人,一般切图后布局页面的话,上手最习惯的是基于盒子模型的浮动布局,依赖display属性positi ... [详细]
  • 浅解XXE与Portswigger Web Sec
    XXE与PortswiggerWebSec​相关链接:​博客园​安全脉搏​FreeBuf​XML的全称为XML外部实体注入,在学习的过程中发现有回显的XXE并不多,而 ... [详细]
  • PHP小习题:PHP小练习题前几天在百度知道里面看到有位网友询问如何制作一下的小程序:用php语言设计一个小程序,计算今天到达下月的天数、全部输出这些天数,并使得每天的日期以三种颜 ... [详细]
  • 西安小程序开发,小程序制作,一个后台管理多端小程序功能性
    小程序已经发展4年多时间大全app下载汅api免费安卓。从最初简单demo到现在底层api接口。让我们的小程序和APP一样可以轻松的操作硬件信息。对于调取手机硬 ... [详细]
  • 抖音大话西游情侣头像怎么制作 紫霞至尊宝情侣头像来袭
    抖音上这几天七夕紫霞仙子和至尊宝火爆了,相信你也想要制造一张属于自己的大话西游吧,要是不知道怎么设置的话可以看看下面的教程哦。1、微信搜索小程序【粉丝头像】;2、选择原图;3、选择 ... [详细]
  • 生产环境下JVM调优参数的设置实例
     正文前先来一波福利推荐: 福利一:百万年薪架构师视频,该视频可以学到很多东西,是本人花钱买的VIP课程,学习消化了一年,为了支持一下女朋友公众号也方便大家学习,共享给大家。福利二 ... [详细]
  • 校园表白墙微信小程序,校园小情书、告白墙、论坛,大学表白墙搭建教程
    小程序的名字必须和你微信注册的名称一模一样在后台注册好小程序。mp.wx-union.cn后台域名https。mp.wx-union.cn ... [详细]
author-avatar
江西理工大学-交通091班-李吉平
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有