微信小程序开发 scroll-view实现横向纵向滚动

教程指路：2.4.scroll-view可滚动视图区域组件_哔哩哔哩_bilibili

目录

scroll-view 可滚动视图区域组件

 实现纵向滚动

实现横向滚动

---

scroll-view 可滚动视图区域组件

微信小程序开发文档：

在wxml中写8行数字，且逐一递增

<view class="myScroll">
  <!-- 快捷布局 .row{$}*8 $ 往里面代入值-->
  <view class="row">1</view>
  <view class="row">2</view>
  <view class="row">3</view>
  <view class="row">4</view>
  <view class="row">5</view>
  <view class="row">6</view>
  <view class="row">7</view>
  <view class="row">8</view>
</view>
<!-- 布局完之后记得写样式 wxss -->

wxss，写一下每个盒子的样式

.myScroll{
  /* 盒子的样式 */
  width: 100%;
  background: #eeeeee;
  height: 220rpx;
  /* 让父件适应子件高度 */

}

.myScroll .row{
  /* 定义每个子件 */
  width: 220rpx;
  height: 220rpx;
  background: palegreen;
  margin-right: 20rpx;
  /* 右边间距 */

}

 实现纵向滚动

wxml

<scroll-view class="myScroll" scroll-y>
  <!-- 快捷布局 .row{$}*8 $ 往里面代入值-->
  <view class="row">1</view>
  <view class="row">2</view>
  <view class="row">3</view>
  <view class="row">4</view>
  <view class="row">5</view>
  <view class="row">6</view>
  <view class="row">7</view>
  <view class="row">8</view>
</scroll-view>
<!-- 布局完之后记得写样式 wxss -->

实现效果

实现横向滚动

.myScroll{
  /* 盒子的样式 */
  width: 100%;
  background: #eeeeee;
  height: 220rpx;
  /* 让父件适应子件高度 */
  /* 强制让子元素显示在一行 */
  white-space: nowrap;


}

.myScroll .row{
  /* 定义每个子件 */
  width: 220rpx;
  height: 220rpx;
  background: palegreen;
  margin-right: 20rpx;
  /* 右边间距 */
  /* 转成行级块元素 */
  display: inline-block;

}

.myScroll .row:last-child{
  /* 选择最后一个子件 清零边距 */
  margin-right: 0;

}

记得让最右边顶格

实现效果