swiper纵向滑动一页显示两项div

   <Swiper
                                 v-if="deviceData.devices.length !== 0"
                                 :modules="modules"
                                 :slides-per-view="1"
                                 direction="vertical"
                                 :autoplay="{
                                    delay: 30000,
                                    disableOnInteraction: false
                                 }"
                                 :loop="true"
                                 :virtual="Math.ceil((deviceData.devices.length / 2)) > 10"
                            >
                                <swiper-slide v-for="(item, idx) in Math.ceil((deviceData.devices.length / 2))" :key="idx" :virtualIndex="idx">
                                    <div class="swiper-container">
                                    <div  class="device-info"  v-for="(device,newidx) in fn(deviceData.devices,idx)" :key="newidx">
                                        <div class="device-name">
                                            <div class="icon">{{device.deviceCount || 0}}</div>
                                            <div class="name">{{ device.name }}</div>
                                        </div>
                                        <div class="device-status running-block">
                                            <div class="title">
                                                <div class="line"></div>
                                                运行情况
                                            </div>
                                            <div class="data">
                                                <div class="block running">
                                                    <div class="label">运行</div>
                                                    <div class="value">{{ device.runningStats['runningCount'] || '0' }}</div>
                                                </div>
                                                <div class="block standBy">
                                                    <div class="label">待机</div>
                                                    <div class="value">{{ device.runningStats['standbyCount'] || '0' }}</div>
                                                </div>
                                                <div class="block standBy">
                                                    <div class="label">离线</div>
                                                    <div class="value">{{ device.runningStats['offlineCount'] || '0' }}</div>
                                                </div>
                                                <div class="block standBy">
                                                    <div class="label">停机</div>
                                                    <div class="value">{{ device.runningStats['stoppingCount'] || '0' }}</div>
                                                </div>
                                            </div>

                                            <div class="div-right-border"></div>
                                        </div>
                                        <div class="device-status">
                                            <div class="title">
                                                <div class="line"></div>
                                                报警情况
                                            </div>
                                            <div class="data">
                                                <div class="block warning">
                                                    <div class="label">报警</div>
                                                    <div class="value">{{ device.healthStats['alarmCount'] || '0' }}</div>
                                                </div>
                                                <div class="block early-waring">
                                                    <div class="label">预警</div>
                                                    <div class="value">{{ device.healthStats['warningCount'] || '0' }}</div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                    </div>
                                </swiper-slide>
                            </Swiper>
const modules = [Autoplay, Virtual, Pagination, Mousewheel]
// 根据一个slide过滤数据显示
const fn = (data, deviceIndex) => {
    let newData = data.filter((item, idx) => {
        // data.length % 4 == 0
        if ((deviceIndex + 1) / 2 < data.length) {
            return idx >= deviceIndex * 2 && idx <= deviceIndex * 2 + 1
        } else {
            return idx >= deviceIndex * 2 - 1 && idx <= (deviceIndex * 2 + (data.length % 2 - 1))
        }
    })
    return newData
}
  • 12
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值