Files
xhs-examples/xhs-mini-demos/component-case/scroll-view/scroll-view.js
2025-09-14 00:21:54 +08:00

121 lines
3.6 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* @file demo component for scroll-view
* @author sunbai
*/
/* global Page, xhs, getApp */
let app = getApp();
const order = ['one', 'two', 'three'];
Page({
data: {
scrollIntoView: 'one',
scrollTop: 0,
scrollLeft: 0,
/* eslint-disable max-len */
scrollList: [{
src: 'https://b.bdstatic.com/miniapp/image/young.jpeg',
description: '【少年的你】:影片简介:陈念是一名即将参加高考的高三学生,同校女生胡晓蝶的跳楼自杀让她的生活陷入了困顿之中。胡晓蝶死后,陈念遭到了以魏莱为首的三人组的霸凌,魏莱虽然表面上看来是乖巧的优等生,实际上却心思毒辣,胡晓蝶的死和她有着千丝万缕的联系。一次偶然中,陈念邂逅了名为小北的小混混...'
}, {
src: 'https://b.bdstatic.com/miniapp/image/airCaptain.jpeg',
description: '【中国机长】根据2018年5月14日四川航空3U8633航班机组成功处置特情真实事件改编。机组执行航班任务时在万米高空突遇驾驶舱风挡玻璃爆裂脱落、座舱释压的极端罕见险情生死关头他们临危不乱、果断应对、正确处置确保了机上全部人员的生命安全创造了世界民航史上的奇迹'
}, {
src: 'https://b.bdstatic.com/miniapp/image/young.jpeg',
description: '【催眠.裁决】轰动全港的林氏家族凶杀案踏入审讯最后一天陪审团准备退庭商议时成员之一许立生突然收到女儿茵茵被绑架的消息神秘人要求曾为国际催眠权威的立生通过催眠术令陪审团裁定被告谋杀罪名成立否则其女儿将被撕票这也就意味着立生必须在狭小的空间内、众目睽睽之下不用专业工具隐秘地催眠至少4个人。立生偷偷将茵茵被绑架的讯息转发给曾为国内特种部队成员的小舅杨凯后进入了退庭商议室…'
}],
refresherTriggered: false,
/* eslint-enable max-len */
},
onHide() {
app.globalData.openParams = '';
},
toLeft() {
xhs.showToast({
title: '到最左边了',
icon: 'none'
});
},
toRight() {
xhs.showToast({
title: '到最右边了',
icon: 'none'
});
},
upper() {
xhs.showToast({
title: '到顶了',
icon: 'none'
});
},
lower() {
xhs.showToast({
title: '到底了',
icon: 'none'
});
},
scroll(e) {
console.log('获取滚动事件的详细信息e.detail', e.detail);
// 此处只做对scrollTop值的监听不需要使用setData对视图层发起更新
this.data.scrollTop = e.detail.scrollTop;
},
scrollToTop(e) {
console.log(e);
this.setData({
scrollTop: 0
});
},
tap(e) {
for (let i = 0; i < order.length; ++i) {
if (order[i] === this.data.scrollIntoView) {
const next = (i + 1) % order.length;
this.setData({
scrollIntoView: order[next],
scrollTop: next * 500
});
break;
}
}
},
tapMove() {
this.setData({
scrollTop: this.data.scrollTop + 10
});
},
handleStartRefresh() {
this.setData({
refresherTriggered: true
}),
setTimeout(() => {
this.handleStopRefresh();
}, 2000);
console.log('start refresh', this.data.refresherTriggered);
},
handleStopRefresh() {
this.setData({
refresherTriggered: false
});
console.log('stop refresh', this.data.refresherTriggered);
},
onRefresh() {
xhs.showToast({
title: '刷新成功',
});
this.handleStartRefresh();
},
onRestore() {
xhs.showToast({
title: '刷新恢复',
});
}
});