À propos de la méthode de mise en œuvre du conteneur de vue défilante de l'applet WeChat

Cet article présente principalement les informations pertinentes sur la méthode d'implémentation du conteneur de vue déroulante de l'applet WeChat. J'espère que cet article pourra aider tout le monde et permettre à tout le monde de maîtriser cette partie du contenu. Les amis dans le besoin peuvent s'y référer

La méthode d'implémentation du conteneur scroll view de l'applet WeChat

Télécharger directement les codes et rendus des deux solutions :

Option 1

Cette solution consiste à utiliser la vue directement et à définir le débordement : 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;
}

Rendu :

Option 2

Utiliser la vue déroulante + le conteneur comme conteneur

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;
}

Rendu :

Résultat de la comparaison :

Parce que le défilement sur l'iPhone a un effet ressort, option 1 est utilisé lors du défilement. Des irrégularités peuvent survenir. Cette situation ne se produira pas dans l’option 2 et le défilement sera fluide.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la production de la page d'accueil dans le mini programme WeChat

Notification de message défilant dans le Mise en œuvre du mini-programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!