如何快速生成一个H5滑动的卡片（单页和分页都有）

 单页

 <ul class="combo"><li v-for="(item, index) in arr" :key="index"><div class="combo-name">{{ item.A }}</div><div class="combo-price">{{ item.B }}</div><div class="combo-button" @click="handleImmediatelyData(item, idx)">立即办理</div></li></ul> arr: [{A: "套餐打折",B: "五G套餐专享",},{A: "套餐打折",B: "五G套餐专享",},{A: "套餐打折",B: "五G套餐专享",},{A: "套餐打折",B: "五G套餐专享",},{A: "套餐打折",B: "五G套餐专享",},{A: "套餐打折",B: "五G套餐专享",},{A: "套餐打折",B: "五G套餐专享",},{A: "套餐打折",B: "五G套餐专享",},{A: "套餐打折",B: "五G套餐专享",},],.combo {width: 100%;// height: 86px;box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.05);border-radius: 0px 0px 0px 0px;opacity: 1;margin-top: 12px;display: -webkit-box;overflow-x: auto;-webkit-overflow-scrolling: touch;.combo::-webkit-scrollbar {display: none;// width: 0px;opacity: 0;}li {display: flex;justify-content: center;align-items: center;flex-direction: column;text-align: center;width: 90px;height: 90px;// background: linear-gradient(320deg, #ffffff 0%, #f9daa4 100%);background-color: #fff;border-radius: 8px 8px 8px 8px;opacity: 1;// border: 1px solid #ffffff;margin-left: 10px;margin-bottom: 5px;&:first-child{margin-left: 0;}.combo-title {line-height: 20px;font-size: 14px;font-weight: 400;color: blue;}.combo-price {font-size: 13px;font-weight: 600;color: #fca418;height: 20px;line-height: 20px;margin-top: 6px;margin-bottom: 6px;}.combo-button {border-radius: 40px 40px 40px 40px;font-size: 12px;background: #fca418;font-weight: 400;color: #fff;line-height: 20px;width: 65px;}}}

当要对滚动做一些处理的时候可以参考下面的代码 

    handleScroll(event) {// 获取滚动的距离const scrollDistance = event.target.scrollLeft;当前视口的宽度var viewportWidth = window.innerWidth || document.documentElement.clientWidth;// 获取第一个 li 元素的宽度const firstItemWidth = this.$refs.comboList.querySelector('.combo li:first-child').clientWidth;// console.log(scrollDistance,'滚动');// 判断滚动的距离是否超过第一个盒子的宽度,外边距10*(n-1)+视口内边距20 = 30+20if (scrollDistance >= 4*firstItemWidth-viewportWidth+50) {console.log(scrollDistance,viewportWidth-20,4*firstItemWidth,'滚动距离超过第一个盒子的宽度！');// 在这里进行你的打印操作或其他操作}},

分页

这里以vant的轮播图组件

 结构

 <div class="combo-swiper"><van-swipe class="my-swipe" indicator-color="white" :loop="false" v-if="info.event.length"><van-swipe-item v-for="(slice, sliceIndex) in comboArrChunks" :key="sliceIndex"><div class="combo-swiper-box"><div v-for="(item, itemIndex) in slice" :key="itemIndex" class="swiper-son"><div class="li-title">{{ item.spec }}</div><div class="li-text">{{ item.activityName }}</div><div class="li-bnt" @click="handleImmediatelyData(item, sliceIndex * 3 + itemIndex)">立即办理</div></div></div></van-swipe-item></van-swipe></div>

 样式

 .combo-swiper{width: 100%;.my-swipe .van-swipe-item {width: 100%;height: 100px;color: #fff;font-size: 20px;line-height: 150px;text-align: center;margin-bottom: 20px;margin-top: 10px;.combo-swiper-box{display: flex;// justify-content: center;align-items: center;flex-wrap: wrap;flex-direction: row;.swiper-son{width: 100px;height: 90px;margin-right: 10px;padding: 5px;border-radius: 8px;background-color: #fff;text-align: center;&:nth-child(3){margin-right:0;}   .li-title{font-size: 14px;margin-top: 5px;line-height: 20px;font-weight: bold;color: #575757;padding-top: 2px;}.li-text {font-size: 12px;margin: 5px 0px;height: 20px;line-height: 20px;color: #fca418;}.li-bnt {width: 80%;  height: 18px;font-size: 12px;line-height: 18px;padding: 2px 6px;margin:0 auto;background: #fca418;color: #fff;border-radius: 40px 40px 40px 40px;} }}} }

 方法函数

data(){return{comboArr: [{ spec: 'Spec A', activityName: 'Activity 1' },{ spec: 'Spec B', activityName: 'Activity 2' },{ spec: 'Spec C', activityName: 'Activity 3' },{ spec: 'Spec D', activityName: 'Activity 4' },{ spec: 'Spec E', activityName: 'Activity 5' }],itemsPerSwipe: 3, // 每个 <van-swipe-item> 包含的数据数量
},
computed: {comboArrChunks() {const chunks = [];if (this.info.event) {for (let i = 0; i < this.comboArr.length; i += this.itemsPerSwipe) {chunks.push(this.comboArr.slice(i, i + this.itemsPerSwipe));}}return chunks;},},  
methods：{handleImmediatelyData(item, index){console.log(item，index);//需要处理的逻辑}
}

计算属性用于将原始的 comboArr 数组切分成多个子数组，每个子数组包含 itemsPerSwipe 个元素。这样可以确保每个轮播项内都有相同数量的组合套餐信息。这个方法返回一个包含子数组的数组，用于在轮播组件中进行循环渲染。