小程序：视图组件

View组件

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

scroll-view

用于实现可滚动视图区域

scroll-y属性即可实现纵向滚动。需要注意的是，纵向滚动需要在样式中为<scroll-view>设置一个固定高度，否则会被子元素撑大。

例：

<scroll-view scroll-y style="height:500rpx" >
      <view style="background:yellow;height:2000rpx;"></view>
      <view>The end</view>
</scroll-view>

例2：

test4.wxml:

<scroll-view scroll-x scroll-y style="height:200px;background:#ccc" bindscroll="scroll">
      <view style="width:200%;height:400px;"></view>
      <view>The end</view>
</scroll-view>

test4.js:

scroll: function(e) {
    console.log(e.detail)
  },

scroll-view组件设置了允许横向和纵向滚动，当发生滚动时就会发生执行事件处理函数scroll

注意：scroll-view内的组件宽度或高度大于scroll-view组件本身时，才会由滚动发生

swiper组件

WXML:

<!-- 商城首页 -->
<swiper class="content-info-slide" indicator-dots="true" autoplay="true" interval="2000">
  <swiper-item>
    <image src='https://img.youpin.mi-img.com/youpinoper/1002265792a851c83054da07959d976c.jpg?id=&w=1080&h=450'
      mode="widthFix"></image>
   </swiper-item>
   <swiper-item>
    <image src='https://img.youpin.mi-img.com/youpinoper/f62e9e59b21f97f81ed3ab567f0e4b08.jpg?id=&w=1080&h=450'
      mode="widthFix"></image>
   </swiper-item>
   <swiper-item>
    <image src='https://img.youpin.mi-img.com/youpinoper/0bb6ad5d5c85b03534b460c297c6b85a.jpeg?id=&w=1080&h=450'
      mode="widthFix"></image>
  </swiper-item>

</swiper>

WXSS:

.content-info-slide image{
  width:100%;
}