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
}

你可能感兴趣的:(1024程序员节)