带圆点的可左滑列表

 <view class="container">
        <!-- 滑动列表 -->
        <swiper class="swiper1" autoplay="false" interval="5000" duration="500" @change="swiperChange">
          <swiper-item v-for="(items, index) in swiperItems" :key="index" class="list1">
            <view v-for="(item, subIndex) in items" :key="subIndex" class="item">
              <!-- 列表项内容 -->
              <image class="img" src="../../static/icon/sy1.png" mode=""></image>
              <text>{{ item.name }}</text>
            </view>
          </swiper-item>
        </swiper>

        <!-- 圆点指示器 -->
        <view class="dots">
          <view v-for="(_, index) in swiperItems.length" :key="index" class="dot" :class="{ active: index === current }"
            @tap="goToSlide(index)"></view>
        </view>
      </view>

data内容

listItems: [{
            name: 'Item 1'
          },
          {
            name: 'Item 1'
          },
          {
            name: 'Item 1'
          },
          {
            name: 'Item 1'
          },
          {
            name: 'Item 1'
          },
          {
            name: 'Item 1'
          },
          {
            name: 'Item 1'
          },
          {
            name: 'Item 1'
          },
          {
            name: 'Item 2'
          }
          // 这里应该是一个包含多个对象的数组，每个对象代表一个列表项  
          // 例如: [{ name: 'Item 1' }, { name: 'Item 2' }, ...]  
          // 由于不确定具体数量，这里用空数组代替  
        ],
        // 根据listItems动态计算出的swiperItems  
        swiperItems: [],
        current: 0, // 当前swiper-item的索引 

方法

 mounted() {
      this.initSwiperItems();
    },
    methods: {
      initSwiperItems() {
        const itemsPerPage = 4; // 每页列表项数量  
        let currentPageItems = [];
        let swiperItems = [];

        this.listItems.forEach((item, index) => {
          currentPageItems.push(item);

          if ((index + 1) % itemsPerPage === 0 || index === this.listItems.length - 1) {
            swiperItems.push(currentPageItems);
            currentPageItems = []; // 重置当前页列表项  
          }
        });

        this.swiperItems = swiperItems;
      },
      swiperChange(e) {
        this.current = e.detail.current;
      },
      goToSlide(index) {
        this.current = index;
        this.$refs.swiper.swiperTo(index, 500, true); // 如果有需要，可以平滑滚动到指定swiper-item  
      },
    }

样式

 .swiper1 {
      height: 150upx;
    }

    .dots {
      text-align: center;
    }

    .dot {

      width: 6upx;
      height: 0px;
      opacity: 1;

      /* 错误色/错误色背景 */
      border: 4upx solid #FFC7C7;
      margin: 0 5px;
      display: inline-block;
    }

    .active {
      width: 14upx;
      height: 0px;
      opacity: 1;

      /* 主题色 */
      border: 4upx solid #FF0000;
    }

    .list1 {
      display: flex;

      .item {
        width: 25%;
        height: 150upx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .img {
          width: 80upx;
          height: 80upx;
          border-radius: 20upx;
        }
      }
    }