微信小程序scroll-view滚动视图

微信小程序scroll-view滚动视图，scroll-view与view相同的地方在于两者都没有样式，都需要通过css手动自定义样式；不同的地方在于，如果view指定了大小，那么当内部的组件大于view的大小时，会默认超出显示，或者设置为不显示，并且view可以不指定大小，scroll-view必须指定大小，而且，当内部的组件大于scroll-view的大小时，不会超出显示，可以进行滑动来查看多余的内容。一般scroll-view用于列表的展示，来进行滑动查看。scoll-view示例代码如下：

<!--index.wxml-->
<scroll-view scroll-y='true'>
  <view class='red'>red</view>
<view class='blue'>blue</view>
<view class='green'>green</view>
  </scroll-view>
  /**index.wxss**/
  /* scroll-view样式 */
  scroll-view{
width: 100%;
height: 150px;
  }
  /* class='red'样式 */
  .red{
width: 100px;
height: 100px;
background-color: red;
  }
  /* class='blue'样式 */
  .blue{
width: 100px;
height: 100px;
background-color: blue;
  }
  /* class='green'样式 */
  .green{
width: 100px;
height: 100px;
background-color: green;
  }

效果如图所示。

scroll-view组件的属性如表所示：

注意

• 在属性类型为boolean的属性中可以简写为只写属性，如scroll-y = true可以简写为scroll-y。
• 如果要填写boolean属性的值，要在等号后面添加一个空格，如scroll-y = true等号后面要添加一个空格隔开，否则报错。

酷客网相关文章：

• 微信小程序view组件
• 微信小程序引用
• 微信小程序模板使用
• 微信小程序事件