微信小程序Skyline垂直公告轮播｜JS 无缝滚动、点击跳转、柔和过渡

微信小程序Skyline渲染模式：垂直无缝轮播公告实现方案

本文分享基于微信小程序Skyline渲染模式开发的垂直上下轮播公告组件。该方案通过纯JS控制动画，有效规避了Skyline环境下CSS keyframes可能存在的兼容性问题，实现平滑、无缝的循环滚动效果。

核心功能特性

• 布局规范：公告条固定高度（72rpx），采用“图标+文字”同行排列。
• 动效逻辑：每条公告停留5秒，随后以0.6秒时长平缓向上滑动切换。
• 无限循环：滑至最后一条后无缝衔接第一条，视觉上实现无限循环。
• 交互响应：点击任意公告项可跳转对应页面；若未配置URL则无响应。

完整代码实现

WXML结构

通过追加第一条数据至列表末尾，为无缝重置位置提供DOM基础。

<view class="notice-wrap">
  <view class="notice-list" style="transform: translateY(-{{offset}}rpx);transition: {{transition}};">
    <view class="notice-item" wx:for="{{noticeList}}" wx:key="index" bindtap="goPage" data-url="{{item.url}}">
      <image class="notice-icon" src="/static/icons/hot.png"></image>
      <text>{{item.text}}</text>
    </view>
    <!-- 无缝追加第一条 -->
    <view class="notice-item" bindtap="goPage" data-url="{{noticeList[0].url}}">
      <image class="notice-icon" src="/static/icons/hot.png"></image>
      <text>{{noticeList[0].text}}</text>
    </view>
  </view>
</view>

WXSS样式

外层容器设置固定高度并隐藏溢出内容，内部列表使用Flex布局垂直排列。

page{
  margin-top:600rpx;
}
.notice-wrap {
  width: 100%;
  height: 72rpx;
  background: #fff7e6;
  overflow: hidden;
  padding: 0 24rpx;
  box-sizing: border-box;
}
.notice-list {
  display: flex;
  flex-direction: column;
}
.notice-item {
  height: 72rpx;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.notice-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 8rpx;
  flex-shrink: 0;
}

JS逻辑

利用定时器控制索引变化，配合CSS transition实现动画。在滚动至克隆节点时，通过取消过渡动画瞬间复位，再重新启用过渡，从而实现视觉上的无缝循环。

Page({
  data: {
    noticeList: [
      {
        text: '重要公告：本店活动进行中，优惠截止本月底！',
        url: '/pages/activity/activity'
      },
      {
        text: '第二条公告：会员充值福利，限时开启！',
        url: '/pages/vip/vip'
      },
      {
        text: '第三条公告：每周三会员日88折！',
        url: '/pages/discount/discount'
      }
    ],
    currentIndex: 0,
    offset: 0,
    transition: 'transform 0.6s ease-in-out',
    timer: null
  },
  onReady() {
    this.startLoop();
  },
  startLoop() {
    const itemHeight = 72;
    const total = this.data.noticeList.length;
    // 5600ms = 停留5s + 滑动0.6s
    this.data.timer = setInterval(() => {
      let nextIndex = this.data.currentIndex + 1;
      this.setData({
        currentIndex: nextIndex,
        offset: nextIndex * itemHeight
      });
      if (nextIndex >= total) {
        setTimeout(() => {
          this.setData({
            transition: 'none',
            currentIndex: 0,
            offset: 0
          });
          setTimeout(() => {
            this.setData({
              transition: 'transform 0.6s ease-in-out'
            });
          }, 50);
        }, 600);
      }
    }, 5600);
  },
  goPage(e) {
    const url = e.currentTarget.dataset.url;
    if (!url) return;
    wx.navigateTo({
      url: url
    });
  },
  onUnload() {
    clearInterval(this.data.timer);
  }
})

JSON配置

确保页面配置启用Skyline渲染引擎。

{
  "renderer": "skyline"
}

技术实现原理总结

1. 视口限制：外层容器固定高度并设置 overflow:hidden，确保仅展示单条公告。
2. 位移变换：内部列表通过 transform: translateY() 实现向上位移，性能优于修改top/margin属性。
3. 定时切换：JS定时器定期更新下标和偏移量，结合CSS transition 实现平滑滑动效果。
4. 无缝循环：在列表末尾复制第一条数据。当滚动到该克隆节点时，先移除过渡效果，瞬间将位置复位至第一条，随后重新添加过渡效果。此过程极快，用户感知不到跳动，从而实现无缝循环。
5. 兼容性优化：完全由JS控制动画状态，避开了Skyline渲染模式下CSS @keyframes动画可能遇到的隔离或渲染Bug。

#微信小程序 #Skyline渲染 #小程序公告