#1

在网页制作中，我们经常需要根据业务需求在网页中不同位置展示滚动消息。

比如，新下单用户、抢购、秒杀等。

在网页中制作滚动消息有很多种实现方式，那么在小程序里面我们可以复用这些方式吗？

答案是：可以的，但没必要。

为什么呢？

因为网页中制作滚动消息效果都会用到JS，

而在小程序中我们可以直接使用原生组件 swiper 来实现滚动消息效果。

#2

在开始制作之前，我们先说说为什么不用JS？

不用JS来实现主要是两个原因：

  1、性能的原因，虽然小程序已为我们优化了很多，但总归是有一些损耗的。

  2、JS 实现滚动消息效果要多写一些代码 （嘿嘿嘿）

上面讲了为什么不用JS而用 swiper，那接下来就讲讲 swiper 实现滚动消息效果的思路

其实非常简单，同样只需要两点就可以：

  1、把 swiper 滚动方向改为垂直（如果你要实现的是左右方向的滚动消息，这一点都可省略）

  2、在 swiper-item 上面盖一层 view 遮挡一下，避免用户手动去滚动消息。

#3

思路理好了，我们先画一下 view 之间的关系

首先容器 view，来存放滚动消息遮罩层。

不要这个容器可以吗？

答案是：可以的，但很麻烦。因为遮罩层需要用绝对定位来覆盖在滚动消息层上面，没有容器作为父级 view。遮罩层会出现期望外的效果。

然后是滚动消息层，也就是本文主角 swiper 组件。可以根据业务需要改变滚动方向、时间间隔、样式等。

最后就是遮罩层，主要是防止用户误点而触发 swiper。

#4

总算到了代码环节，开始之前我们先看看效果

首先是 wxml 

然后是 wxss

最后是模拟数据 

#5

到这里，在小程序中实现滚动消息就结束了。文中源码关注公众号回复 滚动消息 下载。如果你有其他疑问或者需求加我微信(qwertyax)一起交流