So implementieren Sie den WeChat-Applet-Scroll-View-Container

Dieser Artikel stellt hauptsächlich die relevanten Informationen zur Implementierungsmethode des Scroll-View-Containers des WeChat-Applets vor. Ich hoffe, dass dieser Artikel allen helfen kann, diesen Teil des Inhalts zu beherrschen Ich hoffe, es kann allen helfen.

So implementieren Sie den Scroll-View-Container des WeChat-Applets

Laden Sie die Codes und Renderings der beiden Lösungen direkt hoch:

Option 1

Diese Lösung besteht darin, die Ansicht direkt zu verwenden und den Überlauf festzulegen: scroll

wxml:
 <view class="container">
  <view class="content" wx:for="{{11}}" wx:key="item">
    {{item}}
  </view>
</view>

wxss:

 .container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: scroll;
  padding-bottom: 20rpx;
  background: #FD9494;
}

.content {
  margin: 20rpx auto 0 auto;
  width: 710rpx;
  height: 300rpx;
  background: #ddd;
  border-radius: 16rpx;
  font-size: 80rpx;
  line-height: 300rpx;
  text-align: center;
}

Rendering:

Option 2

Scrollansicht + Container als Container verwenden

wxml:

<scroll-view class="main_container" scroll-y>
  <view class="container">
    <view class="content" wx:for="{{11}}" wx:key="item">
      {{item}}
    </view>
  </view>
</scroll-view>

wxss:

.main_container {
  position: relative;
  width: 750rpx;
  height: 100vh;
  background: #FD9494;
}

 .container {
  position: absolute; /*使用absolute的原因是因为为了防止第一个子视图有margin-top时，造成顶部留白的情况*/
  left: 0;
  top: 0;
  width: 100%;
  padding-bottom: 20rpx;
} 

.content {
  margin: 20rpx auto 0 auto;
  width: 710rpx;
  height: 300rpx;
  background: #ddd;
  border-radius: 16rpx;
  font-size: 80rpx;
  line-height: 300rpx;
  text-align: center;
}

Rendering:

Vergleichsergebnis:

Da das Scrollen auf dem iPhone einen Federeffekt hat, wird Lösung 1 beim Scrollen nicht angezeigt . Diese Situation wird bei Option 2 nicht auftreten und das Scrollen erfolgt reibungslos.

Option 2 ist eine bessere Lösung für die Scrollansicht, die ich bisher zusammengefasst habe.

Verwandte Empfehlungen:

Slider-Ansichtscontainer für die WeChat-Applet-Entwicklung

Empfohlene 10 Ansichtscontainer-Quellcodes (Sammlung)

WeChat-Applet: Komponenteninterpretation und -analyse anzeigen (Container anzeigen)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den WeChat-Applet-Scroll-View-Container. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!