插件
<template>
<view class="componentsContent">
<scroll-view scroll-y="true" @scrolltolower="nextPage">
<view class="self-list">
<slot></slot>
<view v-if="showTipsText" class="listMore" @click="nextPage()">
<u-loadmore :status="listLoading" :load-text="loadText"></u-loadmore>
</view>
<view class="noneBlock" v-if="!showTipsText"></view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
props: {
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 20
},
listLoading: {
required: true,
type: String
},
showTipsText: {
type: Boolean,
default: true
},
loadText: {
type: Object,
default: () => ({
// loadmore: '请点击或轻轻上拉加载数据',
loadmore: '点击加载数据',
loading: '努力加载中',
nomore: '没有更多了'
})
}
},
computed: {
currentPage: {
get() {
return this.page
},
set(val) {
this.$emit('update:page', val)
}
},
pageSize: {
get() {
return this.limit
},
set(val) {
this.$emit('update:limit', val)
}
}
},
methods: {
nextPage() {
if(this.listLoading === 'loadmore'){
this.currentPage ++;
this.$emit('pagination');
}
}
}
}
</script>
<style scoped>
.componentsContent,.componentsContent>scroll-view{height:100%;}
/* .self-list{padding-top:15rpx;} */
.noneBlock{width:100%;height:50rpx;}
</style>
使用
<self-pagination class="self-pagination" :listLoading.sync="listLoading" :page.sync="where.page"
:limit.sync="where.limit" @pagination="getIndex">
<view class="" style="padding: 20rpx;">
<view class="" style="position: relative; " v-for="(item,index) in list" :key='index'>
<image style="width: 50rpx;height: 50rpx; position: absolute; left: 0rpx; top: 40rpx;"
src="https://ch-medical-online.oss-cn-chengdu.aliyuncs.com/20221223/24bdc05c267c4b1cbac16980e1580975.png"
mode="widthFix"></image>
<view class=""
style="border-bottom: 1px solid #f5f5f5; width: 85%; display: inline-block; margin-left: 70rpx;padding: 20rpx 0;">
<view class="overH">
<view class="left" style="font-weight: bold;">{
{item.title}}</view>
<view class="right " :class="{'color':item.pm == 1 }"
style=" font-weight: bold;">{
{ item.pm == 0 ? "-" : "+" }}{
{item.number}}
</view>
<!-- <view class="right " style="font-weight: bold;">-450</view> -->
</view>
<view class="overH">
<view class="left textColor">{
{item.createTime}}</view>
<!-- <view class="right textColor">赠送:{
{item.}}</view> -->
</view>
</view>
</view>
</view>
</self-pagination>
引入
import selfPagination from './self-pagination/index'
export default {
components: {
selfPagination
},