Eine kurze Analyse, wie Uniapp eine Ansicht zum Scrollen bringt-uni-app-php.cn

UniApp ist ein plattformübergreifendes Entwicklungsframework, das problemlos mobile Anwendungen entwickeln kann. Die Scroll-View-Komponente kann das Scrollen in einer Ansicht realisieren.

1. Sehen Sie sich die Dokumentation an

Bevor wir die Scroll-View-Komponente zum Implementieren des View-Scrollings verwenden, müssen wir die Einführung in die Scroll-View in der offiziellen UniApp-Dokumentation sorgfältig lesen. In der Dokumentation können wir mehr über die Rolle und Implementierung der Scroll-View-Komponente erfahren.

2. Verwenden Sie die Scroll-View-Komponente

In der Vue-Einzeldateikomponente müssen Sie die Scroll-View-Komponente im -Tag hinzufügen und ein ID-Attribut definieren: Nach dem Login kopieren in Verwenden Sie die Methode uni.createSelectorQuery().select() im Tag , um die Scroll-View-Komponente abzurufen, und verwenden Sie dann das Scroll-Top-Attribut, um die Position der Bildlaufleiste festzulegen, um einen Bildlauf zu erreichen. export default { onReady() { // 生命周期事件，页面装载完成后执行 uni.createSelectorQuery().select('#scrollview').fields({ size: true, }, data => { const height = data.height; // 获取scroll-view组件高度 uni.pageScrollTo({ // 设置滚动条位置 scrollTop: height, duration: 300, }); }).exec(); }, }; Nach dem Login kopieren Der obige Code ist ein einfaches Beispiel für das Scrollen einer Ansicht. Mit der oben beschriebenen Methode kann der Bildlaufeffekt der Ansicht in UniApp problemlos erreicht werden.

3. Attributbeschreibung der Scroll-View-Komponente

scroll-x: Horizontales Scrollen festlegen, der Wert ist wahr oder falsch. scroll-y: Vertikales Scrollen festlegen, der Wert ist wahr oder falsch. upper-threshold: Das Uppertriggered-Ereignis wird beim Scrollen nach oben ausgelöst. Der Standardwert ist 50 und die Einheit ist px. unterer Schwellenwert: Das untere ausgelöste Ereignis wird beim Scrollen nach unten ausgelöst. Der Standardwert ist 50 und die Einheit ist px. scroll-with-animation: Ob animiertes Scrollen verwendet werden soll, der Standardwert ist false. scroll-left: Legt die horizontale Position der Bildlaufleiste fest. scroll-top: Legt die Position der vertikalen Bildlaufleiste fest. 4. Zusammenfassung

Es ist nicht schwierig, die Scroll-View-Komponente zu verwenden, um das Scrollen von Ansichten in UniApp zu implementieren. Durch das Erlernen und Verwenden können wir unseren Anwendungen problemlos Scrolleffekte hinzufügen und ein besseres Benutzererlebnis bieten. Natürlich müssen während der Verwendung verschiedene Attribute und Ereignisse entsprechend der tatsächlichen Situation flexibel verwendet werden.