Comment implémenter le conteneur de vue défilante de l'applet WeChat

小云云
Libérer: 2018-01-31 13:41:23
original
2463 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. j'espère que cela pourra aider tout le monde.

Comment implémenter le conteneur de vue déroulante 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 scroll-view + 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 :

Le défilement sur l'iPhone ayant un effet ressort, la solution 1 n'apparaîtra pas lors du phénomène de défilement fluide. Cette situation ne se produira pas dans l’option 2 et le défilement sera fluide.

L'option 2 est une meilleure solution d'affichage par défilement que j'ai résumée jusqu'à présent.

Recommandations associées :

Conteneur de vue Slider pour le développement d'applets WeChat

Codes sources du conteneur de vue 10 recommandés (collection)

Applet WeChat : interprétation et analyse des composants de vue (conteneur de vue)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal