【微信小程序】基本橫向、纵向滚动Scroll-view（95/100）

原创已于 2025-08-24 21:02:36 修改 · 5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #微信小程序switch #微信小程序怎么打断点调试 #微信小程序单选框 #微信开发者工具mac #微信小程序断点调试

于 2022-07-15 14:57:45 首次发布

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

29 篇文章

订阅专栏

在这里插入图片描述
布局：

<!--pages/scrollView/scrollView.wxml-->
<text>Vertical Scroll\n纵向滚动</text>
<scroll-view scroll-y="true" style="height: 500rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  <view id="demo1" class="scroll-view-item demo-text-1"></view>
  <view id="demo2" class="scroll-view-item demo-text-2"></view>
  <view id="demo3" class="scroll-view-item demo-text-3"></view>
</scroll-view>
<view class="page-section-title">
  <text>Horizontal Scroll\n横向滚动</text>
</view>
<view class="page-section-spacing">
        <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
          <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
      </view>

样式：

/* pages/scrollView/scrollView.wxss */
.page-section-spacing{
  margin-top: 60rpx;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 300rpx;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 300rpx;
}

模型及控制如下：

// pages/scrollView/scrollView.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    toView: 'green'
  },
  tap() {
    for (let i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1],
          scrollTop: (i + 1) * 200
        })
        break
      }
    }
  },

  tapMove() {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  },
  upper(e) {
    console.log(e)
  },

  lower(e) {
    console.log(e)
  },

  scroll(e) {
    console.log(e)
  },
  scrollToTop() {
    this.setAction({
      scrollTop: 0
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

和官网有所不同，不过笔者还是尽量进行简化。简单的点胜过复杂的高明

功能描述

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性说明

属性类型默认值必填说明最低版本
scroll-x boolean false 否允许横向滚动 1.0.0

scroll-y boolean false 否允许纵向滚动 1.0.0

upper-threshold number/string 50 否距顶部/左边多远时，触发 scrolltoupper 事件 1.0.0

lower-threshold number/string 50 否距底部/右边多远时，触发 scrolltolower 事件 1.0.0

scroll-top number/string 否设置竖向滚动条位置 1.0.0

scroll-left number/string 否设置横向滚动条位置 1.0.0

scroll-into-view string 否值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 1.0.0
scroll-with-animation boolean false 否在设置滚动条位置时使用动画过渡 1.0.0

enable-back-to-top boolean false 否 iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 1.0.0

enable-flex boolean false 否启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。 2.7.3

scroll-anchoring boolean false 否开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。 2.8.2

refresher-enabled boolean false 否开启自定义下拉刷新 2.10.1

refresher-threshold number 45 否设置自定义下拉刷新阈值 2.10.1

refresher-default-style string “black” 否设置自定义下拉刷新默认样式，支持设置 black | white | none， none 表示不使用默认样式 2.10.1

refresher-background string “#FFF” 否设置自定义下拉刷新区域背景颜色 2.10.1

refresher-triggered boolean false 否设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 2.10.1

enhanced boolean false 否启用 scroll-view 增强特性，启用后可通过 ScrollViewContext 操作 scroll-view 2.12.0

bounces boolean true 否 iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效) 2.12.0

show-scrollbar boolean true 否滚动条显隐控制 (同时开启 enhanced 属性后生效) 2.12.0

paging-enabled boolean false 否分页滑动效果 (同时开启 enhanced 属性后生效) 2.12.0

fast-deceleration boolean false 否滑动减速速率控制 (同时开启 enhanced 属性后生效) 2.12.0