更新记录

1.2.5（2020-09-09）

兼容支付宝小程序

1.2.4（2020-08-26）

修改初始化从后台拿到数据赋值失败

1.2.3（2020-08-26）

代码重构

平台兼容性

使用方法

在script引用组件

import paging from '@/components/yang-paging/yang-paging.vue'
components: {
       paging
}

在template中使用组件

    <paging :total="total" :pageSize='3' v-model="curren" @changes="dd"></paging>

完整示例

<template>
    <view class="content">
        <view class="title margin-top">
            自定义配置
        </view>
        <paging :total="total" :pageSize='3' v-model="curren" @changes="dd"></paging>
        <view class="title margin-top">
            去掉上下分页 arrow:false
        </view>
        <paging :total="total" :pageSize='3' v-model="curren" :arrow="false" @changes="dd"></paging>
        <view class="title margin-top">
            去掉首页最后一页 first:false
        </view>
        <paging :total="total" :pageSize='3' :first="false" v-model="curren" @changes="dd">
            <template slot="arrow-left">
                <uni-icons type="arrowleft" size="15" color="#fff"></uni-icons>
            </template>
            <template slot="arrow-right">
                <uni-icons type="arrowright" size="15" color="#fff"></uni-icons>
            </template>
        </paging>
        <view class="title margin-top">
            自定义圆角度
        </view>
        <paging :total="total" :pageSize='3' :radius="5" v-model="curren" :arrow="false" @changes="dd"></paging>
        <view class="title margin-top">
            自定义颜色
        </view>
        <paging :total="total" :pageSize='3' background="#d4d4d4" color="#000000" activecolor="#ffffff" activebackground="linear-gradient(to right, #2193b0, #6dd5ed)"
         :first="false" v-model="curren" @changes="dd">
            <template slot="arrow-left">
                <uni-icons type="arrowleft" size="15" color="#000000"></uni-icons>
            </template>
            <template slot="arrow-right">
                <uni-icons type="arrowright" size="15" color="#000000"></uni-icons>
            </template>
        </paging>
        <button class="margin-top" type="primary" @click="dw()">点我切换总条数</button>
        <button class="margin-top" type="primary" @click="curren = 10">跳转到第10页</button>
    </view>
</template>

<script>
    import uniIcons from "@/components/uni-icons/uni-icons.vue"
    import paging from '@/components/yang-paging/yang-paging.vue'
    export default {
        components: {
            paging,
            uniIcons
        },
        data() {
            return {
                total: 300,
                curren: 1
            }
        },
        methods: {
            dd(index) {
                this.curren = index
            },
            dw() {
                this.total = 100
            },
        }
    }
</script>

<style>
    .title {
        font-size: 14px;
        line-height: 80rpx;
        color: #000;
        padding-left: 40rpx;
        text-align: center;
    }

    .margin-top {
        margin-top: 10px;
    }
</style>

paging 属性说明

slot

事件说明

End