微信小程序scroll-view 横向和纵向scroll-view组件

这里写图片描述

scroll-view为滚动视图,分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块

主要属性:

这里写图片描述

使用演示:

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>



<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >

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

你可能感兴趣的:(微信小程序教程,横向纵向)