scroll-view 可滚动视图区域

最新推荐文章于 2024-08-20 08:52:10 发布

zlq_csdn

最新推荐文章于 2024-08-20 08:52:10 发布

阅读量747

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/zlq_CSDN/article/details/88616880

版权

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

14 篇文章 0 订阅

订阅专栏

共同wxss代码：

.bgred{
  background: red;
}
.bgyellow{
  background: yellow;
}
.bggreen{
  background: green;
}

1.纵向滚动
wxml代码如下：

<view class='scroll-y'>
  <scroll-view class='scroll-view-y' scroll-y="true" scroll-top="50">   <!--scroll-y="true"Y轴方向滚动-->
    <view class='scroll-y-item bgred'></view>
    <view class='scroll-y-item bgyellow'></view>
    <view class='scroll-y-item bggreen'></view>
  </scroll-view>
</view>

wxss代码如下：

.scroll-y{
  width:100%;
  height: 200px;
  margin-bottom: 20%;
}
.scroll-view-y{
  width: 100%;
  height: 200px;
}
.scroll-y-item{
  width: 100%;
  height: 80px;
}

1.横向滚动
wxml代码如下：

<view class='scroll-x'>
  <scroll-view class='scroll-view-x' scroll-x scroll-left="80">  <!--scroll-x="true"横向滚动-->
    <view class='scroll-x-item bgred'></view>
    <view class='scroll-x-item bgyellow'></view>
    <view class='scroll-x-item bggreen'></view>
  </scroll-view>
</view>

wxss代码如下：

.scroll-view-x{
  height: 200px;
  margin-bottom: 20%;
  white-space: nowrap;   /*让子元素不换行 */
}
.scroll-x-item{
  width: 50%;
  height: 200px;
  display: inline-block;    /* 给需要滑动的元素进行横向编排*/
}

效果图如下：
在这里插入图片描述