Better Scroll 缩放zoom 插件为 BetterScroll 提供缩放功能 zoom 插件为 Better

1、安装

yarn add @better-scroll/zoom

2、使用为了开启缩放功能，需要引入zoom插件，并用静态方法 BScroll.use()注册插件

import BScroll from '@better-scroll/core'
import Zoom from '@better-scroll/zoom'

BScroll.use(Zoom)

传入配置

const bsZoom = new BScroll(this.$refs.div, {
    freeScroll: true, // 放大之后，x 和 y 轴都可以滚动
    scrollX: true, // 放大之后，x 轴可以滚动
    scrollY: true, // 放大之后，y 轴可以滚动
    disableMouse: true, 
    useTransition: true,
    click: true, // BetterScroll 默认会阻止浏览器的原生 click 事件
    eventPassthrough: true,
    HWCompositing: false, // 是否开启硬件加速，建议iOS关闭，安卓开启
    zoom: {
      start: 1, // 初始缩放比例
      min: 1, // 最小缩放比例
      max: 5, // 最大缩放比例
      initialOrigin: ['center', 'center'] // 缩放原点
    }
  })

  bsZoom.on('zoomEnd', () => {
    bsZoom.refresh()
  })