提交 0e5db17f 编写于 作者: W wanganxp

页面滚动添加动画、补充页面下拉刷新

上级 156d12f9
...@@ -226,6 +226,13 @@ ...@@ -226,6 +226,13 @@
"enablePullDownRefresh": true "enablePullDownRefresh": true
} }
}, },
{
"path": "pages/API/pull-down-refresh/pull-down-refresh",
"style": {
"navigationBarTitleText": "页面级下拉刷新",
"enablePullDownRefresh": true
}
},
{ {
"path": "pages/API/nodes-info/nodes-info", "path": "pages/API/nodes-info/nodes-info",
"style": { "style": {
......
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1"> <scroll-view style="flex: 1" scroll-with-animation="true">
<!-- #endif --> <!-- #endif -->
<view class="uni-padding-wrap"> <view class="uni-padding-wrap">
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
......
<template> <template>
<view> <scroll-view>
<page-head :title="title"></page-head> <!-- 实际开发中,长列表应该使用list-view -->
<view class="uni-padding-wrap uni-common-mt"> <view class="uni-padding-wrap uni-common-mt">
<view style="font-size: 12px; color: #666;">注:PC 不支持下拉刷新</view>
<view class="text" v-for="(num,index) in data" :key="index">list - {{num}}</view> <view class="text" v-for="(num,index) in data" :key="index">list - {{num}}</view>
<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view> <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
</view> </view>
</view> </scroll-view>
</template> </template>
<script lang="uts"> <script lang="uts">
export default { export default {
data() { data() {
return { return {
title: '下拉刷新 + 加载更多', data: [] as Array<number>,
data: [],
loadMoreText: "加载中...", loadMoreText: "加载中...",
showLoadMore: false, showLoadMore: false,
max: 0 max: 0
...@@ -22,12 +20,6 @@ ...@@ -22,12 +20,6 @@
onLoad() { onLoad() {
this.initData(); this.initData();
}, },
onUnload() {
this.max = 0,
this.data = [],
this.loadMoreText = "加载更多",
this.showLoadMore = false;
},
onReachBottom() { onReachBottom() {
console.log("onReachBottom"); console.log("onReachBottom");
if (this.max > 40) { if (this.max > 40) {
...@@ -48,9 +40,9 @@ ...@@ -48,9 +40,9 @@
setTimeout(() => { setTimeout(() => {
this.max = 0; this.max = 0;
this.data = []; this.data = [];
let data = []; let data:Array<number> = [];
this.max += 20; this.max += 20;
for (var i = this.max - 19; i < this.max + 1; i++) { for (let i:number = this.max - 19; i < this.max + 1; i++) {
data.push(i) data.push(i)
} }
this.data = this.data.concat(data); this.data = this.data.concat(data);
...@@ -58,9 +50,9 @@ ...@@ -58,9 +50,9 @@
}, 300); }, 300);
}, },
setListData() { setListData() {
let data = []; let data:Array<number> = [];
this.max += 10; this.max += 10;
for (var i = this.max - 9; i < this.max + 1; i++) { for (let i:number = this.max - 9; i < this.max + 1; i++) {
data.push(i) data.push(i)
} }
this.data = this.data.concat(data); this.data = this.data.concat(data);
......
...@@ -130,7 +130,7 @@ export default { ...@@ -130,7 +130,7 @@ export default {
{ {
name: '下拉刷新', name: '下拉刷新',
url: 'pull-down-refresh', url: 'pull-down-refresh',
enable: false, // enable: false,
}, },
{ {
name: '将页面滚动到指定位置', name: '将页面滚动到指定位置',
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册