上拉加载更多php,uni-app下拉刷新、上拉加载更多实现

下拉刷新

下拉刷新文档在js中定义onPullDownRefresh处理函数(和onLoad等生命周期函数同级)，监听该页面用户下拉刷新事件。需要在pages.json里，找到的当前页面的pages节点，并在style选项中开启enablePullDownRefresh:true。当处理完数据刷新后，uni.stopPullDownRefresh可以停止当前页面的下拉刷新。

实例

pages.json

{

"pages": [

{

"path": "pages/index/index",

"style": {

"navigationBarTitleText": "标题名称",

// App 和 小程序都开启下拉刷新

"enablePullDownRefresh": true

}

}

],

"globalStyle": {

"navigationBarTextStyle": "white",

"navigationBarBackgroundColor": "#0faeff",

"backgroundColor": "#fbf9fe"

}

}

index.vue

// 仅做示例，实际开发中延时根据需求来使用。

export default {

data: {

text: 'uni-app'

},

onLoad: function (options) {

setTimeout(function () {

console.log('start pulldown');

}, 1000);

uni.startPullDownRefresh();

},

onPullDownRefresh() {

console.log('refresh');

setTimeout(function () {

uni.stopPullDownRefresh();

}, 1000);

}

}

上拉加载

导入官方的一个上拉加载自定义组件

在 components 目录下(和 page 目录同级)新建一个 uni-load-more 文件夹，

然后创建一个文件 uni-load-more.vue

uni-load-more.vue 完整文件如下：

{{ status === 'more' ? contentText.contentdown : (status === 'loading' ? contentText.contentrefresh : contentText.contentnomore) }}

export default {

name: 'UniLoadMore',

props: {

status: {

// 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了

type: String,

default: 'more'

},

showIcon: {

type: Boolean,

default: true

},

color: {

type: String,

default: '#777777'

},

contentText: {

type: Object,

default () {

return {

contentdown: '上拉显示更多',

contentrefresh: '正在加载...',

contentnomore: '没有更多数据了'

}

}

}

},

data() {

return {}

}

}

@charset "UTF-8";

.uni-load-more {

display: flex;

flex-direction: row;

height: 80upx;

align-items: center;

justify-content: center

}

.uni-load-more__text {

font-size: 28upx;

color: #999

}

.uni-load-more__img {

height: 24px;

width: 24px;

margin-right: 10px

}

.uni-load-more__img>view {

position: absolute

}

.uni-load-more__img>view view {

width: 6px;

height: 2px;

border-top-left-radius: 1px;

border-bottom-left-radius: 1px;

background: #999;

position: absolute;

opacity: .2;

transform-origin: 50%;

animation: load 1.56s ease infinite

}

.uni-load-more__img>view view:nth-child(1) {

transform: rotate(90deg);

top: 2px;

left: 9px

}

.uni-load-more__img>view view:nth-child(2) {

transform: rotate(180deg);

top: 11px;

right: 0

}

.uni-load-more__img>view view:nth-child(3) {

transform: rotate(270deg);

bottom: 2px;

left: 9px

}

.uni-load-more__img>view view:nth-child(4) {

top: 11px;

left: 0

}

.load1,

.load2,

.load3 {

height: 24px;

width: 24px

}

.load2 {

transform: rotate(30deg)

}

.load3 {

transform: rotate(60deg)

}

.load1 view:nth-child(1) {

animation-delay: 0s

}

.load2 view:nth-child(1) {

animation-delay: .13s

}

.load3 view:nth-child(1) {

animation-delay: .26s

}

.load1 view:nth-child(2) {

animation-delay: .39s

}

.load2 view:nth-child(2) {

animation-delay: .52s

}

.load3 view:nth-child(2) {

animation-delay: .65s

}

.load1 view:nth-child(3) {

animation-delay: .78s

}

.load2 view:nth-child(3) {

animation-delay: .91s

}

.load3 view:nth-child(3) {

animation-delay: 1.04s

}

.load1 view:nth-child(4) {

animation-delay: 1.17s

}

.load2 view:nth-child(4) {

animation-delay: 1.3s

}

.load3 view:nth-child(4) {

animation-delay: 1.43s

}

@-webkit-keyframes load {

0% {

opacity: 1

}

100% {

opacity: .2

}

}

导入自定义的上拉加载组件，监听上拉加载，修改上拉加载的状态

完整的使用例子如下：

{{ item }}

import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'

export default {

data() {

return {

list_array: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18',

'19',

'20','1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'

],

status: 'more',

statusTypes: [{

value: 'more',

text: '加载前'

}, {

value: 'loading',

text: '加载中'

}, {

value: 'noMore',

text: '没有更多'

}],

contentText: {

contentdown: '查看更多',

contentrefresh: '加载中',

contentnomore: '没有更多'

}

}

},

components: {

uniLoadMore

},

onLoad: function(options) {

setTimeout(function() {

console.log('start pulldown');

}, 1000);

uni.startPullDownRefresh();

},

// 下拉刷新

onPullDownRefresh() {

console.log('refresh');

setTimeout(function() {

uni.stopPullDownRefresh();

}, 1000);

},

// 上拉加载

onReachBottom() {

let _self = this

this.status = 'loading'

uni.showNavigationBarLoading()

console.log('reach');

setTimeout(function() {

for (var i = 0; i < 10; i++) {

_self.list_array.push("000" + i)

}

_self.status = 'more'

uni.hideNavigationBarLoading()

}, 2000);

},

methods: {

}

}

page {

display: flex;

flex-direction: column;

box-sizing: border-box;

background-color: #fff

}

view {

font-size: 28upx;

line-height: inherit

}

.example {

padding: 0 30upx 30upx

}

.example-title {

font-size: 32upx;

line-height: 32upx;

color: #777;

margin: 40upx 25upx;

position: relative

}

.example .example-title {

margin: 40upx 0

}

.example-body {

padding: 0 40upx

}

uni-radio-group uni-label {

padding: 0;

}

.uni-list-item__container {

padding: 24upx 30upx;

width: 100%;

box-sizing: border-box;

flex: 1;

position: relative;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

}

.uni-list-item__container:after {

position: absolute;

z-index: 3;

right: 0;

bottom: 0;

left: 30upx;

height: 1px;

content: '';

-webkit-transform: scaleY(.5);

transform: scaleY(.5);

background-color: #c8c7cc;

}

打赏

微信扫一扫，打赏作者吧～