小程序24-滚动效果:scroll-view组件详解

在微信小程序中如果想实现内容滚动,需要使用 scroll-view 组件

scroll-view:可滚动视图区域,适用于需要滚动展示内容的场景,用户可以通过手指滑动或者点击滚动条滚动内容。

|----------|--------|
| scroll-x | 允许横向滚动 |
| scroll-y | 允许纵向滚动 |

实现横向/纵向滚动方式:

html 复制代码
<!-- 实现横向滚动 -->
<scroll-view class="scroll-x" scroll-x>
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>
<!-- 实现纵向滚动 -->
<scroll-view class="scroll-y" scroll-y>
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>
css 复制代码
.scroll-x {
  width: 100%;
  white-space: nowrap;
  background-color: skyblue;

  view {
    display: inline-block;
    width: 300rpx;
    height: 80rpx;
    &:last-child {
      background-color: lightcoral;
    }
    &:first-child {
      background-color: lightseagreen;
    }
  }
}
.scroll-y {
  height: 400rpx;
  background-color: blue;
  margin-top: 10rpx;
  
  view {
    height: 400rpx;

    &:last-child {
      background-color: lightcoral;
    }
    &:first-child {
      background-color: lightseagreen;
    }
  }
}
相关推荐
YongGit15 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子2 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试