前端开发-微信小程序scroll-view控件实现滚动效果

1、横向滚动

我在开发小程序项目的时候功能需要横向滚动
先上代码

<scroll-view scroll-x="true" style="white-space: nowrap;display:flex">
     <view class="outerbox">
          <view class="box1" bindtap="click" data-id="{{index}}" style='{{tag == index?"background:#228B22;color:#fff;":"background:#fff;color:#666"}}' wx:for="{{dateList}}" wx:key="{{index}}" data-text="{{item.year}}-{{item.month}}-{{item.date}}">
                  <view class="font1">{{item.week}}</view>
                  <view class="font2">{{item.month}}-{{item.date}}</view>
          </view>         
     </view>
</scroll-view> 

当时开发的时候有点坑，可能因为漏掉了一些属性，所以当时效果一直出不来，后来来来回回试了好多次才弄好。几个非常重要的属性千万别忘记了哦

1. scroll-x
2. white-space: nowrap
3. display:flex 或者 display:inline-block

2、竖向滚动

竖向滚动就简单多了，只需要设置两个属性即可。

1. scroll-y
2. 设置高度height

<scroll-view scroll-y="true" style="height:200rpx">
</scroll-view>