template.md

weScroll

Touch scroll library for Muti Touch, Zooming, based on IScroll-zom 5

Features

• IScroll API

• Support Canvas

Usage

import WeScroll from 'we-scroll'

const defaultConfig = {
    zoom: true,
    zoomMin: 0.5,
    startZoom: 1,
    tap: true,
    zoomMax: 2,
    contentWidth: 2000, # width of scrolling area, Canvas needs it
    contentHeight: 1000, # height of scrolling area, Canvas needs it
    render: renderFunc # render function for updating Canvas
}
const scroller = new WeScroll(wrapper, defaultConfig)
scroller.zoom(2)

Some Configs

options.render

This is a callback function for weScroll. WeScroll calls render function when data ( offset , scale ) change. This function take three arguments: offsetX, offsetY, scale.

offsetX, offsetY represents scroller current offset, scale represents scroller current zoom ratio.

Style change like css transform or Canvas redraw logic should run in this function. Such as:

function(offsetX, offsetY, scale){
  var transformStyle = "translate3d(" + offsetX + "px," + offsetY +"px, 0px) scale("+ scale +")";
    target.style.transform = transformStyle;
}

options.contentWidth

Scroll content width，default value is wrapper's client width.

options.contentHeight

Scroll content height，default value is wrapper's client height.

Examples

See examples: npm run static

• simple

• canvas zoom

• css transform

API reference

{{>main}}

docs autogenerated via jsdoc2md