微信小程序的scroll-view组件

scroll-view为滚动视图，共有水平滚动和垂直滚动两种

 

使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。

index.wxss 是页面的结构文件：

<!--垂直滚动-->
<view class="section">
<view class="section__title">vertical scroll</view>
    <scroll-view scroll-y="true" style="height: 150px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
        <view  class="scroll-view-item ">西瓜</view>
        <view  class="scroll-view-item ">橘子</view>
        <view   class="scroll-view-item ">苹果</view>
        <view  class="scroll-view-item ">香蕉</view>  
        <view   class="scroll-view-item ">葡萄</view>
        <view   class="scroll-view-item ">柚子</view>
        <view   class="scroll-view-item ">火龙果</view>
        <view class="scroll-view-item ">哈密瓜</view>
    </scroll-view>
</view>

　　

<!--水平滚动-->
<view class="section scroll_x">
<view class="section__title">horizontal scroll</view>
    <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex">
        <view  class="scroll-view-item ">西瓜</view>
        <view  class="scroll-view-item ">橘子</view>
        <view   class="scroll-view-item ">苹果</view>
        <view  class="scroll-view-item ">香蕉</view>  
        <view   class="scroll-view-item ">葡萄</view>
        <view   class="scroll-view-item ">柚子</view>
        <view   class="scroll-view-item ">火龙果</view>
        <view class="scroll-view-item ">哈密瓜</view>
    </scroll-view>
</view>

　　

以下是页面效果：