微信小程序开发——scrollview组件

番薯大佬

已于 2025-08-28 17:56:04 修改

阅读量929

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序学习文章标签：小程序开发 scrollview组件

于 2018-03-30 14:45:39 首次发布

本文链接：https://blog.youkuaiyun.com/potato512/article/details/79757542

微信小程序学习专栏收录该内容

53 篇文章

订阅专栏

本文介绍了微信小程序中scrollview组件的使用，包括上下滚动和左右滚动的效果展示，并提供了具体的xxx.wxml结构代码和xxx.wxss样式代码示例。

效果图（上下滚动、左右滚动）

代码示例

xxx.wxml结构代码

<view class="sectionVertical">
  <view class="sectionTitle">vertical scroll</view>
  <scroll-view scroll-y="true" class='scrollVertical'>
    <view class="row bc_green"></view>
    <view class="row bc_red"></view>
    <view class="row bc_yellow"></view>
    <view class="row bc_blue"></view>
    <view class="row bc_red"></view>
    <view class="row bc_green"></view>
    <view class="row bc_blue"></view>
  </scroll-view>
</view>

 <view class="sectionHorizontal">
  <view class="sectionTitle">horizontal scroll</view>
  <scroll-view scroll-x='true'>
    <view class='scrollHorizontal'>
      <view class="row bc_green"></view>
      <view class="row bc_red"></view>
      <view class="row bc_yellow"></view>
      <view class="row bc_blue"></view>
      <view class="row bc_green"></view>
      <view class="row bc_red"></view>
      <view class="row bc_yellow"></view>
      <view class="row bc_blue"></view>
    </view>
  </scroll-view>
</view>

xxx.wxss样式代码

/* pages/modules/containerPages/scrollviewPage/scrollview.wxss */
.sectionVertical{
  background-color: purple;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  /* 按比例布局 */
  /* position: absolute;
  width: 100%;
  height: 50%; */

  /* 按大小布局 */
   height: 230px; 
}
.sectionTitle{
  background-color: orange;

  text-align: center;
  color: red;
  line-height: 30px;
  font-size: 20px;

  /* 按比例布局 */
  /* width: 100%;
  height: 20%; */

  /* 按大小布局 */
  width: 100%;
  height: 30px;  
}

.scrollVertical{
  flex: 1;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  /* 按比例布局 */
  /* height: 80%; */

  /* 按大小布局 */
    height: 200px; 
}
.scrollVertical .row{
  flex: 1;

  /* 按大小布局 */
  height: 50px;
}

.sectionHorizontal{
  background-color: Moccasin;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  /* margin-top: 200px; */
  /* margin-bottom: 0px; */
  width: 100%;
  height: 130px;
}
.scrollHorizontal{
  display: flex;
  justify-content: flex-start;
  flex-direction: row; 
  flex-wrap: nowrap;     

  width: 100%; 
  height: 100px;
}
.scrollHorizontal .row{ 
  flex-shrink: 0;

  width: 100px;
  height: 100px;
}

.bc_green{
  background-color: MediumAquamarine;
}
.bc_red{
  background-color: LightPink;
}
.bc_yellow{
  background-color: LightGoldenrodYellow;
}
.bc_blue{
  background-color: MediumPurple;
}