oh-my-box

A Scroll Component for Vue.js

Links

• Homepage
• Bugs
• Npm

Install

npm install ohmybox -S

Start

import { OhMyBox, OhMyBoxItem } from 'ohmybox'
import 'ohmybox/lib/ohmybox.css'

<OhMyBox
  :scrollHeight='scrollHeight'
  :quickScrollHeight='quickScrollHeight'
  :scrollDuration='scrollDuration'
  :clickDuration='clickDuration'
  :clickDistance='clickDistance'
  @change='change'
  @click='click'
  ref='ohmybox'
>
  <OhMyBoxItem v-for='(item, idx) in 5' :key='idx'>{{item}}</OhMyBoxItem>
</OhMyBox>

Attributes

参数	说明	类型	默认值
scrollHeight	触发翻页高度	Number	300 (px)
scrollDuration	触发翻页滚动时间	Mumber	400 (ms)
quickScrollHeight	快速滑动时，触发翻页高度	Number	20 (px)
clickDuration	模拟点击方法touchstart到touchend持续时间	Number	10 (ms)
clickDistance	模拟点击方法touchstart到touchend移动距离	Number	30 (px)

Events

方法	说明	参数
change	翻页回调方法	(当前页下标，总下标，当前项对象)
click	点击方法	(当前页下标，总下标，当前项对象)
this.$refs.ohmybox.forceScrollHandle	强制滚动到对应下标item	(要滚动到的item下标)

publish

• to github:

npm login
...
#
# "name": "@codedance98/ohmybox",
# "publishConfig": {
# 		"registry": "https://npm.pkg.github.com"
# }
#
npm publish

• to npm:

 npm login
 ...
 #
 # "name": "ohmybox",
 # "publishConfig": {
 # 		"registry": "https://registry.npmjs.org"
 # }
 #
 npm publish