小白学微信小程序————scroll-view

微信小程序第一天无基础学习
今天学习了标签

要做到拖拽可滑动的效果必须要用到以上的属性，y是纵向滑动，x是横向滑动，这里主要介绍横向滑动的使用方法
scroll-x属性才具备了拖动效果，但是如果只有scroll-x属性会出现一下情况

换行需要在wxss中添加white-space: nowrap和display: inline-block;表示横向显示。如有需要设置位置的开始滑动位置可以使用scrol-left，动画显示为scroll-with-animation
在index.wxml的代码如下：

<scroll-view class="out" scroll-left="200" scroll-with-animation scroll-x>
  <view class="box">1</view>
  <view class="box">2</view>
  <view class="box">3</view>
  <view class="box">4</view>
  <view class="box">5</view>
  <view class="box">6</view>
  <view class="box">7</view>
  <view class="box">8</view>
</scroll-view>

wxss代码如下：

.out{
  width: 100%;
  background: #ccc;
  white-space: nowrap
  /* 不换行 */
}
.out .box{
  width: 100px;
  height: 100px;
  background: pink;
  display: inline-block;
  margin-right: 2px
}