upp-touch v1.1.1

upp-touch

基于vue的移动端滑动方案。

什么是 upp-touch

uppTouch 处理移动端的滑动事件

• 可锁定方向，禁止横轴或者纵轴滑动
• 上下左右滑动有对应事件触发并且携带距离值
• 自动处理边界，到达边界后不会继续移动
• 如果移动时已经处于对应方向的边界，则会触发新的事件，以便和移动事件区分开
• 暴露直达上下左右边界的方法
• 简单快捷，轻松上手

安装

npm install upp-touch --save

在指定区域内滑动

• 通过设置自定义样式使用，注意不要忘记添加 overflow 属性

<template>
    <upp-touch :diyStyle="diyStyle">
        <div class="scrollWrapper"></div>  // 滚动的盒子
    </upp-touch>
</template>

<script>
    import uppTouch from 'upp-touch'

    export default {
        data() {
          return {
            diyStyle: {
              width: '100px',
              height: '100px',
              overflow: 'hidden'
            }
          }
        },

        components: {
            uppTouch
        }
    }
</script>

• 通过外层再加一个盒子使用

<template>
    <div id="touchWrapper">
        <upp-touch>
            <div class="scrollWrapper"></div>  // 滚动的盒子
        </upp-touch>
    </div>
</template>

<style scoped>
  #touchWrapper {
    width: 100px;
    height: 200px;
    overflow: hidden;
  }
</style>

注意一：建议组件包裹起来的盒子有且只有一个，多个DOM将无法检测到

• 正确的写法（非必看文档）：

<template>
    <div id="out">
        <upp-touch>
            <div class="scrollWrapper">……</div>
        </upp-touch>
    </div>
</template>

• 错误的写法（非必看文档）：

<template>
    <div id="out">
        <upp-touch>
            <div class="scrollWrapper">……</div>
            <div class="any">……</div>
            ……
        </upp-touch>
    </div>
</template>

注意二：要滚动的盒子必须满足以下任意一个要求(比如上方类名为 scrollWrapper 的盒子)： 1、设置了宽高 2、设置为行内或者行内块级元素让其宽度由内容撑开

配置

说一下 commonSlideTransition，默认的过渡效果只触发在对外封装的方法中生效，如果要在正常的滑动中也添加过渡效果，修改这个属性即可。

封装的方法

过渡效果默认只在调用这几个方法的时候生效，如果要在正常的滑动中也生效，修改配置属性 commonSlideTransition

特性： 1、在滚动的盒子小于滚动区域的时候，自动锁定对应方向无法滑动，但是这几个方法仍然可以生效； 2、在用户主动锁定横轴或者纵轴方向时，这几个方法仍然可以生效。

观察者模式

可以利用这几个事件进行一些扩展的行为，比如上拉加载、下拉刷新等，可以查看Demo便于理解这几个事件的表现。