提交 f40c5207 编写于 作者: shutao-dc's avatar shutao-dc

update sticky-section示例

上级 a81052d8
......@@ -12,6 +12,16 @@ describe('component-native-sticky-section', () => {
const image = await program.screenshot();
expect(image).toMatchImageSnapshot();
})
it('check_goto_sticky_header', async () => {
//滚动回顶部
await page.callMethod('toTop')
page.waitFor(100)
//跳转到id为C的StickyHeader位置
await page.callMethod('gotoStickyHeader', 'C')
const image = await program.screenshot();
expect(image).toMatchImageSnapshot();
})
} else {
// TODO: web 端暂不支持
it('web', async () => {
......
<template>
<list-view id="list-view" ref="list-view" show-scrollbar=false class="page" rebound="false">
<list-view id="list-view" ref="list-view" show-scrollbar=false class="page" :scroll-into-view="scrollIntoView"
@scroll="onScroll" rebound="false">
<list-item style="padding: 10px; margin: 5px 0;align-items: center;" type = 20>
<button @click="gotoStickyHeader('C')" size="mini">跳转到id为C的sticky-header位置上</button>
</list-item>
<sticky-section v-for="(sectionText) in data" :padding="sectionPadding" :push-pinned-header="true">
<sticky-header :header-id="sectionText">
<sticky-header :header-id="sectionText" :id="sectionText">
<text class="sticky-header-text">{{sectionText}}</text>
</sticky-header>
<list-item v-for="i in 10" class="content-item" :type=10>
<text class="text">{{sectionText}}--item--content----{{i}}</text>
</list-item>
</sticky-section>
<list-item style="padding: 10px; margin: 5px 0;align-items: center;">
<list-item style="padding: 10px; margin: 5px 0;align-items: center;" type= 30>
<!-- <text style="color: #aaa">到底了</text> -->
<button @click="toTop" size="mini">回到顶部</button>
</list-item>
......@@ -20,17 +24,28 @@
data() {
return {
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
sectionPadding: [0, 10, 0, 10] as Array<number>
sectionPadding: [0, 10, 0, 10] as Array<number>,
scrollIntoView: ""
}
},
methods: {
toTop(){
this.scrollIntoView = ""
uni.getElementById("list-view")!.scrollTop = 0
},
//用于自动化测试
listViewScrollByY(y : number) {
const listview = this.$refs["list-view"] as Element
listview.scrollBy(0, y)
},
gotoStickyHeader(id : string) {
this.scrollIntoView = id
},
onScroll() {
//滚动后重置scrollIntoView = ""
if(this.scrollIntoView != "") {
this.scrollIntoView = ""
}
}
}
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册