À propos de la méthode de mise en œuvre du conteneur de vue défilante de l'applet WeChat-Développement de mini-programmes-php.cn

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

不言

Libérer： 2018-06-26 16:13:08

original

2907 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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!