swiper快速实现小程序双行金刚区滚动翻页

当烟雨缭绕、蓑衣低垂的时候,生命如同一曲绵长的旋律,诉说着它独特的故事

事情经过是大佬询问微信小程序首页小程序双行金刚区滚动翻页效果是如何做到的

若你问我，之前也没学习过；但是我会摇人哇！

方式一：
flex-flow: column wrap 实现两行布局加上scroll-view 实现滚动

方式二：

swiper + flex布局（或者grid组件） + js分割数组

取舍

条条大路通罗马，我们只需要选择一合适自己的一条，方式一内心是拒绝的，因为scroll-view的滚动需要我们去计算

而方式二只要js数组分割一个难点而已

思路

模拟12条数据，使用js将数据分割8个一组，先循环swiper，在循环一次里面的金刚区

代码

为了方便实用uni-app做案例，其实核心只有js分割

<template>
  <view>
    <!-- 金刚区 -->
    <view class="uni-margin-wrap">
      <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
        indicator-active-color="#60c1c3" :duration="duration">
        <swiper-item v-for="(item, index) in navSet">
          <view class="jing">
            <uni-grid :column="4" :showBorder="false" :square="false">
              <uni-grid-item class="jing-grid" v-for="(lts, idx) in item">
                <image class="jing-icon" :src="lts.mainImage" mode="aspectFit"></image>
                <view class="jing-title">
                  {{lts.title}}
                </view>
              </uni-grid-item>
            </uni-grid>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        navSet: [{
          title: '月份1',
          mainImage: '../../static/logo.png',
        }, {
          title: '月份2',
          mainImage: '../../static/logo.png',
        }, {
          title: '月份3',
          mainImage: '../../static/logo.png',
        }, {
          title: '月份4',
          mainImage: '../../static/logo.png',
        }, {
          title: '月份5',
          mainImage: '../../static/logo.png',
        }, {
          title: '月份6',
          mainImage: '../../static/logo.png',
        }, {
          title: '月份7',
          mainImage: '../../static/logo.png',
        }, {
          title: '月份8',
          mainImage: '../../static/logo.png',
        }, {
          title: '月份9',
          mainImage: '../../static/logo.png',
        }, {
          title: '月份10',
          mainImage: '../../static/logo.png',
        }, {
          title: '月份11',
          mainImage: '../../static/logo.png',
        }, {
          title: '月份12',
          mainImage: '../../static/logo.png',
        }],

        indicatorDots: true,
        autoplay: false,
        interval: 2000,
        duration: 500,
      }
    },
    onLoad() {
      this.navSetist();
    },
    methods: {
      navSetist() {
        // 分割数组
        function chunkArray(array, chunkSize) {  
            let index = 0;  
            let chunks = [];  
            while (index < array.length) {  
                chunks.push(array.slice(index, index + chunkSize));  
                index += chunkSize;  
            }  
            return chunks;  
        }  

        const data = this.navSet;
        const chunkedData = chunkArray(data, 8);
        this.navSet = chunkedData;
        console.log(chunkedData);
      },
    }
  }
</script>

<style>
  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
  }

  .swiper {
    height: 340rpx;
  }

  .swiper-item {
    display: block;
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
  }

  /* 金刚区 */
  .jing-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 10rpx;
    overflow: hidden;
  }

  .jing-grid {
    background-color: unset;
    margin-bottom: 30rpx;
  }

  .jing-title {
    font-size: 24rpx;
    margin-top: 10rpx;
  }
</style>

预览

总结

人生路漫漫，漫漫人生路，愿世界温柔以待，一蓑烟雨任平生