uniapp公告

<template>
  <view class="page">
    <!-- 公告栏 -->
    <scroll-view
      scroll-y="true"  <!-- 启用垂直滚动 -->
      class="notice-container"  <!-- 应用定义的样式类 -->
      :scroll-into-view="currentView"  <!-- 根据当前视图ID进行滚动 -->
      :scroll-with-animation="true"  <!-- 滚动时启用动画效果 -->
    >
      <!-- 使用 v-for 循环生成公告项 -->
      <view v-for="(item, index) in notices" 
            :key="index"  <!-- 设置唯一键值，优化渲染 -->
            :id="'notice-' + index"  <!-- 设置每个公告项的唯一ID，供滚动定位使用 -->
            class="notice-item"> <!-- 应用定义的公告项样式类 -->
        {{ item }}  <!-- 显示公告内容 -->
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 公告列表，包含多个公告内容
      notices: [
        '公告1：这里是第一条公告信息',
        '公告2：这里是第二条公告信息',
        '公告3：这里是第三条公告信息',
      ],
      // 当前显示的公告索引
      currentIndex: 0,
    };
  },
  computed: {
    // 计算当前需要滚动到的视图ID
    currentView() {
      return 'notice-' + this.currentIndex;
    },
  },
  mounted() {
    // 组件挂载后启动自动滚动
    this.startScroll();
  },
  methods: {
    // 启动滚动，使用定时器每隔3秒更新一次currentIndex
    startScroll() {
      setInterval(() => {
        // 每次调用将当前索引增加1，当索引超过公告数量时重置为0
        this.currentIndex = (this.currentIndex + 1) % this.notices.length;
      }, 3000); // 每3秒滚动一次
    },
  },
};
</script>

<style>
.notice-container {
  height: 50rpx; /* 设置滚动区域的高度 */
  overflow: hidden; /* 隐藏超出区域的内容 */
}

.notice-item {
  height: 50rpx; /* 每个公告项的高度，确保内容适应容器 */
  line-height: 50rpx; /* 设置行高，使文本在垂直方向居中 */
  text-align: center; /* 文本水平居中 */
  font-size: 16px; /* 设置字体大小 */
  color: #333; /* 设置文本颜色 */
}
</style>