uniapp之list组件pagingEnabled分页显示当前页currentPage

list滚动列表

技术栈：uniapp，nvue，list组件

由于list组件中并没有像swiper那样的显示当前位置的属性，所以我们只能通过计算得到当前显示页。

list

cell

getSystemInfoSync()

<template>
    <view class="subNvue" :style="{width,height}">
        <list :show-scrollbar="false" :pagingEnabled="true" @scroll="onScroll">
            <cell v-for="item in 5" class="listItem" :style="{height}">{{item}}当前页是：{{currentPage}}</cell>
        </list>
    </view>
</template>
​
<script>
    let timer = null;
    export default {
        data() {
            return {
                width: uni.getSystemInfoSync().screenWidth,
                height: uni.getSystemInfoSync().screenHeight,
                currentPage:1,
            }
        },
        methods: {
            onScroll(e) {
                let y = Math.abs(e.contentOffset.y) + uni.getSystemInfoSync().screenHeight
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    this.currentPage = Math.round(y / 888);
                    timer = null
                }, 100)
            },
        }
    }
</script>
​
<style>
    .subNvue {}
​
    .listItem {
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #000;
    }
</style>

水一篇