2.5.scrollView和swiper组件的使用
阅读原文时间:2023年07月08日阅读:11

可滚动视图区域。用于区域滚动。

需注意在webview渲染的页面中,区域滚动的性能不及页面滚动。

属性说明

属性名

类型

默认值

说明

平台差异说明

scroll-x

Boolean

false

允许横向滚动

scroll-y

Boolean

false

允许纵向滚动

upper-threshold

Number/String

50

距顶部/左边多远时(单位px),触发 scrolltoupper 事件

lower-threshold

Number/String

50

距底部/右边多远时(单位px),触发 scrolltolower 事件

scroll-top

Number/String

设置竖向滚动条位置

scroll-left

Number/String

设置横向滚动条位置

scroll-into-view

String

值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素

scroll-with-animation

Boolean

false

在设置滚动条位置时使用动画过渡

enable-back-to-top

Boolean

false

iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向

app-nvue,微信小程序

show-scrollbar

Boolean

false

控制是否出现滚动条

App-nvue 2.1.5+

refresher-enabled

Boolean

false

开启自定义下拉刷新

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

refresher-threshold

Number

45

设置自定义下拉刷新阈值

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

refresher-default-style

String

"black"

设置自定义下拉刷新默认样式,支持设置 black,white,none,none 表示不使用默认样式

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

refresher-background

String

"#FFF"

设置自定义下拉刷新区域背景颜色

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

refresher-triggered

Boolean

false

设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

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

@scrolltoupper

EventHandle

滚动到顶部/左边,会触发 scrolltoupper 事件

@scrolltolower

EventHandle

滚动到底部/右边,会触发 scrolltolower 事件

@scroll

EventHandle

滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

@refresherpulling

EventHandle

自定义下拉刷新控件被下拉

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

@refresherrefresh

EventHandle

自定义下拉刷新被触发

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

@refresherrestore

EventHandle

自定义下拉刷新被复位

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

@refresherabort

EventHandle

自定义下拉刷新被中止

H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

使用竖向滚动时,需要给 <scroll-view> 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给<scroll-view>添加white-space: nowrap;样式。

示例 查看演示

以下示例代码,来自于hello uni-app项目,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。

<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-title uni-common-mt">
                Vertical Scroll
                <text>\n纵向滚动</text>
            </view>
            <view>
                <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
                    @scrolltolower="lower" @scroll="scroll">
                    <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
                    <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
                    <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
                </scroll-view>
            </view>
            <view @tap="goTop" class="uni-link uni-center uni-common-mt">
                点击这里返回顶部
            </view>
        &lt;view class=&quot;uni-title uni-common-mt&quot;&gt;
            Horizontal Scroll
            &lt;text&gt;\n横向滚动&lt;/text&gt;
        &lt;/view&gt;
        &lt;view&gt;
            &lt;scroll-view class=&quot;scroll-view_H&quot; scroll-x=&quot;true&quot; @scroll=&quot;scroll&quot; scroll-left=&quot;120&quot;&gt;
                &lt;view id=&quot;demo1&quot; class=&quot;scroll-view-item_H uni-bg-red&quot;&gt;A&lt;/view&gt;
                &lt;view id=&quot;demo2&quot; class=&quot;scroll-view-item_H uni-bg-green&quot;&gt;B&lt;/view&gt;
                &lt;view id=&quot;demo3&quot; class=&quot;scroll-view-item_H uni-bg-blue&quot;&gt;C&lt;/view&gt;
            &lt;/scroll-view&gt;
        &lt;/view&gt;
        &lt;view class=&quot;uni-common-pb&quot;&gt;&lt;/view&gt;
    &lt;/view&gt;
&lt;/view&gt;



<script>
    export default {
        data() {
            return {
                scrollTop: 0,
                old: {
                    scrollTop: 0
                }
            }
        },
        methods: {
            upper: function(e) {
                console.log(e)
            },
            lower: function(e) {
                console.log(e)
            },
            scroll: function(e) {
                console.log(e)
                this.old.scrollTop = e.detail.scrollTop
            },
            goTop: function(e) {
                // 解决view层不同步的问题
                this.scrollTop = this.old.scrollTop
                this.$nextTick(function() {
                    this.scrollTop = 0
                });
                uni.showToast({
                    icon: "none",
                    title: "纵向滚动 scrollTop 值已被修改为 0"
                })
            }
        }
    }
</script>


<style>
    .scroll-Y {
        height: 300rpx;
    }
    .scroll-view_H {
        white-space: nowrap;
        width: 100%;
    }
    .scroll-view-item {
        height: 300rpx;
        line-height: 300rpx;
        text-align: center;
        font-size: 36rpx;
    }
    .scroll-view-item_H {
        display: inline-block;
        width: 100%;
        height: 300rpx;
        line-height: 300rpx;
        text-align: center;
        font-size: 36rpx;
    }
</style>

#自定义下拉刷新

注意自定义下拉刷新的性能不及pages.json中配置的原生下拉刷新。

<template>
    <view>
        <scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
            :refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort"></scroll-view>
    </view>
</template>


<script>
    export default {
        data() {
            return {
                triggered: false
            }
        },
        onLoad() {
            this._freshing = false;
            setTimeout(() => {
                this.triggered = true;
            }, 1000)
        },
        methods: {
            onPulling(e) {
                console.log("onpulling", e);
            },
            onRefresh() {
                if (this._freshing) return;
                this._freshing = true;
                setTimeout(() => {
                    this.triggered = false;
                    this._freshing = false;
                }, 3000)
            },
            onRestore() {
                this.triggered = 'restore'; // 需要重置
                console.log("onRestore");
            },
            onAbort() {
                console.log("onAbort");
            }
        }
    }
</script>

Tips

  • APP-vue和小程序中,请勿在 scroll-view 中使用 map、video 等原生组件。小程序中 scroll-view 中也不要使用 canvas、textarea 原生组件。更新:微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用。app-nvue无此限制。
  • scroll-view 不适合放长列表,有性能问题。长列表滚动和下拉刷新,应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。包括在app-nvue页面,长列表应该使用list而不是scroll-view。
  • scroll-into-view 的优先级高于 scroll-top。
  • scroll-view是区域滚动,不会触发页面滚动,无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
  • 若要使用下拉刷新,建议使用页面的滚动,而不是 scroll-view 。插件市场有前端模拟的基于scroll-view的下拉刷新,但性能不佳。如必需使用前端下拉刷新,推荐使用基于wxs的下拉刷新,性能会比基于js监听方式更高。
  • 如果遇到scroll-top、scroll-left、refresher-triggered属性设置不生效的问题参考:组件属性设置不生效解决办法
  • scroll-view的滚动条设置,可通过css的-webkit-scrollbar自定义,包括隐藏滚动条。(app-nvue无此css)

滑块视图容器。

一般用于左右滑动或上下滑动,比如banner轮播图。

注意滑动切换和滚动的区别,滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域,不能停留在2个滑动区域之间。

属性说明

属性名

类型

默认值

说明

平台差异说明

indicator-dots

Boolean

false

是否显示面板指示点

indicator-color

Color

rgba(0, 0, 0, .3)

指示点颜色

indicator-active-color

Color

#000000

当前选中的指示点颜色

active-class

String

swiper-item 可见时的 class

支付宝小程序

changing-class

String

acceleration 设置为 true 时且处于滑动过程中,中间若干屏处于可见时的class

支付宝小程序

autoplay

Boolean

false

是否自动切换

current

Number

0

当前所在滑块的 index

current-item-id

String

当前所在滑块的 item-id ,不能与 current 被同时指定

支付宝小程序不支持

interval

Number

5000

自动切换时间间隔

duration

Number

500

滑动动画时长

app-nvue不支持

circular

Boolean

false

是否采用衔接滑动,即播放到末尾后重新回到开头

vertical

Boolean

false

滑动方向是否为纵向

previous-margin

String

0px

前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值

app-nvue、字节跳动小程序、飞书小程序不支持

next-margin

String

0px

后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值

app-nvue、字节跳动小程序、飞书小程序不支持

acceleration

Boolean

false

当开启时,会根据滑动速度,连续滑动多屏

支付宝小程序

disable-programmatic-animation

Boolean

false

是否禁用代码变动触发 swiper 切换时使用动画。

支付宝小程序

display-multiple-items

Number

1

同时显示的滑块数量

app-nvue、支付宝小程序不支持

skip-hidden-item-layout

Boolean

false

是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息

App、微信小程序、京东小程序

disable-touch

Boolean

false

是否禁止用户 touch 操作

App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序与飞书小程序(只在初始化时有效,不能动态变更)

touchable

Boolean

true

是否监听用户的触摸事件,只在初始化时有效,不能动态变更

字节跳动小程序与飞书小程序(uni-app 2.5.5+ 推荐统一使用 disable-touch)

easing-function

String

default

指定 swiper 切换缓动动画类型,有效值:default、linear、easeInCubic、easeOutCubic、easeInOutCubic

微信小程序、快手小程序、京东小程序

@change

EventHandle

current 改变时会触发 change 事件,event.detail = {current: current, source: source}

@transition

EventHandle

swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy},支付宝小程序暂不支持dx, dy

App、H5、微信小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序

@animationfinish

EventHandle

动画结束时会触发 animationfinish 事件,event.detail = {current: current, source: source}

字节跳动小程序与飞书小程序不支持

change 事件返回 detail 中包含一个 source 字段,表示导致变更的原因,可能值如下:

  • autoplay 自动播放导致swiper变化。
  • touch 用户划动引起swiper变化。
  • 其他原因将用空字符串表示。

swiper做左右拖动的长列表的专项问题

  • swiper是单页组件,适合做banner图轮播和简单列表左右滑动。
  • 因为性能问题,用swiper做复杂长列表,需要较高的优化技巧以及接受一些限制。
  • 这是一个范例,插件市场新闻模板示例,它在App端使用了nvue的原生渲染,实现高性能的左右拖动长列表;并支持可自定义的任何形式的下拉刷新。它在非App端使用的模式是只缓存左右一共3列的数据,dom中的数据过多时,它会自动释放。就是说App上,只要看过这一页,再进去时内容是还在的。而在非App上,只能做到缓存3页数据,其他页即便看过,再进去也会重新加载。并且非App的这种情况下,不再提供下拉刷新。虽然插件市场也有其他前端模拟的下拉刷新,但性能不佳。一般小程序的大厂案例里,提供左右拖长列表的,都是这种做法。

Tips

  • 如果 nvue 页面 @animationfinish 事件不能返回正确的数据,可同时监听 @change 事件。
  • 使用竖向滚动时,需要给 <scroll-view> 一个固定高度,通过 css 设置 height。
  • 注意:其中只可放置 <swiper-item> 组件,否则会导致未定义的行为。
  • 如果遇到current、current-item-id属性设置不生效的问题参考:组件属性设置不生效解决办法
  • banner图的切换效果和指示器的样式,有多种风格可自定义,可在uni-app插件市场搜索
  • 如需banner管理后台,参考uniCloud admin banner插件:https://ext.dcloud.net.cn/plugin?id=4117
  • swiper在App的vue中、百度支付宝头条QQ小程序中,不支持内嵌video、map等原生组件。在微信基础库2.4.4起和App nvue2.1.5起支持内嵌原生组件。竖向的swiper内嵌视频可实现抖音、映客等视频垂直拖动切换效果。
  • 同时监听 change transition,开始滑动时触发transition, 放开手后,在ios平台触发顺序为 transition… change,Android/微信小程序/支付宝为 transition… change transition…

#easing-function

说明

default

默认缓动函数

linear

线性动画

easeInCubic

缓入动画

easeOutCubic

缓出动画

easeInOutCubic

缓入缓出动画

#swiper-item

仅可放置在 <swiper> 组件中,宽高自动设置为100%。注意:宽高100%是相对于其父组件,不是相对于子组件,不能被子组件自动撑开。

属性名

类型

默认值

说明

item-id

String

该 swiper-item 的标识符

示例 查看演示

以下示例代码,来自于hello uni-app项目,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。

<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
    <view>
        <view class="uni-margin-wrap">
            <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
                :duration="duration">
                <swiper-item>
                    <view class="swiper-item uni-bg-red">A</view>
                </swiper-item>
                <swiper-item>
                    <view class="swiper-item uni-bg-green">B</view>
                </swiper-item>
                <swiper-item>
                    <view class="swiper-item uni-bg-blue">C</view>
                </swiper-item>
            </swiper>
        </view>
    &lt;view class=&quot;swiper-list&quot;&gt;
        &lt;view class=&quot;uni-list-cell uni-list-cell-pd&quot;&gt;
            &lt;view class=&quot;uni-list-cell-db&quot;&gt;指示点&lt;/view&gt;
            &lt;switch :checked=&quot;indicatorDots&quot; @change=&quot;changeIndicatorDots&quot; /&gt;
        &lt;/view&gt;
        &lt;view class=&quot;uni-list-cell uni-list-cell-pd&quot;&gt;
            &lt;view class=&quot;uni-list-cell-db&quot;&gt;自动播放&lt;/view&gt;
            &lt;switch :checked=&quot;autoplay&quot; @change=&quot;changeAutoplay&quot; /&gt;
        &lt;/view&gt;
    &lt;/view&gt;

    &lt;view class=&quot;uni-padding-wrap&quot;&gt;
        &lt;view class=&quot;uni-common-mt&quot;&gt;
            &lt;text&gt;幻灯片切换时长(ms)&lt;/text&gt;
            &lt;text class=&quot;info&quot;&gt;{{duration}}&lt;/text&gt;
        &lt;/view&gt;
        &lt;slider @change=&quot;durationChange&quot; :value=&quot;duration&quot; min=&quot;500&quot; max=&quot;2000&quot; /&gt;
        &lt;view class=&quot;uni-common-mt&quot;&gt;
            &lt;text&gt;自动播放间隔时长(ms)&lt;/text&gt;
            &lt;text class=&quot;info&quot;&gt;{{interval}}&lt;/text&gt;
        &lt;/view&gt;
        &lt;slider @change=&quot;intervalChange&quot; :value=&quot;interval&quot; min=&quot;2000&quot; max=&quot;10000&quot; /&gt;
    &lt;/view&gt;
&lt;/view&gt;



<script>
export default {
    data() {
        return {
            background: ['color1', 'color2', 'color3'],
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500
        }
    },
    methods: {
        changeIndicatorDots(e) {
            this.indicatorDots = !this.indicatorDots
        },
        changeAutoplay(e) {
            this.autoplay = !this.autoplay
        },
        intervalChange(e) {
            this.interval = e.target.value
        },
        durationChange(e) {
            this.duration = e.target.value
        }
    }
}
</script>


<style>
    .uni-margin-wrap {
        width: 690rpx;
        width: 100%;
    }
    .swiper {
        height: 300rpx;
    }
    .swiper-item {
        display: block;
        height: 300rpx;
        line-height: 300rpx;
        text-align: center;
    }
    .swiper-list {
        margin-top: 40rpx;
        margin-bottom: 0;
    }
    .uni-common-mt {
        margin-top: 60rpx;
        position: relative;
    }
    .info {
        position: absolute;
        right: 20rpx;
    }
    .uni-padding-wrap {
        width: 550rpx;
        padding: 0 100rpx;
    }
</style>

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章