Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
2e71c1b3
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
6170
Star
101
Fork
176
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
21
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
21
Issue
21
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
2e71c1b3
编写于
7月 17, 2024
作者:
shutao-dc
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update sticky-section.uvue 新增动态新增元素测试例
上级
0471b5a9
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
44 addition
and
8 deletion
+44
-8
pages/component/sticky-section/sticky-section.uvue
pages/component/sticky-section/sticky-section.uvue
+44
-8
未找到文件。
pages/component/sticky-section/sticky-section.uvue
浏览文件 @
2e71c1b3
<template>
<page-head title="sticky-section"></page-head>
<list-view id="list-view" ref="list-view" show-scrollbar=false class="page" :scroll-into-view="scrollIntoView"
@scroll="onScroll" @scrollend="onScrollEnd"
rebound
="false">
@scroll="onScroll" @scrollend="onScrollEnd"
bounces
="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>
<list-item style="padding: 10px; margin: 5px 0;align-items: center;" :type = 20>
<button @click="appendSectionItem(0)" size="mini">A section 新增5条内容</button>
</list-item>
<sticky-section v-for="(section
Text) in data
" :padding="sectionPadding" :push-pinned-header="true">
<sticky-header :
header-id="sectionText" :id="sectionText
">
<text class="sticky-header-text">{{section
Text
}}</text>
<sticky-section v-for="(section
) in sectionArray
" :padding="sectionPadding" :push-pinned-header="true">
<sticky-header :
id="section.name
">
<text class="sticky-header-text">{{section
.name
}}</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 v-for="
(list) in section.list
" class="content-item" :type=10>
<text class="text">{{
list.text
}}</text>
</list-item>
</sticky-section>
<list-item style="padding: 10px; margin: 5px 0;align-items: center;" :type= 30>
...
...
@@ -20,15 +23,36 @@
</list-view>
</template>
<script>
<script>
export type sectionData={
name:string,
list:sectionListItem[]
}
export type sectionListItem ={
text:string
}
export default {
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>,
scrollIntoView: "",
scrolling: false
scrolling: false,
sectionArray:[] as sectionData[],
appendId: 0
}
},
onLoad() {
this.data.forEach(key=> {
const list =[] as sectionListItem[]
for(let i = 1; i<11; i++) {
const item = {text: key+"--item--content----"+i} as sectionListItem
list.push(item)
}
const data = {name: key, list: list} as sectionData
this.sectionArray.push(data)
}
)
},
methods: {
toTop(){
...
...
@@ -58,6 +82,18 @@
if(this.scrollIntoView != "") {
this.scrollIntoView = ""
}
},
appendSectionItem(index: number) {
const data = this.sectionArray[index]
this.appendId++
const list = [
{text: data.name+"--item--content----new1--"+this.appendId} as sectionListItem,
{text: data.name+"--item--content----new2--"+this.appendId} as sectionListItem,
{text: data.name+"--item--content----new3--"+this.appendId} as sectionListItem,
{text: data.name+"--item--content----new4--"+this.appendId} as sectionListItem,
{text: data.name+"--item--content----new5--"+this.appendId} as sectionListItem
] as sectionListItem[]
data.list.unshift(...list)
}
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录