Maison > Applet WeChat > Développement de mini-programmes > Introduction détaillée au composant de défilement de l'applet WeChat

Introduction détaillée au composant de défilement de l'applet WeChat

高洛峰
Libérer: 2017-03-06 10:29:33
original
2388 Les gens l'ont consulté

Introduction détaillée au composant de défilement de lapplet WeChat

scroll-view est une vue de défilement, qui est divisée en défilement horizontal et défilement vertical. Notez que la hauteur doit être définie lorsque la vue de défilement défile verticalement, sinon la vue de défilement ne prendra pas effet. Les vues de défilement sont couramment utilisées dans les interfaces avec de nombreux éléments Par exemple, mon module

attributs principaux :

Introduction détaillée au composant de défilement de lapplet WeChat

Démonstration d'utilisation :

<.>

wxml

<!--垂直滚动,这里必须设置高度-->
<scroll-view scroll-y="true" style="height: 200px">
 <view style="background: red; width: 100px; height: 100px" ></view>
 <view style="background: green; width: 100px; height: 100px"></view>
 <view style="background: blue; width: 100px; height: 100px"></view>
 <view style="background: yellow; width: 100px; height: 100px"></view>
</scroll-view>

<!-- white-space
 normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)
 pre: 保持HTML源代码的空格与换行,等同与pre标签
 nowrap: 强制文本在一行,除非遇到br换行标签
 pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行
 pre-line: 同pre属性,但是遇到连续空格会被看作一个空格
 inherit: 继承
-->
<!--水平滚动-->
<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >
<!-- display: inline-block-->
 <view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
 <view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
 <view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
 <view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
</scroll-view>
Copier après la connexion

Pour une introduction plus détaillée au composant d'affichage déroulant de l'applet WeChat, veuillez faire attention à PHP Filet 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