小程序 --- scroll-view（可滚动视图区域）

演示

分析

竖向滚动：用竖向滚动时，需要给 scroll-view 一个 固定高度（不然无法滚动），通过 WXSS 设置 height。scroll-view 宽度默认为100%；

横向滚动：横向滚动有两条特别重要的样式：

• display：inline-block; : 使其成为行内块元素。可以像内联元素一样排在同一行（如果父级元素宽度不够就会换行），也可以像块级元素一样设置高宽；
•  white-space: nowrap; : 规定段落中的文本不换行；

通过上面两条样式，就可以使所有元素排在同一行，再结合 scroll-x 就是实现横向滚动啦。

 

完整代码

wxml

<view class="wrap">
    <!-- 竖向滚动 -->
    <scroll-view class="scroll" scroll-y scroll-top="200">
        <view class="scroll_item" wx:for="{{20}}" wx:key="*this">
        {{item}}
        </view>
    </scroll-view>

    <!-- 横向滚动 -->
    <scroll-view class="scroll2" scroll-x>
        <view class="scroll_item" wx:for="{{20}}" wx:key="*this">
            {{item}}
        </view>
    </scroll-view>
</view>

wxss

.wrap .scroll {
  height: 500rpx;
  width: 80rpx;
  background-color: pink;
}
.wrap .scroll2 {
  margin-top: 100rpx;
  height: 100rpx;
  background-color: pink;
  white-space: nowrap;
}
.wrap .scroll2 .scroll_item {
  display: inline-block;
}
.scroll_item {
  padding: 10rpx;
  width: 50rpx;
  height: 50rpx;
}

 

 

--- cezlz ---