-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontent.html
797 lines (664 loc) · 26.3 KB
/
content.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
<link href="https://fonts.googleapis.cn/icon?family=Material+Icons+Outlined" rel="stylesheet" />
<link href="https://fonts.googleapis.cn/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://fonts.googleapis.cn/icon?family=Material+Round" rel="stylesheet" />
<link href="https://fonts.googleapis.cn/icon?family=Material+Icons+Two+Tone" rel="stylesheet" />
<style>
body {
margin: 0;
}
</style>
</head>
<div id="app">
<mdui-top-app-bar class="appbar" scroll-behavior="elevate" variant="small">
<mdui-button-icon variant="standard" onclick="history.back()">
<mdui-icon name="arrow_back--two-tone"></mdui-icon>
</mdui-button-icon>
<mdui-top-app-bar-title>
<div style="line-height: normal;">
<a href="#" style="display: block;font-size: 20px;color:inherit;text-decoration:none">Test</a>
<a href="https://github.com/huajiqaq/zhihu_web/blob/main/join.md"
style="display: block;font-size: 16px;color:inherit;text-decoration:none">加入我们的开发</a>
</div>
</mdui-top-app-bar-title>
<mdui-dropdown trigger="hover" placement="auto" open-delay="150" close-delay="150">
<mdui-button-icon slot="trigger" class="icon" variant="standard">
<mdui-icon name="more_vert--two-tone">
</mdui-icon>
</mdui-button-icon>
<mdui-menu class="menu" submenu-trigger="click hover">
<mdui-menu-item href="https://github.com/huajiqaq/zhihu_web/blob/main/join.md">加入我们</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
</mdui-top-app-bar>
<mdui-layout-main id="layout-main">
<div class="content" style="margin:16px"></div>
</mdui-layout-main>
</div>
<style>
.slide-content {
display: flex;
}
.slide-item {
flex-shrink: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slide-item img {
max-width: 100%;
max-height: 100vh;
object-fit: contain;
-webkit-user-drag: none;
}
.dots-container {
display: flex;
justify-content: center;
gap: 5px;
margin-top: 10px;
}
.dot {
width: 7px;
height: 7px;
background-color: #ebeced;
border-radius: 50%;
cursor: pointer;
transition: all 0.5s;
}
.slick-active {
background-color: #0988ff !important;
}
/* 隐藏滚动条 */
/* Chrome, Safari, Opera */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
/* IE 和 Edge */
-ms-overflow-style: none;
/* Firefox */
scrollbar-width: none;
}
.index-indicator {
position: absolute;
top: 10px;
right: 10px;
font-size: 16px;
color: white;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
border-radius: 5px;
}
</style>
<script>
function resolveData(data) {
let contentType = data.type;
let content = data[contentType]
switch (contentType) {
case "paragraph":
// 创建一个新的 span 元素
var newSpan = document.createElement('p');
newSpan.textContent = content.text;
newSpan.style.display = "block"
return newSpan
break;
case "heading":
var newSpan = document.createElement('h3');
newSpan.textContent = content.text;
newSpan.style.display = "block"
newSpan.style.fontWeight = "bold"
return newSpan
break;
case "code_block":
// 创建一个新的 span 元素
var newSpan = document.createElement('span');
newSpan.textContent = "代码块 " + content.content; // 设置 span 的文本内容
newSpan.style.display = "block"
newSpan.style.fontSize = "20px"
newSpan.style.fontWeight = "bold"
return newSpan
break;
case "blockquote":
var blockquote = document.createElement('blockquote');
var paragraph = document.createElement('p');
// 初始化已处理的文本长度
let processedTextLength = 0;
// 处理高亮标记
content.marks.forEach(mark => {
const { start_index, end_index, link } = mark;
// 计算相对于原始文本的索引
let startIndex = start_index + processedTextLength;
let endIndex = end_index + processedTextLength;
// 插入非高亮文本（如果有的话）
if (startIndex > 0) {
var plainTextSpan = document.createElement('span');
plainTextSpan.textContent = content.text.substring(processedTextLength, startIndex);
paragraph.appendChild(plainTextSpan);
}
// 实际上文本的高亮并没有添加 这只是a标签的高亮
if (link) {
// 创建 a 元素
var aLink = document.createElement('a');
aLink.href = link.href;
aLink.textContent = content.text.substring(startIndex, endIndex);
// 包装 a 元素在一个 span 中，以便应用高亮样式
var highlightSpan = document.createElement('span');
highlightSpan.className = 'highlight';
highlightSpan.appendChild(aLink);
// 将高亮 span 元素插入到 p 元素中
paragraph.appendChild(highlightSpan);
}
// 更新已处理的文本长度
processedTextLength = endIndex;
});
// 插入剩下的非高亮文本（如果有的话）
if (processedTextLength < content.text.length) {
var remainingTextSpan = document.createElement('span');
remainingTextSpan.textContent = content.text.substring(processedTextLength);
paragraph.appendChild(remainingTextSpan);
}
// 将 p 元素插入到 blockquote 中
blockquote.appendChild(paragraph);
return blockquote
break;
case "list_node":
// 创建 ul 元素
var ulElement = document.createElement('ul');
// 处理列表项
content.items.forEach(item => {
const { indent_level, marks, text } = item;
// 创建 li 元素
var liElement = document.createElement('li');
// 如果有高亮标记，处理高亮文本
if (marks.length > 0) {
// 初始化已处理的文本长度
let processedTextLength = 0;
marks.forEach(mark => {
const { start_index, end_index } = mark;
// 计算相对于原始文本的索引
let startIndex = start_index + processedTextLength;
let endIndex = end_index + processedTextLength;
// 插入非高亮文本（如果有的话）
if (startIndex > 0) {
var plainTextSpan = document.createElement('span');
plainTextSpan.textContent = text.substring(processedTextLength, startIndex);
liElement.appendChild(plainTextSpan);
}
// 创建高亮 span 元素
var highlightSpan = document.createElement('span');
highlightSpan.className = 'highlight';
highlightSpan.textContent = text.substring(startIndex, endIndex);
// 将高亮 span 元素插入到 li 元素中
liElement.appendChild(highlightSpan);
// 更新已处理的文本长度
processedTextLength = endIndex;
});
// 插入剩下的非高亮文本（如果有的话）
if (processedTextLength < text.length) {
var remainingTextSpan = document.createElement('span');
remainingTextSpan.textContent = text.substring(processedTextLength);
liElement.appendChild(remainingTextSpan);
}
} else {
// 没有高亮标记，直接插入文本
liElement.textContent = text;
}
// 根据缩进级别设置额外的左侧内边距
liElement.style.paddingLeft = `${indent_level * 20}px`;
// 将 li 元素插入到 ul 元素中
ulElement.appendChild(liElement);
});
return ulElement
break;
case "hr":
const divider = document.createElement('mdui-divider');
return divider
break;
case "image":
// 获取要插入元素的容器
var container = document.getElementById('content');
// 创建 figure 元素
var figure = document.createElement('figure');
// 创建 div 元素
var div = document.createElement('div');
// 创建 img 元素
var img = document.createElement('img');
img.src = content.urls[0];
img.style.width = "100%"
// 将 img 元素插入到 div 中
div.appendChild(img);
// 将 div 元素插入到 figure 中
figure.appendChild(div);
// 创建 figcaption 元素
var figcaption = document.createElement('figcaption');
figcaption.textContent = content.description;
// 将 figcaption 元素插入到 figure 中
figure.appendChild(figcaption);
return figure
case "card":
// 创建 mdui-card 元素
var mduiCard = document.createElement('mdui-card');
mduiCard.variant = 'elevated';
mduiCard.clickable = true;
mduiCard.style.width = '100%';
mduiCard.style.padding = '16px';
// 创建内部的 div 元素
var innerDiv = document.createElement('div');
innerDiv.style.display = 'flex';
innerDiv.style.alignItems = 'center';
// 创建 contents span 元素
var linkCardContents = document.createElement('span');
linkCardContents.style.flex = '1 1 auto';
extra_info = JSON.parse(content.extra_info)
mduiCard.href = extra_info.url
// 创建 title span 元素
var linkCardTitle = document.createElement('span');
linkCardTitle.style.display = 'block';
linkCardTitle.textContent = content.title || extra_info.description;
// 创建 desc span 元素
var linkCardDesc = document.createElement('span');
linkCardDesc.textContent = extra_info.desc;
// 创建 image span 元素
var linkCardImage = document.createElement('span');
linkCardImage.style.height = '60px';
linkCardImage.style.width = '60px';
linkCardImage.style.flexShrink = 0;
// 创建 img 元素
var image = document.createElement('img');
image.src = content.cover;
image.style.width = '100%';
image.style.height = '100%';
image.style.objectFit = 'cover';
// 组装元素
linkCardImage.appendChild(image);
linkCardContents.appendChild(linkCardTitle);
linkCardContents.appendChild(linkCardDesc);
innerDiv.appendChild(linkCardContents);
innerDiv.appendChild(linkCardImage);
mduiCard.appendChild(innerDiv);
return mduiCard
break;
case "video":
// 创建 figure 元素
const figure2 = document.createElement('figure');
// 创建 video 元素
const video = document.createElement('video');
video.controls = true; // 显示播放控件
video.autoplay = true; // 自动播放
video.loop = true; // 循环播放
video.style.width = '100%'; // 设置宽度为100%
video.style.height = '100%'; // 设置高度为100%
video.myvid = content.id
// 创建 source 子元素
const source = document.createElement('source');
source.type = 'video/mp4'; // 设置 MIME 类型
// 将 source 子元素插入到 video 元素中
video.appendChild(source);
// 创建 figcaption 元素
const figcaption2 = document.createElement('figcaption');
figcaption2.textContent = content.title; // 设置图注文本
// 将 video 和 figcaption 元素插入到 figure 元素中
figure2.appendChild(video);
figure2.appendChild(figcaption2);
return figure2
case "author":
// 创建主容器 - mdui-card
const card = document.createElement('mdui-card');
card.style.padding = '16px';
card.style.width = '100%';
card.style.userSelect = 'none';
card.clickable = true;
// 创建内部flex容器
const flexContainer = document.createElement('div');
flexContainer.style.display = 'flex';
// 创建头像图片元素
const avatarImg = document.createElement('img');
avatarImg.src = content.avatar_url;
avatarImg.style.borderRadius = '50%';
avatarImg.style.width = '50px';
avatarImg.style.margin = "auto 0"
// 创建文字容器
const textContainer = document.createElement('div');
textContainer.style.paddingLeft = '10px';
// 创建名字段落
const nameSpan = document.createElement('span');
nameSpan.style.display = 'block';
nameSpan.textContent = content.name;
// 创建用户名段落
const usernameSpan = document.createElement('span');
usernameSpan.textContent = content.headline;
// 将子元素添加到文字容器中
textContainer.appendChild(nameSpan);
textContainer.appendChild(usernameSpan);
// 将图片和文字容器添加到flex容器中
flexContainer.appendChild(avatarImg);
flexContainer.appendChild(textContainer);
// 将flex容器添加到主容器中
card.appendChild(flexContainer);
return card
break;
case "myapptip":
var newSpan = document.createElement('span');
newSpan.textContent = content.text;
newSpan.style.display = "block"
return newSpan
break;
case "imglist":
// 创建 DOM 结构
const sliderDiv = document.createElement('div');
sliderDiv.style.position = 'relative';
const scollContainer = document.createElement('div');
scollContainer.id = 'scollContainer';
const slideContent = document.createElement('div');
slideContent.className = 'slide-content';
slideContent.id = 'slideContent';
const currentIndexIndicator = document.createElement('div');
currentIndexIndicator.className = 'index-indicator';
currentIndexIndicator.id = 'currentIndex';
const indicatorContainer = document.createElement('div');
indicatorContainer.id = 'indicatorContainer';
// 将元素添加到父元素中
scollContainer.appendChild(slideContent);
scollContainer.appendChild(currentIndexIndicator);
sliderDiv.appendChild(scollContainer);
sliderDiv.appendChild(indicatorContainer);
const images = content.images
// 创建图像元素
images.forEach(element => {
const slideItem = document.createElement('div');
slideItem.classList.add('slide-item');
const img = document.createElement('img');
img.src = element.url;
slideItem.appendChild(img);
slideContent.appendChild(slideItem);
});
const swiperAPI = setupSwiper(scollContainer, slideContent, indicatorContainer); // 传入小圆点的容器
let timeoutId; // 在这里声明 timeoutId
// 用户注册 currindex 改变的监听器
swiperAPI.onCurrentIndexChanged(function (index) {
currentIndexIndicator.textContent = `${index + 1}/${images.length}`;
console.log(`当前索引改变为: ${index}`);
// 显示索引指示器
currentIndexIndicator.style.display = 'block';
// 清除定时器并重新设置
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
currentIndexIndicator.style.display = 'none'; // 隐藏指示器
}, 2000); // 设置2秒的延迟
});
var newSpan = document.createElement('h3');
newSpan.textContent = "图片列表 待制作中（网页暂未实现）";
newSpan.style.display = "block"
return sliderDiv
break;
default:
// 处理未知类型的情况
return false;
}
}
// 获取查询字符串
const searchParams = new URLSearchParams(window.location.search);
const dataType = searchParams.get('type');
const id = searchParams.get('id');
// 示例加载函数
function loadContent(Div) {
Div = document.querySelector(".content")
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
url: "https://api.zhihu.com/" + dataType + "s" + "/v2/" + id,
method: "GET",
headers: {
"Content-type": "application/x-www-form-urlencoded",
"x-api-version": "3.1.8",
"x-app-za": "OS=Android&VersionName=9.13.0&VersionCode=16816&Product=com.zhihu.android&Installer=Market&DeviceType=AndroidPhone",
"x-app-version": "9.13.0",
},
onload: function (xhr) {
const data = JSON.parse(xhr.responseText);
const structured_content = data.structured_content
let segments = []
if (structured_content) segments = structured_content.segments
if (data.relationship_tips) {
segments.unshift({
type: "myapptip",
myapptip: {
text: data.relationship_tips.text
}
});
}
if (data.video) {
segments.unshift({
type: "video",
video: {
id: data.video.attachment_id,
title: data.video.title
}
});
}
if (data.type === "answer" && data.header) {
segments.unshift({
type: "heading",
heading: {
text: data.header.text
}
});
}
if (data.image_list) {
segments.unshift({
type: "imglist",
imglist: {
images: data.image_list.images,
count: data.image_list.count
}
});
}
if (data.author) {
segments.unshift({
type: "author",
author: {
avatar_url: data.author.avatar.avatar_image.day,
headline: data.author.description,
name: data.author.fullname,
id: data.author.id
}
});
}
segments.push({
type: "myapptip",
myapptip: {
text: (() => {
const content_end_info = data.content_end_info;
let str = "";
if (content_end_info.update_time_text && content_end_info.update_time_text !== "") {
str = content_end_info.update_time_text;
} else if (content_end_info.create_time_text && content_end_info.create_time_text !== "") {
str = content_end_info.create_time_text;
}
if (content_end_info.ip_info && content_end_info.ip_info !== "") {
str += " · " + content_end_info.ip_info;
}
if (str === "") {
str = "未知";
}
return str;
})()
}
});
segments.forEach(element => {
let ddd = resolveData(element)
if (ddd != false) {
Div.appendChild(ddd)
}
});
const videos = document.querySelectorAll("video")
for (i = 0; i < videos.length; i++) {
(function (i) {
const video_doc = videos[i]
var k = video_doc.myvid
GM_xmlhttpRequest({
url: "https://lens.zhihu.com/api/v4/videos/" + k,
method: "GET",
headers: {
"Content-type": "application/x-www-form-urlencoded",
},
onload: function (xhr) {
videohtml = xhr.responseText
var getvideourlhtml = JSON.parse(videohtml);
try {
videourl = getvideourlhtml.playlist.SD.play_url
} catch (err) { //抓住throw抛出的错误
if (getvideourlhtml.playlist.LD.play_url) {
videourl = getvideourlhtml.playlist.LD.play_url
} else if (getvideourlhtml.playlist.HD.play_url) {
videourl = getvideourlhtml.playlist.HD.play_url
}
}
video_doc.src = videourl
}
})
})(i);
}
resolve(); // 请求成功后解析数据并解析 Promise
},
onerror: function (error) {
reject(error); // 请求失败时拒绝 Promise
}
});
});
}
loadContent()
function setupSwiper(scrollContainer, slideContent, indicatorContainer) {
// 动态设置滚动容器样式
setScrollStyles(scrollContainer);
// 动态设置每个子项的滚动对齐方式
setSlideItemStyles(slideContent);
let currentPage = 0; // 当前显示的页面索引
const totalPages = slideContent.children.length;
function setScrollStyles(container) {
container.style.overflowY = 'hidden';
container.style.overflowX = 'auto';
container.style.scrollSnapType = 'x mandatory';
container.style.scrollBehavior = 'smooth'; // 平滑滚动行为
container.classList.add('hide-scrollbar'); // 添加类名以隐藏滚动条
}
function setSlideItemStyles(content) {
const items = content.children;
for (let i = 0; i < items.length; i++) {
// 设置元素的滚动快照对齐方式为中心，使其在滚动停止时位于屏幕中央
items[i].style.scrollSnapAlign = 'center';
// 设置元素的滚动快照停止行为为“总是”，使元素在滚动时保持可见，直到到达下一个快照点
items[i].style.scrollSnapStop = 'always';
}
}
function createDots(numDots) {
const dotsContainer = document.createElement('div');
dotsContainer.classList.add('dots-container');
for (let i = 0; i < numDots; i++) {
const dot = document.createElement('div');
dot.classList.add('dot');
dot.addEventListener('click', function () {
slideToIndex(i);
});
dotsContainer.appendChild(dot);
}
indicatorContainer.appendChild(dotsContainer);
// 默认高亮第一个
updateDots(0);
}
function updateDots(activeIndex) {
const dotList = indicatorContainer.querySelector('.dots-container').children;
for (let i = 0; i < dotList.length; i++) {
dotList[i].classList.remove('slick-active');
}
dotList[activeIndex].classList.add('slick-active');
}
function updateCurrentPage(scrollLeft) {
const pageWidth = scrollContainer.clientWidth;
const newIndex = Math.round(scrollLeft / pageWidth);
// 如果新的索引与当前索引不同且在有效范围内，则更新当前页面
if (newIndex !== currentPage && newIndex >= 0 && newIndex < slideContent.children.length) {
currentPage = newIndex;
updateDots(currentPage);
emitCurrentIndexChanged(newIndex); // 触发 currindex 改变事件
}
}
function emitCurrentIndexChanged(index) {
if (typeof onCurrentIndexChanged === 'function') {
onCurrentIndexChanged(index);
}
}
function slideToIndex(index) {
scrollContainer.scrollLeft = index * scrollContainer.clientWidth;
}
/**
* 拖动内容，滚动条滚动，横向
* @param {Element} container 需要拖动的面板
* @param {number} [dragMultiplier=1] 拖拽倍数，默认为1
*/
function dragMoveX(container, dragMultiplier = 1) {
let isDragging = false;
let startX;
let scrollLeft;
// 设置初始样式
const setInitialStyles = (isDragging) => {
container.style.cursor = isDragging ? 'grabbing' : 'pointer';
container.style.userSelect = isDragging ? 'none' : '';
};
// 鼠标按下
container.addEventListener('mousedown', (event) => {
isDragging = true;
startX = event.clientX;
scrollLeft = container.scrollLeft;
setInitialStyles(isDragging);
});
// 鼠标移动
container.addEventListener('mousemove', (event) => {
if (isDragging) {
const moveX = event.clientX;
const scrollX = (moveX - startX) * dragMultiplier;
container.scrollLeft = scrollLeft - scrollX;
}
});
// 鼠标释放
container.addEventListener('mouseup', () => {
isDragging = false;
setInitialStyles(isDragging);
container.blur(); // 调用 blur 方法
});
// 鼠标移出元素
container.addEventListener('mouseleave', (event) => {
isDragging = false;
setInitialStyles(isDragging);
container.blur(); // 调用 blur 方法
});
}
// 初始化
createDots(totalPages);
dragMoveX(scrollContainer, 1.5);
scrollContainer.addEventListener('scroll', function () {
updateCurrentPage(scrollContainer.scrollLeft);
});
// 提供给用户的 API
function onCurrentIndexChanged(callback) {
onCurrentIndexChanged = callback;
// 初始化时也更新一次索引指示器
callback(currentPage);
}
return {
onCurrentIndexChanged: onCurrentIndexChanged,
};
}
</script>
<script>
</script>
</body>
</html>