Maison >Applet WeChat >Développement de mini-programmes >Explication détaillée du composant d'affichage de défilement de l'applet WeChat
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>
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%; }
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; }
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} |
Recommandations associées :
4 articles recommandés sur le composant scroll-view
Explication détaillée de la méthode de scroll-view pour compléter la page de liste
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!