提交 ef4b31e0 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

test(pulldown refresh): 优化下拉刷新示例并补充测试

上级 354384a3
const PAGE_PATH = "/pages/API/pull-down-refresh/pull-down-refresh"
describe("payment", () => {
if (process.env.uniTestPlatformInfo.indexOf('web') > -1 || process.env.UNI_AUTOMATOR_APP_WEBVIEW === 'true') {
it('web || app-webview', () => {
expect(1).toBe(1)
})
return
}
it("trigger pulldown refresh by swipe", async () => {
const page = await program.navigateTo(PAGE_PATH)
await page.waitFor('view')
await page.waitFor(4000)
await page.setData({
pulldownRefreshTriggered: false
})
await program.swipe({
startPoint: {
x: 100,
y: 400
},
endPoint: {
x: 100,
y: 800
},
duration: 1000
})
await page.waitFor(1500)
expect(await page.data('pulldownRefreshTriggered')).toBe(true)
});
});
<template>
<scroll-view style="flex: 1;">
<!-- 实际开发中,长列表应该使用list-view -->
<view class="uni-padding-wrap uni-common-mt">
<text class="text" v-for="(num,index) in data" :key="index">list - {{num}}</text>
<view v-if="showLoadMore">{{loadMoreText}}</view>
</view>
</scroll-view>
</template>
<script lang="uts">
export default {
data() {
return {
data: [] as Array<number>,
loadMoreText: "加载中...",
showLoadMore: false,
max: 0
}
},
onReady() {
uni.startPullDownRefresh();
this.initData();
},
onReachBottom() {
console.log("onReachBottom");
if (this.max > 40) {
this.loadMoreText = "没有更多数据了!"
return;
}
this.showLoadMore = true;
setTimeout(() => {
this.setListData();
}, 300);
},
onPullDownRefresh() {
console.log('onPullDownRefresh');
this.initData();
},
methods: {
initData(){
setTimeout(() => {
this.max = 0;
this.data = [];
let data:Array<number> = [];
this.max += 20;
for (let i:number = this.max - 19; i < this.max + 1; i++) {
data.push(i)
}
this.data = this.data.concat(data);
uni.stopPullDownRefresh();
}, 1000);
},
setListData() {
let data:Array<number> = [];
this.max += 10;
for (let i:number = this.max - 9; i < this.max + 1; i++) {
data.push(i)
}
this.data = this.data.concat(data);
}
}
}
</script>
<style>
.text {
margin: 6px 0;
width:100%;
background-color: #fff;
height: 52px;
line-height: 52px;
text-align: center;
color: #555;
border-radius: 4px;
}
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1;">
<!-- #endif -->
<!-- 实际开发中,长列表应该使用list-view -->
<view class="uni-padding-wrap uni-common-mt">
<text class="text" v-for="(num,index) in data" :key="index">list - {{num}}</text>
<view v-if="showLoadMore">{{loadMoreText}}</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
export default {
data() {
return {
data: [] as Array<number>,
loadMoreText: "加载中...",
showLoadMore: false,
max: 0,
pulldownRefreshTriggered: false
}
},
onReady() {
uni.startPullDownRefresh();
this.initData();
},
onReachBottom() {
console.log("onReachBottom");
if (this.max > 40) {
this.loadMoreText = "没有更多数据了!"
return;
}
this.showLoadMore = true;
setTimeout(() => {
this.setListData();
}, 300);
},
onPullDownRefresh() {
console.log('onPullDownRefresh');
this.pulldownRefreshTriggered = true
this.initData();
},
methods: {
initData() {
setTimeout(() => {
this.max = 0;
this.data = [];
let data : Array<number> = [];
this.max += 20;
for (let i : number = this.max - 19; i < this.max + 1; i++) {
data.push(i)
}
this.data = this.data.concat(data);
uni.stopPullDownRefresh();
}, 1000);
},
setListData() {
let data : Array<number> = [];
this.max += 10;
for (let i : number = this.max - 9; i < this.max + 1; i++) {
data.push(i)
}
this.data = this.data.concat(data);
}
}
}
</script>
<style>
.text {
margin: 6px 0;
width: 100%;
background-color: #fff;
height: 52px;
line-height: 52px;
text-align: center;
color: #555;
border-radius: 4px;
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册