微信小程序常用组件视频课程-可滚动视图区域-scroll-view的使用

版权声明：黄菊华 https://blog.csdn.net/u013818205/article/details/88667541

效果图

wxml代码

<view>bindscrolltoupper滚动到顶部/左边会触发</view>
<view>bindscrolltolower滚动到底部/右边会触发 </view>
<view>bindscroll 滚动时触发</view>
<view>scroll-into-view 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素</view>
<view>scroll-top 设置竖向滚动条位置</view>

<view>纵向滚动 vertical scroll</view>
<view>scroll-y 允许纵向滚动</view>
<scroll-view scroll-y style='height:100px;' bindscrolltoupper="upper">
  <view class='xiangmu bg_green'>01</view>
  <view class='xiangmu bg_red'>02</view>
  <view class='xiangmu bg_yellow'>03</view>
  <view class='xiangmu bg_blue'>04</view>
</scroll-view>


<view>横向滚动 horizontal scroll</view>
<scroll-view scroll-x style='width:100%;' class='heng'>
  <view class='xiangmu2 bg_green'>01</view>
  <view class='xiangmu2 bg_red'>02</view>
  <view class='xiangmu2 bg_yellow'>03</view>
  <view class='xiangmu2 bg_blue'>04</view>
</scroll-view>

欢迎大家收看我的视频教程：微信小程序组件入门到精通
https://edu.csdn.net/course/detail/16193