Heim > WeChat-Applet > Mini-Programmentwicklung > Einführung in die Methode zur Implementierung der Bildlaufansicht zum Ausblenden der Bildlaufleiste bei der WeChat-Applet-Entwicklung

Einführung in die Methode zur Implementierung der Bildlaufansicht zum Ausblenden der Bildlaufleiste bei der WeChat-Applet-Entwicklung

高洛峰
Freigeben: 2017-03-16 13:47:14
Original
5443 Leute haben es durchsucht

Bei der Entwicklung von Webseiten entscheiden sie sich aus Gründen der Schönheit der Seite häufig dafür, die standardmäßigen Bildlaufleisten im Bildlaufbereich zu entfernen. Eine der Möglichkeiten, die versteckte Bildlaufleiste von scroll-view im WeChat-Applet zu implementieren:

Werfen wir zunächst einen Blick auf einige der Eigenschaften von scroll-viewKomponenten

Einführung in die Methode zur Implementierung der Bildlaufansicht zum Ausblenden der Bildlaufleiste bei der WeChat-Applet-Entwicklung

Wenn Sie vertikales Scrollen verwenden, müssen Sie eine feste Höhe zuweisen und die Höhe über WXSS festlegen.
Sehen wir uns einige einfache Codebeispiele an:

<view class="section">
 <view class="sectiontitle">vertical scroll</view>
 <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
 <view id="green" class="scroll-view-item bc_green"></view>
 <view id="red" class="scroll-view-item bc_red"></view>
 <view id="yellow" class="scroll-view-item bc_yellow"></view>
 <view id="blue" class="scroll-view-item bc_blue"></view>
 </scroll-view>
  
 <view class="btn-area">
 <button size="mini" bindtap="tap">click me to scroll into view </button>
 <button size="mini" bindtap="tapMove">click me to scroll</button>
 </view>
</view>
<view class="section section_gap">
 <view class="sectiontitle">horizontal scroll</view>
 <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
 <view id="green" class="scroll-view-item_H bc_green"></view>
 <view id="red" class="scroll-view-item_H bc_red"></view>
 <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
 <view id="blue" class="scroll-view-item_H bc_blue"></view>
 </scroll-view>
</view>
Nach dem Login kopieren
var order = [&#39;red&#39;, &#39;yellow&#39;, &#39;blue&#39;, &#39;green&#39;, &#39;red&#39;]
Page({
 data: {
 toView: &#39;red&#39;,
 scrollTop: 100
 },
 upper: function(e) {
 console.log(e)
 },
 lower: function(e) {
 console.log(e)
 },
 scroll: function(e) {
 console.log(e)
 },
 tap: function(e) {
 for (var i = 0; i < order.length; ++i) {
  if (order[i] === this.data.toView) {
  this.setData({
   toView: order[i + 1]
  })
  break
  }
 }
 },
 tapMove: function(e) {
 this.setData({
  scrollTop: this.data.scrollTop + 10
 })
 }
})
scroll-view
Nach dem Login kopieren

Einführung in die Methode zur Implementierung der Bildlaufansicht zum Ausblenden der Bildlaufleiste bei der WeChat-Applet-Entwicklung

Einführung in die Methode zur Implementierung der Bildlaufansicht zum Ausblenden der Bildlaufleiste bei der WeChat-Applet-Entwicklung

Das Rendering ist wie folgt:

Einführung in die Methode zur Implementierung der Bildlaufansicht zum Ausblenden der Bildlaufleiste bei der WeChat-Applet-Entwicklung

Hinweis:
(1) Textbereich, Mao, Leinwand, Videokomponente
(2) Scroll-Init-View kann nicht beim Scrollen verwendet werden -view Die -Priorität ist höher als scroll-top
(3) Das onPullDownRefresh -Ereignis kann in der Scroll-Ansicht nicht ausgelöst werden
(4) Wenn Sie pull- verwenden möchten Nach unten aktualisieren müssen Sie das Scrollen der Seite anstelle der Scroll-Ansicht verwenden, sodass Sie auch zum Anfang der Seite zurückkehren können, indem Sie auf die obere Statusleiste


Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Implementierung der Bildlaufansicht zum Ausblenden der Bildlaufleiste bei der WeChat-Applet-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage