Uniapp verbietet das manuelle Verschieben von Ansichten

Vorwort

uniapp ist ein Cross-End-Entwicklungsframework, mit dem Sie mithilfe der Vue-Syntax kleine Programme, H5 und APPs entwickeln können, sodass Entwickler plattformübergreifende Anwendungen effizienter entwickeln können. Wenn Sie uniapp jedoch zum Entwickeln kleiner Programme verwenden, können einige Probleme auftreten. In diesem Artikel erfahren Sie, wie Sie das manuelle Verschieben von Ansichten in Miniprogrammen deaktivieren.

Problembeschreibung

Bei der Entwicklung kleiner Programme in Uniapp ist es manchmal notwendig, einen Schiebeeffekt in der Ansicht zu implementieren. Um diesen Effekt zu erzielen, verwenden wir normalerweise Scrollview und platzieren es in einer Ansicht. Manchmal möchten wir jedoch nicht, dass Benutzer diese Ansicht manuell verschieben, da sich das manuelle Verschieben möglicherweise auf das Layout der gesamten Seite auswirkt. Wie kann man also dafür sorgen, dass diese Ansicht nicht manuell verschoben werden kann?

Lösung

In Uniapp können wir diesen Effekt erzielen, indem wir das Scroll-Y-Attribut und das Catchtouchmove-Attribut der Scroll-View-Komponente festlegen. Wenn das Scroll-Y-Attribut wahr ist, bedeutet dies, dass vertikales Gleiten ausgeführt werden kann, und wenn das Catchtouchmove-Attribut wahr ist, bedeutet dies, dass verhindert wird, dass Berührungsereignisse sprudeln.

Die spezifischen Vorgänge sind wie folgt:

1 Fügen Sie der Ansicht die Scroll-View-Komponente hinzu und setzen Sie die Scroll-Y- und Catchtouchmove-Attribute auf true.

<view>
<scroll-view scroll-y="true" catchtouchmove="true">
</scroll-view>
</view>

2. Fügen Sie im globalen CSS des Miniprogramms den folgenden Code hinzu, um zu verhindern, dass die Ansichtskomponente verschiebt.

html,body{
  height:100%;
  overflow:hidden;
}

Da wir die Scroll-View-Komponente in eine Ansicht einfügen, müssen wir nur das Verschieben der Ansichtskomponente verhindern, um den Effekt „Gleiten deaktivieren“ zu erzielen. Wir setzen die Höhe von HTML und Body auf 100 % und den Überlauf im globalen CSS auf versteckt. Auf diese Weise verhindern wir das Verschieben der gesamten Seite und die Ansichtskomponente kann nicht verschoben werden.

Bei diesem Ansatz kann es jedoch zu Problemen kommen. Wenn Sie Schiebevorgänge auf der Seite verwenden möchten, müssen wir das Überlaufattribut der HTML- und Body-Komponenten erneut auf „Auto“ setzen. Dieser Ansatz kann sich jedoch auf die Stile anderer Komponenten auswirken. Um dies zu verhindern, müssen wir die Auswirkungen auf andere Komponenten minimieren, indem wir „kein Gleiten“ implementieren.

Zusammenfassend lauten die Schritte zum Deaktivieren des manuellen Verschiebens der Ansicht in Uniapp wie folgt:

1 Fügen Sie der Ansicht die Scroll-Ansichtskomponente hinzu und fügen Sie Scroll hinzu -y und die Eigenschaft „catchtouchmove“ ist auf „true“ gesetzt.

2. Fügen Sie den folgenden Code im globalen CSS des Miniprogramms hinzu:

html,body{
  height:100%;
  overflow:hidden;
}

Auf diese Weise können wir den Effekt erzielen, dass das manuelle Verschieben der Ansicht verhindert wird, und Gleichzeitig hat die Kontrolle über die Auswirkungen anderer Komponenten weniger Einfluss.

Zusammenfassung

Das Uniapp-Framework bietet Entwicklern viele praktische Funktionen und APIs, aber manchmal müssen wir bei der Implementierung bestimmter Funktionen möglicherweise einige Einstellungen und Anpassungen vornehmen. In diesem Artikel erfahren Sie, wie Sie das manuelle Verschieben von Ansichten in einem Miniprogramm mithilfe der Scroll-View-Eigenschaften und globalen CSS-Einstellungen deaktivieren. Ich hoffe, dieser Artikel kann für alle hilfreich sein.

Das obige ist der detaillierte Inhalt vonUniapp verbietet das manuelle Verschieben von Ansichten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!