# movable
# 介绍
movable 插件为 BetterScroll 拓展可移动拖拽的能力。
# 安装
npm install @better-scroll/movable --save
// or
yarn add @better-scroll/movable
# 基本使用
首先引入 movable 插件,并通过全局方法 BScroll.use()
注册插件
import BScroll from '@better-scroll/core'
import Movable from '@better-scroll/movable'
BScroll.use(Movable)
上面步骤完成后,需要在 options
中传入正确的配置:
new BScroll('.bs-wrapper', {
bindToTarget: true,
scrollX: true,
scrollY: true,
freeScroll: true,
bounce: true
movable: true // for movable plugin
})
以下是移动插件专属以及 BetterScroll 的配置:
movable<插件专属>
开启 movable 功能,必须设置为
true
,若没有该项,则插件不会生效。bindToTarget
必须设置为
true
,主动将 touch 事件绑定在待移动的元素上,因为BetterScroll 默认将 touch 事件在绑定容器元素(wrapper)上。freeScroll
记录 x 和 y 轴的手指偏移量,设置为
true
。同时需要设置 scrollX 和 scrollY 均为 true。scrollX
开启 x 轴方向滚动能力,设置为
true
。scrollY
开启 y 轴方向滚动能力,设置为
true
。bounce
指定开启边界回弹。
示例
{ bounce: true // 开启四个方向, bounce: { left: true, // 开启左边界回弹 right: true, // 开启右边界回弹 top: false, bottom: false } }
# 示例
只有一个 content
通常场景下,只存在一个 content。
<template> <div class="movable-container"> <div class="scroll-wrapper" ref="scroll"> <div class="scroll-content"> <div class="scroll-item" v-for="(item, index) in emojis" :key="index">{{item}}</div> </div> </div> </div> </template>
多个 content
但是在某些场景下,可能存在多个 content。
# 进阶使用
搭配 zoom 插件,增加缩放能力。
import BScroll from '@better-scroll/core'
import Movable from '@better-scroll/movable'
import Zoom from '@better-scroll/zoom'
new BScroll('.bs-wrapper', {
bindToTarget: true,
scrollX: true,
scrollY: true,
freeScroll: true,
bounce: true
movable: true // for movable plugin
zoom: { // for zoom plugin
start: 1,
min: 1,
max: 3
}
})
# 示例
WARNING
zoom 暂不支持在 pc 端的交互操作,下方 demo 请扫码体验。
一个 content
多个 content
# 实例方法
# putAt(x, y, [time], [easing]) 2.0.4
参数
{PositionX} x
: x 坐标PositionX:'number | 'left' | 'right' | 'center'
{PositionY} y
: y 坐标PositionY:'number | 'top' | 'bottom' | 'center'
{number} [time]<可选>
:滚动的动画时长{EaseItem} [easing]<可选>
:缓动效果配置,参考 ease.ts (opens new window),默认是bounce
效果
将 content 元素放置在某一个位置。x 与 y 不仅可以是数字,也可以是对应的字符串。
示例
const bs = new BScroll('.bs-wrapper', {
bindToTarget: true,
scrollX: true,
scrollY: true,
freeScroll: true,
movable: true
})
bs.putAt('center', 'center', 0) // 放置在 wrapper 的正中心
bs.putAt('right', 'bottom', 1000) // 放置在 wrapper 的右下角,动画时长 1s
← infinity