【微信小程序】实现垂直滚动消息、滚动广告，无限轮播

最新推荐文章于 2024-08-16 23:32:07 发布

原创

最新推荐文章于 2024-08-16 23:32:07 发布 · 4.3k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#js #小程序

该博客介绍了如何在微信小程序中实现一个滚动通知栏。当消息行数小于等于3时，通知栏静态显示；大于3行时，采用轮播滚动效果。通过setInterval设置定时器，动态调整样式实现平滑滚动，并在适当时候更新数据，保持视觉流畅。同时，提供了代码示例展示具体的实现细节，包括WXML、WXSS和JS部分。

效果图

当消息是小于等于3行时，不轮播滚动，直接显示3条
当消息大于3行时，轮播滚动(gif显示的问题，看起来不太流畅 )
一列显示，大于3行，滚动显示
一列显示，小于等于3行，静止效果

在这里插入图片描述
5. 可以通过代码动态修改颜色

let serviceData = {
   
   }
    serviceData.titlecolor = "#ffffff" //表头文字的颜色
    serviceData.titleBackground = "#FF7F00" //表头的背景
    let serviceArray = []
    let innerData1 = new Object()
    innerData1.color = "#999999" //表格文字颜色
    innerData1.title = "标题一"

在这里插入图片描述

实现原理

通过setInterval周期性执行的原理，周期性更新move，利用style="top:-{ {move}}px"使view向上移动，当向上移动的距离是条目item的高度height的时候，表明一条item已经移除视野，这时候就应该在尾部添加一条数据，来实现
尾部添加数据的时间节点也是周期性的，再次利用setInterval来实现

      interval1 = setInterval(function () {
   
   
        that.setData({
   
   
          move: that.data.move + 1,
        })
      }, 18)
      interval2 = setInterval(function () {
   
   
        let detail = []
        for (let i = 1; i < that.data.lineArray.length; i++) {
   
   
          detail.push(that.data.lineArray[i])
        }
        detail.push(that.data.lineArray[0])
        that.setData({
   
   
          lineArray: detail,
          move: 0,
        })

      }, 684)
      //684/18 = 38(一行的高度)

两个interval的时间是什么关系呢，先确定interval1 的时间点是18（数值不同，滚动的速度不同），然后用18*item的高度，就是interval2的时间。

实现代码

wxml

<view class="notice-container" style="height:{ 
       { 
       totalHeight}}px" catchtap="onNewProduct">
  <view class="notice-title-container">
    <block wx:for="{
    
    {titleArray}}" wx:key="index" data-index="{
    
    {index}}">
      <view class="notice-line-title-item" style="background:{ 
       { 
       item.background}};color:{ 
       { 
       item.color}}">
        {
  
  {item.value}}</view>
    </block>

最低0.47元/天解锁文章