微信小程序-公告滚动消息通知

最新推荐文章于 2025-06-09 23:36:23 发布

璞~

最新推荐文章于 2025-06-09 23:36:23 发布

阅读量5.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序微信小程序开发笔记

本文链接：https://blog.youkuaiyun.com/qq_39702981/article/details/84108543

微信小程序同时被 2 个专栏收录

86 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

微信小程序开发笔记

28 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在微信小程序中使用swiper组件实现上下滚动的公告消息提醒。关键在于设置swiper组件的vertical属性为true，数据通过setData函数传递到视图层。示例包括wxml、wxss和Js代码段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面：　

　　这次我主要想总结一下微信小程序实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器。

　　我们通过vertical属性（默认为false,实现默认左右滚动）设置为true来实现上下滚动。

　（需要注意的是：只要你的swiper存在vertical属性，无论你给值为true或者false或者不设参数值，都将实现上下滚动）

　wxml

复制代码

1 <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
2     <block wx:for="{
 
 {msgList}}">
3       <navigator url="/pages/index/index?title={
 
 {item.url}}" open-type="navigate">
4         <swiper-item>
5           <view class="swiper_item">{
 
 {item.title}}</view>
6         </swiper-item>
7       </navigator>

了解本专栏