Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
黄粱一梦--Y
hello uni-app x
提交
e5172005
H
hello uni-app x
项目概览
黄粱一梦--Y
/
hello uni-app x
与 Fork 源项目一致
Fork自
DCloud / hello uni-app x
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
e5172005
编写于
7月 08, 2023
作者:
DCloud_JSON
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
新增 仿抖音(复用组件,无限滚动、加载、浏览视频)示例
上级
36b08661
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
141 addition
and
9 deletion
+141
-9
pages.json
pages.json
+10
-1
pages/tabBar/template.uvue
pages/tabBar/template.uvue
+16
-8
pages/template/swiper-tiktok/swiper-tiktok.uvue
pages/template/swiper-tiktok/swiper-tiktok.uvue
+115
-0
未找到文件。
pages.json
浏览文件 @
e5172005
...
...
@@ -600,7 +600,16 @@
}
}
],
,{
"path"
:
"pages/template/swiper-tiktok/swiper-tiktok"
,
"style"
:
{
"navigationBarTitleText"
:
""
,
"enablePullDownRefresh"
:
false
}
}
],
"globalStyle"
:
{
"pageOrientation"
:
"portrait"
,
"navigationBarTitleText"
:
"Hello uniapp x"
,
...
...
pages/tabBar/template.uvue
浏览文件 @
e5172005
...
...
@@ -42,14 +42,22 @@
export default {
data() {
return {
list: [
{
id: "drop-card",
url: "drop-card",
name: "drop-card",
open: false,
enable: true,
pages: [] as Page[]
list: [
{
id: "drop-card",
url: "drop-card",
name: "drop-card",
open: false,
enable: true,
pages: [] as Page[]
},
{
id: "swiper-tiktok",
url: "swiper-tiktok",
name: "swiper-tiktok",
open: false,
enable: true,
pages: [] as Page[]
}
] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png',
...
...
pages/template/swiper-tiktok/swiper-tiktok.uvue
0 → 100644
浏览文件 @
e5172005
<template>
<view class="page">
<view style="padding: 20px;">
<text>仿抖音,复用组件,无限滚动、加载、浏览视频的示例模板</text>
<text>已知问题:</text>
<text>1.swiper 组件竖滑动有 bug,先横向滑动</text>
<text>2.uvue暂未支持video</text>
</view>
<swiper class="swiper" :current="current" :circular="index != 0" :vertical="false" @change="onSwiperChange" @transition="onTransition">
<swiper-item class="swiper-item" v-for="(item,index) in visibleList" :key="index">
<!-- <video ref="video" class="video" :id="item.id" :ref="item.id" :src="item.src" :controls="false" :loop="true"
:show-center-play-btn="false"></video> -->
第:{{index}}个容器
数据内容:{{item.content}}
</swiper-item>
</swiper>
</view>
</template>
<script>
type ListItem = { _id : string, content : string }
let page : number = 0;
export default {
data() {
return {
list: [] as ListItem[],
visibleList: [] as ListItem[],// 提高性能 可见的只有3个
current: 0 as number,
index: 0
}
},
beforeCreate() {
this.list = this.getData()
this.visibleList = this.list.slice(0, 3)
},
watch: {
current(current : number, oldCurrent : number) {
let changeNumber = current - oldCurrent
if (changeNumber == 1 || changeNumber == -2) {
// console.error('向右');
this.index++
} else {
// console.error('向左');
this.index--
}
// //翻页(3项为一页)
if (Math.abs(changeNumber) == 2) {
// console.log('翻页');
page = Math.floor(this.index / 3);
// console.log(this.index);
// console.log('page',page);
// console.log('slice',3*page,3*page+3);
if (this.list.length < 3 * page + 3) {
let list : ListItem[] = this.getData()
this.list.push(...list.toTypedArray())
}
let visibleList = this.list.slice(3 * page, 3 * page + 3)
// 换数据
this.visibleList = visibleList
/*
// 不换数据,只换内容
for (let i = 0; i < 3; i++) {
this.visibleList[i].src = visibleList[i].src
this.visibleList[i].other = visibleList[i].other
}*/
}
}
},
methods: {
getData() : ListItem[] {
/* Promise 暂不支持
Promise<void>
return new Promise((resolve) => {
resolve();
});*/
let list = [] as ListItem[];
for (let i = 0; i < 6; i++) {
let index = this.list.length + i;
let listItem : ListItem = {
"_id": "a00" + index,
"content": "这是第" + index + "条数据"
}
list.push(listItem)
}
return list
},
onSwiperChange(e : SwiperChangeEvent) {
// console.error('SwiperChangeEvent',e.detail.current);
this.current = e.detail.current
},
onTransition(e:SwiperTransitionEvent){
console.log('onTransition e.detail.dx',e.detail.dx);
}
}
}
</script>
<style>
.page {
flex: 1;
/* width: 750rpx; */
}
.swiper {
flex: 1;
border: 1px solid #000;
}
.swiper-item {
flex: 1;
border: 1px solid red;
padding: 10px 5px;
}
</style>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录