微信小程序开发—(十三)可滚动视图区域 scroll-view

￡神魔★判官ぃ 2021-09-12 07:01 635阅读 0赞

一.知识点

**[可滚动视图区域 scroll-view][scroll-view]**

![20170516095454237][]

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

![20170516095630310][]

1.index.wxml

<view class="section">
      <view class="section__title">vertical scroll竖直方向</view>
      <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{
       {toView}}" scroll-top="{
       {scrollTop}}">
        <view id="green" class="scroll-view-item bc_green"></view>
        <view id="red"  class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="blue" class="scroll-view-item bc_blue"></view>
      </scroll-view>
      <view class="btn-area">
        <button size="mini" bindtap="tapMove">click me to scroll</button>
      </view>
    </view>

2.index.wxss

.scroll-view_H{
      white-space: nowrap;
    }
    .scroll-view-item{
      height: 200px;
    }
    .scroll-view-item_H{
      display: inline-block;
      width: 100%;
      height: 200px;
    }
    #green{
    	background:green;
    }
    #red{
    	background:red;
    }
    #yellow{
    	background:yellow;
    }
    #blue{
    	background:blue;
    }

index.js

![Center][]

感觉手册上的事列用起来有点问题，你们呢？如果是我的问题欢迎指出来![大笑][laugh.gif]

[scroll-view]: http://www.w3cschool.cn/weixinapp/weixinapp-scroll-view.html
[20170516095454237]: /images/20210813/55af39fde51f4c6db24e30b968fae134.png
[WXSS]: http://www.w3cschool.cn/weixinapp/weixinapp-wxss.html
[20170516095630310]: /images/20210813/376a8e38d9bc4a2ea682c9f9321a07dc.png
[Center]: /images/20210813/d457f89a466b4f918c801eb0e29ffd5d.png
[laugh.gif]: /images/20210813/d99a76db966f42a69ca6d73d7cf8d40c.png