小程序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;
    }
  }
}
相关推荐
万少3 分钟前
最新 HarmonyOS API 20 知识库 重磅推出
前端
蓝易云10 分钟前
CentOS 7上安装X virtual framebuffer (Xvfb) 的步骤以及如何解决无X服务器的问题
前端·后端·centos
到底起什么网名才能不重名10 分钟前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
然我11 分钟前
面试必问:JS 事件机制从绑定到委托,一篇吃透所有考点
前端·javascript·面试
小蜜蜂嗡嗡20 分钟前
flutter封装vlcplayer的控制器
前端·javascript·flutter
一tiao咸鱼22 分钟前
如何简单使用 prompt
前端·aigc
cdbqss127 分钟前
VB.net编写的身份证类
前端·.net
骑自行车的码农1 小时前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky1 小时前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克1 小时前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf