• (H5轮播)vue一个轮播里显示多个内容/一屏展示两个半内容

    效果图 :

    html: 

    1.   <div class="content">
    2.           <van-swipe
    3.             class="my-swipe com-long-swipe-indicator"
    4.             :autoplay="2500"
    5.             indicator-color="#00C4FF"
    6.           >
    7.             <van-swipe-item
    8.               class="flex-row-wrap"
    9.               v-for="(items, index) in Math.ceil(conferenceData.length / 9)"
    10.               :key="`guests_${index}`"
    11.             >
    12.               <div
    13.                 v-for="(item, index) in conferenceData.slice(
    14.                   (items - 1) * 9,
    15.                   items * 9
    16.                 )"
    17.                 :key="index"
    18.                 class="conference-guests-item-box"
    19.               >
    20.                 <div
    21.                   class="conference-guests-item-img flex-column-start-end"
    22.                   :style="{ background: 'url(' + item.picture + ')' }"
    23.                 >
    24.                   <div class="conference-guests-item-text">
    25.                     <div class="conference-guests-item-name">
    26.                       {{ item.name }}
    27.                     </div>
    28.                     <div class="conference-guests-item-company">
    29.                       {{ item.company }}
    30.                     </div>
    31.                     <div class="conference-guests-item-profession">
    32.                       {{ item.profession }}
    33.                     </div>
    34.                   </div>
    35.                 </div>
    36.               </div>
    37.             </van-swipe-item>
    38.           </van-swipe>
    39.         </div>

    return里声明的数据或者直接使用后台返回的数据

    1.  conferenceData: [
    2.         {
    3.           company: "科技公司",
    4.           name: "张三",
    5.           pawId: "3760726639167201673",
    6.           picture:
    7.             "../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",
    8.           profession: "执行董事/董事长兼首席执行官",
    9.           sort: 0,
    10.           webGuestId: "3775644503695286273",
    11.         },
    12.         {
    13.           company: "科技公司",
    14.           name: "张三",
    15.           pawId: "3760726639167201673",
    16.           picture:
    17.             "../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",
    18.           profession: "执行董事/董事长兼首席执行官",
    19.           sort: 1,
    20.           webGuestId: "3775644503695286273",
    21.         },
    22.         {
    23.           company: "科技公司",
    24.           name: "张三",
    25.           pawId: "3760726639167201673",
    26.           picture:
    27.             "../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",
    28.           profession: "执行董事/董事长兼首席执行官",
    29.           sort: 2,
    30.           webGuestId: "3775644503695286273",
    31.         },
    32.         {
    33.           company: "科技公司",
    34.           name: "张三",
    35.           pawId: "3760726639167201673",
    36.           picture:
    37.             "../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",
    38.           profession: "执行董事/董事长兼首席执行官",
    39.           sort: 3,
    40.           webGuestId: "3775644503695286273",
    41.         },
    42.         {
    43.           company: "科技公司",
    44.           name: "张三",
    45.           pawId: "3760726639167201673",
    46.           picture:
    47.             "../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",
    48.           profession: "执行董事/董事长兼首席执行官",
    49.           sort: 4,
    50.           webGuestId: "3775644503695286273",
    51.         },
    52.         {
    53.           company: "科技公司",
    54.           name: "张三",
    55.           pawId: "3760726639167201673",
    56.           picture:
    57.             "../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",
    58.           profession: "执行董事/董事长兼首席执行官",
    59.           sort: 5,
    60.           webGuestId: "3775644503695286273",
    61.         },
    62.         {
    63.           company: "科技公司",
    64.           name: "张三",
    65.           pawId: "3760726639167201673",
    66.           picture:
    67.             "../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",
    68.           profession: "执行董事/董事长兼首席执行官",
    69.           sort: 6,
    70.           webGuestId: "3775644503695286273",
    71.         },
    72.         {
    73.           company: "科技公司",
    74.           name: "张三",
    75.           pawId: "3760726639167201673",
    76.           picture:
    77.             "../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",
    78.           profession: "执行董事/董事长兼首席执行官",
    79.           sort: 7,
    80.           webGuestId: "3775644503695286273",
    81.         },
    82.         {
    83.           company: "科技公司",
    84.           name: "张三",
    85.           pawId: "3760726639167201673",
    86.           picture:
    87.             "../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",
    88.           profession: "执行董事/董事长兼首席执行官",
    89.           sort: 8,
    90.           webGuestId: "3775644503695286273",
    91.         },
    92.         {
    93.           company: "科技公司",
    94.           name: "张三",
    95.           pawId: "3760726639167201673",
    96.           picture:
    97.             "../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",
    98.           profession: "执行董事/董事长兼首席执行官",
    99.           sort: 9,
    100.           webGuestId: "3775644503695286273",
    101.         },
    102.         {
    103.           company: "科技公司",
    104.           name: "张三",
    105.           pawId: "3760726639167201673",
    106.           picture:
    107.             "../digital_system/cbc8a90f3a6a4e699646a0d45f89a001.jpg",
    108.           profession: "执行董事/董事长兼首席执行官",
    109.           sort: 10,
    110.           webGuestId: "3775644503695286273",
    111.         },
    112.       ], //嘉宾数据

    css:

    1. .flex-row-wrap {
    2.   display: flex;
    3.   flex-direction: row;
    4.   flex-wrap: wrap;
    5. }
    6. .flex-column-start-end {
    7.   display: flex;
    8.   flex-direction: column;
    9.   align-items: flex-start;
    10.   justify-content: flex-end;
    11. }
    12. .conference-guests-item-box {
    13.     flex: 0 0 33.33%;
    14.   }
    15.   .conference-guests-item-img {
    16.     width: 100%;
    17.     height: 2.28rem;
    18.     background-size: 100% !important;
    19.   }
    20.   .conference-guests-item-text {
    21.     padding: 0 0 0.06rem 0.2rem;
    22.     font-size: 0.12rem;
    23.     font-family: PingFangSC-Medium, PingFang SC;
    24.     font-weight: 500;
    25.     color: #ffffff;
    26.     line-height: 0.16rem;
    27.   }
    28.   .conference-guests-item-name {
    29.     font-size: 0.16rem;
    30.     font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
    31.     font-weight: 800;
    32.     color: #ffffff;
    33.     line-height: 0.23rem;
    34.     margin-bottom: 0.08rem;
    35.   }

    效果图：

    html:

    cnLeftItem:[]为后台返回数据

    1.       <van-swipe
    2.               class="com-long-swipe-indicator"
    3.               :loop="false"
    4.               :width="swipeWidth"
    5.             >
    6.               <van-swipe-item v-for="item in cnLeftItem" :key="item.webNewsId">
    7.                 <a
    8.                   :href="item.jumpLink || 'javascript:;'"
    9.                   target="_blank"
    10.                   class="report-item default-bg"
    11.                   :style="{
    12.                     'background-image': `url(${item.cover})`,
    13.                   }"
    14.                 >
    15.                   <span class="report-item-news-title van-multi-ellipsis--l2">
    16.                     {{ item.newsTitle }}
    17.                   </span>
    18.                 </a></van-swipe-item
    19.               >
    20.             </van-swipe>

    js:

    1.   created() {
    2.     //一定要写在created里，在数据渲染完成之前拿到屏幕宽度
    3.     this.bodyWidth = window.innerWidth;
    4.     this.swipeWidth = window.innerWidth * 0.3946;
    5.   },

  • 相关阅读:
    Postgresql中触发器的使用
    react：值得一看的“react哲学”
    Nginx配置动态反向代理
    远程桌面访问MATLAB 2018B，提示License Manger Error -103，终极解决方案
    Unity9 路径权限、场景的加载、异步加载、场景跳转
    C++ std::default_random_engine的使用
    软件2班20240418
    左（6）hash，大数据，位运算
    Linux hook 技术一个简单demo分析
    Xcode报错“compact unwind compressed function offset doesn‘t fit in 24 bits
  • 原文地址：https://blog.csdn.net/leng0920/article/details/133929757