小程序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;
    }
  }
}
相关推荐
小小小小宇6 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊6 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习7 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖7 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖7 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐8 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121388 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴8 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript