?單頁(yè)

 <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套餐專(zhuān)享",
       
        },
        {
          A: "套餐打折",
          B: "五G套餐專(zhuān)享",
          
        },
        {
          A: "套餐打折",
          B: "五G套餐專(zhuān)享",
          
        },
        {
          A: "套餐打折",
          B: "五G套餐專(zhuān)享",
       
        },
        {
          A: "套餐打折",
          B: "五G套餐專(zhuān)享",
    
        },
        {
          A: "套餐打折",
          B: "五G套餐專(zhuān)享",
   
        },
        {
          A: "套餐打折",
          B: "五G套餐專(zhuān)享",
  
        },
        {
          A: "套餐打折",
          B: "五G套餐專(zhuān)享",
  
        },
        {
          A: "套餐打折",
          B: "五G套餐專(zhuān)享",

        },
      ],




  .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;
        }
      }
    }

當(dāng)要對(duì)滾動(dòng)做一些處理的時(shí)候可以參考下面的代碼?

    handleScroll(event) {
          // 獲取滾動(dòng)的距離
      const scrollDistance = event.target.scrollLeft;
        當(dāng)前視口的寬度
      var viewportWidth = window.innerWidth || document.documentElement.clientWidth;

      // 獲取第一個(gè) li 元素的寬度
      const firstItemWidth = this.$refs.comboList.querySelector('.combo li:first-child').clientWidth;
      // console.log(scrollDistance,'滾動(dòng)');
      // 判斷滾動(dòng)的距離是否超過(guò)第一個(gè)盒子的寬度,外邊距10*(n-1)+視口內(nèi)邊距20 = 30+20
      if (scrollDistance >= 4*firstItemWidth-viewportWidth+50) {
        console.log(scrollDistance,viewportWidth-20,4*firstItemWidth,'滾動(dòng)距離超過(guò)第一個(gè)盒子的寬度！');
        // 在這里進(jìn)行你的打印操作或其他操作
      }
    },

分頁(yè)

這里以vant的輪播圖組件

?結(jié)構(gòu)

 <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;
                  } 
              }
             }
          } 
    }

?方法函數(shù)

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, // 每個(gè) <van-swipe-item> 包含的數(shù)據(jù)數(shù)量
},
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);
        //需要處理的邏輯
    }
}

計(jì)算屬性用于將原始的 comboArr 數(shù)組切分成多個(gè)子數(shù)組，每個(gè)子數(shù)組包含 itemsPerSwipe 個(gè)元素。這樣可以確保每個(gè)輪播項(xiàng)內(nèi)都有相同數(shù)量的組合套餐信息。這個(gè)方法返回一個(gè)包含子數(shù)組的數(shù)組，用于在輪播組件中進(jìn)行循環(huán)渲染。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-689561.html

到了這里，關(guān)于如何快速生成一個(gè)H5滑動(dòng)的卡片的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！