微信小程序 - 新闻动态 / 公告上下滚动列表（上下循环滚动，无限上下自动滚动列表）

已于 2024-02-01 23:55:26 修改
阅读量5.1k 收藏 8
点赞数 3
分类专栏： + Wechat 文章标签： 微信小程序 Wechat 滚动列表 上下滚动 新闻动态/公告
于 2022-05-26 10:36:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/124979849
版权
+ Wechat 专栏收录该内容
119 篇文章 979 订阅 ¥19.90 ¥99.00
订阅专栏

前言

本文实现了 无限上下自动滚动列表 组件，常见于新闻动态列表、公告等场景，可直接调用。

您可以自定义滚动间隔与显示多少个列表，

另外点击每项会触发事件，可用于跳转到详情页。

代码干净整洁，注释详细，具体如下图所示：

在这里插入图片描述

示例代码

推荐使用平台提供的一键复制功能，避免发生漏选难以排查。

随便找个页面，按照以下代码进行依次复制。

<

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
订阅专栏
微信小程序scroll-view实现字幕滚动
10-18
主要为大家详细介绍了微信小程序scroll-view实现字幕滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序 — 实现上下滚动的广告效果
棒怡情的专栏
06-02 860
实现方式使用swiper，设置方向为纵向 virtical
微信小程序文字上下无缝轮播（滚动效果）
最新发布
没落的博客
03-12 580
微信小程序文字上下无缝轮播的效果。
微信小程序文章详情页面实现代码
10-18
主要介绍了微信小程序文章详情页面实现代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
小程序绘制表格table（表头固定，可上下左右滑动）
MrJovia的博客
10-12 3270
某天在写小程序表格时偶然发现小程序没有table标签，在微信小程序社区搜索了一番发现官方给出的说法是view能够满足table样式，足以替代table标签。 以下用原生的小程序代码写了一版简单的表格，其中表格可以左右滑动，固定表头上下滑动。 wxml <!-- 表格 --> <view class="table"> <!-- 整体横向滑动 --> <scroll-view class="tableX" scroll-x> &lt
【小程序】滚动的公告栏
zxsy19966的博客
08-10 3552
【小程序】滚动的公告栏
微信小程序页面上下滚动效果
10-16
主要为大家详细介绍了微信小程序页面上下滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序两种滚动公告栏的实现方法
phubing
03-14 6569
先上效果图： 横向滚动栏实现 网上的几种方案或多或少都有一些问题： 1.setData定时器更新text view的margin-left方法，由于setData的毫秒延时，动画播放起来一卡一卡； 2.纯CSS实现，keyframe等，无法实现循环播放的设置； 3.使用string.length*font-size的方法获取字符串像素长度，不够精确，多次循环播放后误差会累积变大...
微信小程序公告向上滚动
少爷、的博客
02-14 1624
相信大家在做小程序的时候，应该都会做一个滚动的公告吧，今天教大家做一个上下滚动的公告，先上图： 代码： wxml: <!--公告--> <view class="notice_box"> <view class="notice"> <image src="/Icon/index_icon/notice.png"></image&...
微信小程序实现无限滚动列表
baorant24的博客
04-13 734
微信小程序实现无限滚动列表 问题背景 客户端日常开发和学习过程中，无限滚动列表是一种很常见的场景，比如用户获奖名单等，本文将介绍如何在微信小程序中实现无限自动滚动列表。 问题分析 页面文件目录结构如下： 问题解决 话不多说，直接上代码 (1)index.js文件，代码如下： // pages/healdata/healt...
微信小程序公告文字滚动
munchmills的博客
05-10 321
【代码】微信小程序公告文字滚动。
微信小程序实现自上而下字幕滚动
10-18
主要为大家详细介绍了微信小程序实现自上而下字幕滚动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序左右滚动公告栏效果代码实例
10-16
主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序-滚动消息通知效果
03-29
这次我主要想总结一下微信小程序实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器。　我们通过vertical属性（默认为false,实现默认左右滚动）设置为true来实现上下滚动。 ......
微信小程序无缝滚动.zip
01-14
微信小程序实现文本循环无缝滚动 真实有用
微信小程序 - Setting data field “xxx“ to undefined is invalid.报错原因及解决方案
热门推荐
王佳斌
10-31 2万+
前言 ## 完整报错(SEO) ## 翻译: 将数据字段“XXX”设置为未定义是无效的。 Setting data field "xxx" to undefined is invalid. 这种情况是由于页面 setData "xxx（变量）" 的时候，没有获取到值。 然后就会将 undefined 给 xxx（变量） 字段，此时默认字段就会变成 undefined ，那么就会出现这种警告。 解决 判断是否存在。 在没有 setData 之前，先判断获取到的值是否存在（也可以 setData 里面判
微信小程序 - 详细实现打开跳转第三方 H5 网页链接，在微信小程序内直接跳转打开第三方网站链接详细教程（支持跳转公众号文章等，直接复制代码即可）
王佳斌
04-01 2万+
小程序跳转h5，小程序 - Taro小程序中打开h5页面链接，...小程序跳转h5链接(web-view)_微信小程序，小程序如何跳转h5页面，小程序跳转到第三方H5网页，微信小程序跳转第三方H5的方法，小程序-实现怎么跳转打开 H5 网页链接(或跳转至公众号文章
uniapp微信小程序无限滚动
05-12
实现无限滚动可以通过监听scroll-view组件的scrolltolower事件，在滚动到底部时加载更多数据。以下是一个简单的示例代码： ``` <template> <scroll-view scroll-y="true" style="height: 100vh;" @scrolltolower="loadMore"> <view v-for="(item, index) in list" :key="index">{{ item }}</view> </scroll-view> </template> <script> export default { data() { return { list: [], // 列表数据 pageNo: 1, // 当前页码 pageSize: 10, // 每页数据量 isEnd: false // 数据是否已经加载完毕 }; }, mounted() { this.loadData(); }, methods: { // 加载数据 loadData() { if (this.isEnd) return; // 模拟异步加载数据 setTimeout(() => { const data = Array.from({ length: this.pageSize }, (_, i) => `item ${i}`); this.list = this.list.concat(data); this.pageNo++; if (this.pageNo > 5) { this.isEnd = true; } }, 1000); }, // 加载更多 loadMore() { this.loadData(); } } }; </script> ``` 在示例代码中，我们使用了一个名为list的数组来存储列表数据，然后通过loadData方法模拟异步加载数据的过程，每次加载完数据后会将数据追加到list数组中。在scroll-view组件上监听scrolltolower事件，当滚动到底部时触发loadMore方法来加载更多数据。同时，我们使用了一个isEnd标志位来表示数据是否已经加载完毕，当所有数据都已经加载完毕时，可以停止监听scrolltolower事件，避免不必要的网络请求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值