单页
<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+20
if (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;
}
}
}
}
}方法函数文章来源：https://www.toymoban.com/news/detail-689561.html
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 个元素。这样可以确保每个轮播项内都有相同数量的组合套餐信息。这个方法返回一个包含子数组的数组，用于在轮播组件中进行循环渲染。文章来源地址https://www.toymoban.com/news/detail-689561.html
到了这里，关于如何快速生成一个H5滑动的卡片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
