Explication détaillée du composant d'affichage de défilement de l'applet WeChat-Développement de mini-programmes-php.cn

Explication détaillée du composant d'affichage de défilement de l'applet WeChat

小云云

Libérer： 2018-05-18 17:05:03

original

17455 Les gens l'ont consulté

Cet article présente principalement des informations pertinentes sur l'explication détaillée de la vue défilante du composant de l'applet WeChat. J'espère que cet article pourra aider tout le monde à comprendre et à maîtriser cette partie du contenu. J'espère qu'il pourra s'y référer. peut aider tout le monde.

Explication détaillée de srcoll-view dans le composant applet WeChat

Aujourd'hui, j'enregistrerai les problèmes et les solutions rencontrés dans l'apprentissage de la vue défilante, j'espère que cela pourra être utile. aux autres étudiants aidés.

Montrez d’abord l’effet que vous souhaitez obtenir. ↓ le défilement vertical implémente le défilement vers le haut et vers le bas, et le défilement horizontal implémente le défilement vers la gauche et la droite.

Joignez d'abord le code wxml.

<view class="container"> 
 <view> 
  <text>vertical scroll</text> 
  <scroll-view scroll-y class="scroll-view-y" scroll-top="{{scrollTop}}"> 
   <view id="green" class="scroll-y-item bg_green"></view> 
   <view id="red" class="scroll-y-item bg_red"></view> 
   <view id="blue" class="scroll-y-item bg_blue"></view> 
   <view id="yellow" class="scroll-y-item bg_yellow"></view> 
  </scroll-view> 
 </view> 
 
 <view> 
  <text>horizontal scroll</text> 
  <scroll-view scroll-x class="scroll-view-x" style="width:100%"> 
   <view class="scroll-view-x"> 
    <view class="scroll-x-item bg_green"></view> 
    <view class="scroll-x-item bg_red"></view> 
    <view class="scroll-x-item bg_blue"></view> 
    <view class="scroll-x-item bg_yellow"></view> 
   </view> 
  </scroll-view> 
 </view> 
</view>

Copier après la connexion

1. L'ensemble de l'interface est empaqueté par une vue. La classe de cette vue est incluse lors de la création de quickStart et peut être ajustée selon les besoins. Après cela, les deux vues enveloppent chacune une vue défilante et le texte au-dessus.

2. La première vue de défilement doit défiler verticalement, définissez scroll-y="{{true}}" (ou écrivez scroll-y directement). La classe de ce scrollview est "scroll-view-y", et le code sera joint plus tard. L'attribut scroll-top définit la position initiale de la barre de défilement, et scrollTop est déclaré dans les données du fichier js (peut être supprimé si cela n'est pas nécessaire).

3. Les quatre vues de scrollview qui n'utilisent pas de couleurs ont les mêmes attributs sauf la couleur.

est le code wxss de la vue à défilement vertical

.scroll-view-y { 
 height: 200px; 
 width: 100%; 
} 
 
.scroll-y-item { 
 height: 70px; 
 width: 100%; 
}

Copier après la connexion

4 La vue à défilement horizontale est fondamentalement similaire à la vue à défilement verticale. Concentrons-nous sur la différence.

(1) La vue de défilement dans le sens vertical enveloppe directement 4 vues de couleurs différentes dans le sens horizontal, chaque bloc de couleur doit d'abord être enveloppé avec une vue. les blocs sont disposés horizontalement.

(2) fichier wxss

est le code wxss de la vue de défilement horizontale, scroll-view-x est l'attribut du curseur horizontal, scroll-x-item est le chaque élément dans le curseur horizontal Propriétés du bloc de couleur.

.scroll-view-x { 
 width: 300px; 
 height: 100px; 
 display: flex; 
 overflow: scroll; 
} 
 
.scroll-x-item { 
 width: 95px; 
 height: 100%; 
 display: inline-table; 
}

Copier après la connexion

Vous pouvez voir :

①Le curseur horizontal a deux autres attributs, l'affichage et le débordement. L'affichage est défini sur flex et le débordement est défini pour défiler lorsque la disposition enfant dépasse le conteneur parent.

②L'attribut d'affichage du bloc de couleur est défini sur inline-table. C'est très important ! ! ! Je n'ai pas écrit cet attribut au début et je n'ai pas pu réaliser le glissement horizontal de la vue de défilement pendant longtemps. Après mes tentatives constantes, j’ai enfin essayé, et j’en suis très content ! Tirez la langue

Vous trouverez ci-joint la description officielle de l'attribut de WeChat ↓

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
bindscroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}