更新记录

1.1.5（2023-03-02）

更新使用案例

1.1.2（2023-03-02）

更新使用说明

1.1.0（2023-03-02）

更新使用说明

平台兼容性

lzl-paging

说明

lzl-paging 是一个可左右滑动的翻页组件，常用于数据加载翻页

属性说明

使用案例

<template>
    <view class="paging">
        <view class="item">
            <lzl-paging
            :total="300" 
            :size="10" 
            :current="page" 
            @change="pageChange" />
        </view>
        <view class="item">
            <lzl-paging
            :total="200" 
            :size="10" 
            :current="4" 
            activeBg="#badc58"
            color="#badc58"
            btnColor="#badc58"
            @change="pageChange" />
        </view> 
        <view class="item">
            <lzl-paging
            :total="300" 
            :size="10" 
            :current="10" 
            activeBg="#f66f6a"
            btnBgColor="#7ed6df"
            color="#f66f6a"
            btnColor="#ffffff"
            @change="pageChange" />
        </view>
        <view class="item">
            <lzl-paging
            :total="300" 
            :size="10" 
            :current="6"
            activeBg="linear-gradient(to right,#f0932b,#badc58)"
            @change="pageChange" />
        </view>
        <view class="item">
            <lzl-paging
            :total="300" 
            :size="10" 
            :current="12"
            btnBgColor="#686de0"
            btnColor="#ffffff"
            activeBg="linear-gradient(to right,#4834d4,#686de0)"
            :fixed="true"
            @change="pageChange" />
        </view>
    </view> 
</template>

<script>
    export default {
        data() {
            return {
                page: 1
            }
        },
        methods: {
            pageChange(page) {
                console.log(page)
            }
        }
    }
</script>

<style lang="scss" scoped>
.paging {
    margin-top: 100rpx;
    padding-left: 24rpx;
    padding-right: 24rpx;
    box-sizing: border-box;
}
.item {
    margin: 30rpx 0;
}
</style>