小程序公告无限滚动

最新推荐文章于 2023-06-14 11:10:05 发布
最新推荐文章于 2023-06-14 11:10:05 发布
阅读量606 收藏
点赞数 1
文章标签： 小程序 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z0023_friday/article/details/107683061
版权

主要是通过css3的动画特性来实现
在这里插入图片描述
公告能够滚动要是就是通过添加notice-wrap__animation这个类名，所以我们可以通过判断公告内容的长度来决定是否添加这个类，可以让其文字少的时候固定，文字过多的时候去滚动
在这里插入图片描述

月儿明，风儿轻
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序 - 新闻动态 / 公告上下滚动列表（上下循环滚动，无限上下自动滚动列表）
王佳斌
05-26 5737
前言 本文实现了 无限上下自动滚动列表 组件，常见于新闻动态列表、公告等场景，可直接调用。 您可以自定义滚动间隔与显示多少个列表， 另外点击每项会触发事件，可用于跳转到详情页。 代码干净整洁，注释详细，具体如下图所示： 示例代码 推荐使用平台提供的一键复制功能，避免发生漏选难以排查。 随便找个页面，按照以下代码进行依次复制。 <!-- display-multiple-items: 显示的滑块数量(显示几个列表)，注意对应CSS也要更改，保持总高度与每项高度成"正比"，详见CSS文件。 -
微信小程序左右滚动公告栏效果代码实例
10-16
主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序实现公告横向滚动
最新发布
weixin_46719229的博客
06-14 845
微信小程序实现公告横向滚动
【小程序】滚动的公告栏
zxsy19966的博客
08-10 3747
【小程序】滚动的公告栏
小程序无缝滚动通知公告栏
qq469234155的博客
01-15 4837
最近做小程序项目，需要做一个通知公告栏，使用的UI组件里没有这给组件，自能自己手撸一个勉强使用. wxml <view class="notice"> <view class="left"><view>通知公告</view></view> <view class="right scrollx"> ...
微信小程序实现无限滚动列表
01-03
本文实例为大家分享了微信小程序实现无限滚动列表的具体代码，供大家参考，具体内容如下 效果图1.0 实现方式是利用小程序原声组件swiper，方向设置为纵向 ：vertical=‘true’设置同时显示的滑块数量：display-...
小程序两种滚动公告栏的实现方法
10-16
主要介绍了小程序两种滚动公告栏的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序实现文字从右向左无限滚动
10-17
微信小程序实现文字从右向左无限滚动 微信小程序实现文字从右向左无限滚动是指在微信小程序中实现文字从右向左无限滚动的效果。本文主要介绍了微信小程序实现文字从右向左无限滚动的方法，并提供了具体的代码实例。...
微信小程序实现文字无限轮播效果
10-17
在微信小程序中实现文字无限轮播效果是一种常见的交互设计，它可以吸引用户注意力并展示重要的信息。下面我们将详细探讨如何在微信小程序中实现这一功能。 首先，我们需要了解的是微信小程序的基本结构，它包括JSON...
关于微信小程序公告栏从又往左滚动的实现
God_qsang的博客
03-10 1393
wxml: <view class="example swiper_container"> <view class="marquee_box"> <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;"> <view class="swiper_item" bindtap="detailBtn"> ...
微信小程序 实用的公告栏滚动效果
热门推荐
weixin_43261128的博客
12-09 1万+
首先先来看页面的代码 公告 你想拥有像萧逸晨一样的名字吗？ ps. class自己可以另定义名字，方便自己以后修改. 接下来就是正题了，咱们来看样式是怎么定义的. .srcoll_view{ position: absolute; top:16rpx; height: 100rpx; margin-left: 0px; font-size: 30rpx; font-weight: 550; ...
简单实现微信小程序实现文字从右往左无缝滚动（走马灯）的组件（类似公告）
qq1256382146的博客
05-19 2344
滚动广告，微信小程序，无缝滚动广告
【小程序】微信小程序-滚动消息通知
lomenw的博客
10-22 2959
【小程序】微信小程序-滚动消息通知 　　写在前面：　 　　这次我主要想总结一下微信小程序实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器。 　　我们通过vertical属性（默认为false,实现默认左右滚动）设置为true来实现上下滚动。 　 （需要注意的是：只要你的swiper存在vertical属性，无论你给值为
微信小程序实现公告文字滚动
Sponge_boy的博客
02-25 3194
微信小程序通过Animation动画对象实现文字滚动效果 1、 效果图： 2、wxml代码 <!-- 公告轮播效果 --> <view class='notice' wx:if="{{isOpen}}"> <!-- 公告的喇叭图片 --> <view class="left" bindtap="goNoticesList"> <image src="../../icons/suona.png" mode="aspectFit"
微信小程序中，怎么设置（通知公告）【向左一直滚动】的效果
weixin_50450473的博客
07-29 1450
index.wxml： 其中rich-text将获取到带标签的数据，解析成对应文本 <view class="example swiper_container"> <view class="marquee_box"> <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;"> <view class=..
微信小程序公告(文字滚动)具体实现:
专注Java后端技术干货、项目源码总结分享，期待您的关注。
10-03 4131
具体实现代码如下: ****index.wxml:**** <swiper class="swiper_com" vertical="true" autoplay="true" circular="true" interval="2000"> <block wx:for="{{msgList}}"> <navigator url="/pages/...
【微信小程序】scroll-view实现字幕滚动
yapeee的博客
07-13 7130
需求： 实现框内的文字自下而上的自动循环滚动。 解决方案： demo：https://github.com/yapeee/wx-text-rolling-demo 通过控制滑动条来完成字幕滚动，通过setinterval完成字幕循环滚动。 wxml: &lt;scroll-view class="container" scroll-y="true" bindscroll="scrol...
微信小程序-滚动消息通知
qq_36926807的博客
07-24 1477
小程序实现上下滚动的公告，请往下看： wxml: &lt;swiper class="swiper-container" vertical='true' autoplay='true' circular='true' interval='2000' duration='500'&gt; &lt;block wx:for="{{noticeList}}" wx:for-item="item" ...
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事件，避免不必要的网络请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值