pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化slide

pull/19/head
zyronon 4 years ago
parent
76a519f92b
commit
6fc5230b5e
1 changed files with 202 additions and 200 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 402
      src/pages/test/TestSlide.vue

402
src/pages/test/TestSlide.vue
Unescape View File

@ -18,7 +18,9 @@ @@ -18,7 +18,9 @@
<Footer v-bind:init-tab="1"/>
</SlideItem>
<SlideItem>
<div id="TestSlide3"></div>
<div id="TestSlide3" style="overflow: auto;height: 100vh;">
<p style="height: 50px;" v-for="item in 20">1</p>
</div>
</SlideItem>
</SlideRowList>
<!-- <div id="TestSlide1" style="height: calc(100% - 5rem);"></div>-->
@ -65,205 +67,205 @@ export default { @@ -65,205 +67,205 @@ export default {
list.map(v => {
v.type = 'recommend-video'
})
list.unshift({
type: 'img',
src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
})
list.unshift({
type: 'imgs',
src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
})
list.unshift({
type: 'send-video',
src: `http://douyin.ttentau.top/0.mp4`
})
list.unshift({
type: 'user',
"id": "224e9a00-ffa0-4bc1-bb07-c318c7b02fa5",
"avatar": new URL('../../assets/img/icon/avatar/1.png', import.meta.url).href,
"name": "何以为家",
"realName": "王小二",
"sex": "",
"age": 25,
"idCard": null,
"phone": "",
"address": null,
"wechat": "",
"password": null,
"lastLoginTime": "1629993515",
"createTime": "1630035089",
"isDelete": 0,
"account": "234",
"pinyin": "H",
"select": false,
videos: [
{
"id": "c99d325c-741e-4722-9f39-82bb423a5989",
"cover": "https://p26.douyinpic.com/img/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc~c5_300x400.jpeg?from=4257465056_large",
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc?from=4257465056_large",
"origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/d9e9b6dc783f4c13a8e5cc08df788a02_1627117997~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77ucs14tfra0&line=1&file_id=8b05a5dfb9644865a605ba13cc25f0fe&sign=07cddb6e3292bb2f4478d1f9e6187b33&is_play_url=1&source=PackSourceEnum_PUBLISH",
"video_data_size": 10754240,
"duration": 151720,
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 156,
"comment_count": 7,
"download_count": 0,
"play_count": 0,
"share_count": 0,
"forward_count": 0,
"collect_count": 0,
"sort": 9,
"is_top": 0,
"city": "350100",
"musicId": "0da2663b-6bff-425f-a93e-9106b4889c99",
"create_time": "1630391758",
"creator_id": "54884802577",
"status": 1,
"topics": [
{
"id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
"name": "抖音电影",
"creator_id": "54884802577",
"create_time": "1630391758",
"status": 1
},
{
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
"name": "我的观影报告",
"creator_id": "54884802577",
"create_time": "1630391758",
"status": 1
}
],
"music": {
"id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
"cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
"title": "@喵嗷污说电影创作的原声",
"creator_id": "54884802577",
"create_time": "1630391758",
"status": 1
}
},
{
"id": "cf26d20e-577f-4e08-ae0e-77eac2f1adbb",
"cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe~c5_300x400.jpeg?from=4257465056_large",
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe?from=4257465056_large",
"origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/15826b4e6ad54f0bbdb3bd8af024604c_1627117999~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77u4a4ivddk0&line=1&file_id=f8c9a32ba7bc4976b66db0437dd65d1b&sign=c96c9adfacde30c007555eee23f0f214&is_play_url=1&source=PackSourceEnum_PUBLISH",
"video_data_size": 16850048,
"duration": 216320,
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 72,
"comment_count": 4,
"download_count": 0,
"play_count": 0,
"share_count": 1,
"forward_count": 0,
"collect_count": 0,
"sort": 10,
"is_top": 0,
"city": "350100",
"musicId": "28944e2e-3bcb-4173-92d2-eb9a263aa826",
"create_time": "1630391758",
"creator_id": "54884802577",
"status": 1,
"topics": [
{
"id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
"name": "抖音电影",
"creator_id": "54884802577",
"create_time": "1630391758",
"status": 1
},
{
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
"name": "我的观影报告",
"creator_id": "54884802577",
"create_time": "1630391758",
"status": 1
}
],
"music": {
"id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
"cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
"title": "@喵嗷污说电影创作的原声",
"creator_id": "54884802577",
"create_time": "1630391758",
"status": 1
}
},
{
"id": "f3fd9b59-6ff5-4301-ac18-a4b8cbf35982",
"cover": "https://p9.douyinpic.com/img/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0~c5_300x400.jpeg?from=4257465056_large",
"dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0?from=4257465056_large",
"origin_cover": "https://p26.douyinpic.com/tos-cn-p-0015/0d7948340d3543bda3357a9496e0cb86_1627117998~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
"video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c3ttjarc77ucsm96q040&line=1&file_id=ccc7eccfa0d746febdcf7436841281a8&sign=a4fc8eb995aad2acdcc622371ecc9c7c&is_play_url=1&source=PackSourceEnum_PUBLISH",
"video_data_size": 23547094,
"duration": 230880,
"desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
"allow_download": 0,
"allow_duet": 0,
"allow_react": 0,
"allow_music": 1,
"allow_douplus": 1,
"allow_share": 1,
"digg_count": 93,
"comment_count": 3,
"download_count": 0,
"play_count": 0,
"share_count": 0,
"forward_count": 0,
"collect_count": 1,
"sort": 11,
"is_top": 0,
"city": "350100",
"musicId": "6fe6bbfc-d393-45f2-a2c8-432422c5904a",
"create_time": "1630391758",
"creator_id": "54884802577",
"status": 1,
"topics": [
{
"id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
"name": "抖音电影",
"creator_id": "54884802577",
"create_time": "1630391758",
"status": 1
},
{
"id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
"name": "我的观影报告",
"creator_id": "54884802577",
"create_time": "1630391758",
"status": 1
}
],
"music": {
"id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
"cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
"mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
"title": "@喵嗷污说电影创作的原声",
"creator_id": "54884802577",
"create_time": "1630391758",
"status": 1
}
},
]
})
// list.unshift({
// type: 'img',
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
// })
// list.unshift({
// type: 'imgs',
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
// })
// list.unshift({
// type: 'send-video',
// src: `http://douyin.ttentau.top/0.mp4`
// })
// list.unshift({
// type: 'user',
// "id": "224e9a00-ffa0-4bc1-bb07-c318c7b02fa5",
// "avatar": new URL('../../assets/img/icon/avatar/1.png', import.meta.url).href,
// "name": "何以为家",
// "realName": "王小二",
// "sex": "",
// "age": 25,
// "idCard": null,
// "phone": "",
// "address": null,
// "wechat": "",
// "password": null,
// "lastLoginTime": "1629993515",
// "createTime": "1630035089",
// "isDelete": 0,
// "account": "234",
// "pinyin": "H",
// "select": false,
// videos: [
// {
// "id": "c99d325c-741e-4722-9f39-82bb423a5989",
// "cover": "https://p26.douyinpic.com/img/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc~c5_300x400.jpeg?from=4257465056_large",
// "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc?from=4257465056_large",
// "origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/d9e9b6dc783f4c13a8e5cc08df788a02_1627117997~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
// "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77ucs14tfra0&line=1&file_id=8b05a5dfb9644865a605ba13cc25f0fe&sign=07cddb6e3292bb2f4478d1f9e6187b33&is_play_url=1&source=PackSourceEnum_PUBLISH",
// "video_data_size": 10754240,
// "duration": 151720,
// "desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影",
// "allow_download": 0,
// "allow_duet": 0,
// "allow_react": 0,
// "allow_music": 1,
// "allow_douplus": 1,
// "allow_share": 1,
// "digg_count": 156,
// "comment_count": 7,
// "download_count": 0,
// "play_count": 0,
// "share_count": 0,
// "forward_count": 0,
// "collect_count": 0,
// "sort": 9,
// "is_top": 0,
// "city": "350100",
// "musicId": "0da2663b-6bff-425f-a93e-9106b4889c99",
// "create_time": "1630391758",
// "creator_id": "54884802577",
// "status": 1,
// "topics": [
// {
// "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
// "name": "抖音电影",
// "creator_id": "54884802577",
// "create_time": "1630391758",
// "status": 1
// },
// {
// "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
// "name": "我的观影报告",
// "creator_id": "54884802577",
// "create_time": "1630391758",
// "status": 1
// }
// ],
// "music": {
// "id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
// "cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
// "mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
// "title": "@喵嗷污说电影创作的原声",
// "creator_id": "54884802577",
// "create_time": "1630391758",
// "status": 1
// }
// },
// {
// "id": "cf26d20e-577f-4e08-ae0e-77eac2f1adbb",
// "cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe~c5_300x400.jpeg?from=4257465056_large",
// "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe?from=4257465056_large",
// "origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/15826b4e6ad54f0bbdb3bd8af024604c_1627117999~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
// "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77u4a4ivddk0&line=1&file_id=f8c9a32ba7bc4976b66db0437dd65d1b&sign=c96c9adfacde30c007555eee23f0f214&is_play_url=1&source=PackSourceEnum_PUBLISH",
// "video_data_size": 16850048,
// "duration": 216320,
// "desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
// "allow_download": 0,
// "allow_duet": 0,
// "allow_react": 0,
// "allow_music": 1,
// "allow_douplus": 1,
// "allow_share": 1,
// "digg_count": 72,
// "comment_count": 4,
// "download_count": 0,
// "play_count": 0,
// "share_count": 1,
// "forward_count": 0,
// "collect_count": 0,
// "sort": 10,
// "is_top": 0,
// "city": "350100",
// "musicId": "28944e2e-3bcb-4173-92d2-eb9a263aa826",
// "create_time": "1630391758",
// "creator_id": "54884802577",
// "status": 1,
// "topics": [
// {
// "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
// "name": "抖音电影",
// "creator_id": "54884802577",
// "create_time": "1630391758",
// "status": 1
// },
// {
// "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
// "name": "我的观影报告",
// "creator_id": "54884802577",
// "create_time": "1630391758",
// "status": 1
// }
// ],
// "music": {
// "id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
// "cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
// "mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
// "title": "@喵嗷污说电影创作的原声",
// "creator_id": "54884802577",
// "create_time": "1630391758",
// "status": 1
// }
// },
// {
// "id": "f3fd9b59-6ff5-4301-ac18-a4b8cbf35982",
// "cover": "https://p9.douyinpic.com/img/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0~c5_300x400.jpeg?from=4257465056_large",
// "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0?from=4257465056_large",
// "origin_cover": "https://p26.douyinpic.com/tos-cn-p-0015/0d7948340d3543bda3357a9496e0cb86_1627117998~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
// "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c3ttjarc77ucsm96q040&line=1&file_id=ccc7eccfa0d746febdcf7436841281a8&sign=a4fc8eb995aad2acdcc622371ecc9c7c&is_play_url=1&source=PackSourceEnum_PUBLISH",
// "video_data_size": 23547094,
// "duration": 230880,
// "desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
// "allow_download": 0,
// "allow_duet": 0,
// "allow_react": 0,
// "allow_music": 1,
// "allow_douplus": 1,
// "allow_share": 1,
// "digg_count": 93,
// "comment_count": 3,
// "download_count": 0,
// "play_count": 0,
// "share_count": 0,
// "forward_count": 0,
// "collect_count": 1,
// "sort": 11,
// "is_top": 0,
// "city": "350100",
// "musicId": "6fe6bbfc-d393-45f2-a2c8-432422c5904a",
// "create_time": "1630391758",
// "creator_id": "54884802577",
// "status": 1,
// "topics": [
// {
// "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
// "name": "抖音电影",
// "creator_id": "54884802577",
// "create_time": "1630391758",
// "status": 1
// },
// {
// "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
// "name": "我的观影报告",
// "creator_id": "54884802577",
// "create_time": "1630391758",
// "status": 1
// }
// ],
// "music": {
// "id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
// "cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
// "mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
// "title": "@喵嗷污说电影创作的原声",
// "creator_id": "54884802577",
// "create_time": "1630391758",
// "status": 1
// }
// },
// ]
// })
}
// console.log('length', list.length)

Write Preview
Loading…
Cancel
Save