scroll-view标签

作用是设置一个小界面，可滑动查看其中的链接，图片。
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

scroll-with-animation是滑动式的动效，涉及到js，之后再介绍。

实践：横滚动视图

wxml:

<scroll-view scroll-x>  <!-- 允许左右滑动 -->
  <view class="scrOut" >
    <view class="scrBox">123</view>
    <view class="scrBox">456</view>
    <view class="scrBox">678</view>
    <view class="scrBox">789</view>
    <view class="scrBox">abc</view>
  </view>
</scroll-view>

使用scroll-x设置成水平滚动
wxss:

.scrBox{
  width: 100px; 
  height: 100px; 
  background: yellowgreen; 
  margin-right: 2px;  /* 子元素边框 */
  flex: 0 0 100px  ;  /* 不放大，不缩小，保持原来100px */
}

补充：Flex布局完全指南

display:flex目的是让块级元素堆叠在一行，所以竖直排列元素时不用设置。

Flexbox 布局（也叫Flex布局，弹性盒子布局）目标在于提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。
文档:https://zhuanlan.zhihu.com/p/25984121

flex-grow

flex-grow规定在空间允许的情况下，子元素如何按照比例分配可用剩余空间。

flex-shrink

与flex-grow属性类似，flex-shrink定义了空间不足时项目的缩小比例。

flex-basis

flex-basis定义了在计算剩余空间之前子元素默认的大小。

flex

flex是flex-grow、flex-shrink、flex-basis三个属性的缩写。其中第二个和第三个参数(flex-grow,flex-basis)是可选的。默认值为0 1 auto。

实践：竖滚动视图

wxml:

<scroll-view class="scroll2" scroll-y scroll-top="150">
  <view class="scrOut2" >
    <view class="scrBox2">123</view>
    <view class="scrBox2">456</view>
    <view class="scrBox2">678</view>
    <view class="scrBox2">789</view>
    <view class="scrBox2">abc</view>
  </view>
</scroll-view>

wxss:

.scroll2{
  height: 350px;
}

.scrBox2{
  width: 100%;
  height: 100px;
  background: pink;
  margin-bottom: 1px;
}