hcysunyang / finger-mover Goto Github PK

无法访问此网站

找不到 fmover.hcysun.me 的服务器 DNS 地址。
尝试运行 Windows 网络诊断。
DNS_PROBE_FINISHED_NXDOMAIN

在 V2 上看到了帖子，特地跑来 GitHub 体验了一下，感觉这几点做的非常好：

1. 文档非常全，中英文都有，点赞！
2. 每个插件都有对应的例子，涵盖了常见的功能，还有在线体验二维码，很直观，很贴心！
3. 文档中的示例代码很简洁易懂，还有注释，再次点赞！
4. 用 QQ，微信内置的浏览器，以及 UC 都简单测试了下，没有发现问题，Good！

维护一个开源项目特别不容易，特地跑来点赞！（我可不是托啊😂）

slide内容过于复杂时不止一个div，此处会导致页面显示异常，建议调整为

slideEls = el.childNodes;

建议判断水平改变距离和垂直改变的距离的角度：
简单计算：
dx >= 2 * dy;

可在fmoveSlideX对象move方法中添加 判断如下
Math.abs(fg.distanceX) > Math.abs(fg.distanceY * 2)

感谢作者提供的插件，对我提供了很多的帮助！

@GreatAuk
最近一直在忙，今天抽出时间准备写一个无限滚动加载数据的小 demo，写之前觉得 #4 里的代码，还有
@HcySunYang 写的 demo 有点小小的问题。

因为finger-mover 文档里说了：

我们不需要手动调用 refreshSize 去重新计算

下面是我刚写的，你们看下：

<template>
<div class="#box">
  <ul id="scroll-box">
    <li v-for="data in dataList">{{data}}</li>
  </ul>
</div>
</template>

<script>
  import Fmover from 'finger-mover'
  import simulationScrollY from 'simulation-scroll-y'
  
  export default {
    data() {
      return {
        dataList: [],
        page_index: 1,
        // 如果在这里初始化 fm， Vue 会监听 fm 变化刷新 DOM
      }
    },

    created() {
      // 建议在这里初始化 fm
      this.fm = null
    },

    mounted() {
      this.initScroll()
      this.fetchData()
    },

    methods: {
      fetchData() {
        const data = {
          page_index: this.page_index,
        }

        // 自己封装的 ajax 方法
        AJAX.GET(data).then(res => {
          this.shopList = [...this.dataList, ...res]
          // 重新计算滚动尺寸
          this.$nextTick(() => this.fm[0].loadEnd())
        })
      },

      initScroll() {
        this.fm = new Fmover({
          el: '#scroll-box',
          plugins: [
            simulationScrollY({
              loadMore: {
                distance: 0,
                onLoadMore: this.onLoadMore,
              }
            })
          ]
        })
      },

      onLoadMore() {
        // 需要判断一下页码是否大于的总页码，这里我就省略了
        this.page_index += 1
        this.fetchData()
      },
    },
  }
</script>

<style lang="css" scoped>
  #box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
</style>

本地测试下没什么问题。
然后下一步准备封装个Loadmore vue 组件...

我查看了文档，demo里面将width设置成3000px，滚动的时候到3000了就停止滚动。

#scroll-box {
    background: #19bbff;
    width: 3000px;
  }

但是，如果我将width设置成300px，然后用js动态将width改为3000px，宽度可以设置成功，但是却无法滚动。请问有什么办法可以解决呢？
因为需要的运用场景是，要滚动的内容是动态生成的，我预先不知道要将width设置成多少，只有在获取到data之后，动态将width设置成需要的大小。

场景 => 在一个vue单组件goods里面调用，goods跟父组件是路由关系，有v-if判断，如果vuex里面的异步接收完以后，才会显示

// Import finger-mover
import Fmover from 'finger-mover'
// Import vertical scroll simulation plugin simulation-scroll-y
import simulationScrollY from 'simulation-scroll-y'

let fm_menu = new Fmover({
el: '#menu-box',
plugins: [
simulationScrollY()
]
})

能做吗? 为什么没做呢?

ps. ：）

水平滚动，bounce设置为false时，滚动到边缘会触发translateY，导致元素飞出去了:joy:。

simulation-scroll-x.js的wrapMove方法有点问题

inCallBack: function(currentPos) {
  currentX = currentPos.translateX
  if (!opa.bounce) {
    if (currentX >= leftLimit) {
      moved.stop((currentPos) => {
        currentX = leftLimit
        moved.transform(el, 'translateY', currentX)
      })
    }
    if (currentX <= rightLimit) {
      moved.stop((currentPos) => {
        currentX = rightLimit
        moved.transform(el, 'translateY', rightLimit)
      })
    }
  }
}

moved.transform(el, 'translateY', currentX)和moved.transform(el, 'translateY', rightLimit)中的translateY应该更改为translateX，这是水平滚动，不是垂直滚动:sweat_smile:。

如题，让用户更多参与交互还是很有意思。

还要就是 simulation-scroll-x ，一定要先设定宽度才可以正常生效吗？

this.fm = new Fmover({
el: '#scroll-container-main',
plugins: [
simulationScrollY({
onTransMove: async (currentY) => {
if (!this.loadPreLock && currentY <= 100 && currentY > 0) {
console.log('到顶了');
this.loadPreLock = true;

                        try {
                            // 加载数据，列表的内容会变化
                            await this.props.onLoadPrev();

                            setTimeout(() => {
                                this.fm[0].refresh();
                            }, 3000);
                        } catch (error) {
                            console.error('load prev error: ',  error);
                        } finally {
                            this.loadPreLock = false;
                        }
                    }
                },

                loadMore: {
                    distance: 100,
                    onLoadMore: async function () {
                        try {
                            await props.onLoadNext();
                        } catch (error) {
                            console.error('load next error: ',  error);
                        } finally {
                            this.loadEnd();
                        }
                    }
                }
            })
        ]
    });

就像这样，页面滚动到顶部的时候我请求一个接口加载数据，加载完成后我刷新了一下，但是在页面上的表现是滚动到顶部，不能再滚动了，但是其实顶部以上的dom已经存在页面里面了，只是无法滚动下来。
我是想做上拉加载更多，下拉也加载更多。麻烦看一下怎么解决，给我一个思路也行，非常感谢！

@HcySunYang
场景还原步骤：

1. 页面采用iPhone 6的模拟尺寸（375*667）
2. 水平滚动放了6个长方形，每个长方形尺寸为200*100，总宽度为1200
3. 滚动到最右边时，滚动容器的translateX为-825px（计算方式：375 - 1200）

一直到前3步都是正常的

4. 向左拉动到边缘时，滚动容器的translateX和currentX不一致。
举例说明：向左拉25px，这时translateX是-850px，但在makeMove方法中取到的currentX确是-875

// simulation-scroll-x.js
makeMove (tev) {
  let tweenS

  moveTime = tev.transTime
  currentX = currentX + tev.distanceX

  transTargetX = currentX + tev.transDistanceX

  // -50
  console.log(tev.distanceX)
  // -875
  console.log(currentX)
}

下面两幅截图也描述了此问题，请参考之。

往下滑动，停住和开始时总是触发点击事件。
只有在ios里才会有，android的机子不会出现。
添加了 event.cancelBubble = true 也没用。

injectEvent (event) {
        if (eventType === EVENT_TYPE.touchend || eventType === EVENT_TYPE.touchcancel) {
            // 阻止事件冒泡，避免在滚动时触发页面元素的click事件
            event.cancelBubble = true
        }
}

在掘金上看到过作者你打广告，你应该是个假的外国人，所以就不说我那蹩脚的英语了。

可以先下载这个视频看下是怎么回事Video

列表不能下拉，请不要怀疑这条列表高度不够，我敢保证那是相当的长的。还有就是能从视频中看到列表使用了 lazy 加载，但我删除后还是不能下拉，说明没影响。

vue 组件中的部分相关代码：

    export default{
        methods:{
            init(){
                var fm = new Fmover({
                    el: '.result-wrap',
                    plugins: [imulationScrollY()]
                }
            }
        },
        mounted(){
            //这里使用 ajax 获取数据来渲染列表，代码省略
            this.$nextTick(()=>{
                this.init();
            });
        }
   }

根据下拉后的回弹的弹性效果说明插件生效了，但是只要下拉一点点就会立马自动的回到列表顶部。
还有个坑就是列表中的链接点击后不能跳转了（真机测试，Android 6.01下的 Chrome出现这种情况,但是 IOS下的浏览器没问题）

Sorry! 前端新人，只能提出问题，解决问题完全不知从何下手

"finger-mover": "^1.1.5",
"simulation-scroll-x": "^1.1.5",

Chrome 59 中模拟调试没问题

但是手机的浏览器几乎全挂了：
Safari （iPad）
�微信内置浏览器
QQ内置浏览器
...

�

需求是这样的，假设网页处于「鞋子」这个分类，我点击「美妆」，顶部的导航滚动到「美妆的位置」
截图里的 .nav_scroll_item_7 是「美妆」这个 div �的类名
代码是这么写的

this.fm[0].scrollTo('.nav_scroll_item_7', 1000)

现象就是我滚着页面就触发了页面元素中的按钮点击，希望可以优化一下。

slideEls = toArray(el.querySelectorAll('div'));

在复杂dom结构中div可能存在于子节点中，建议修改为:
slideEls = toArray(el.children);

simulation-scroll
能增加滚动到指定元素吗?
还有滚动时检测到某元素边缘弹性滚动到元素(用来做数字选择等等)
同时支持手指超出滚动区域仍然生效?

https://codepen.io/pnoonlee/pen/awmvPR
情况是这样:
页面出现滚动条,也就是页面高度>window.innerHeight
先进行页面的滚动,滚动到只显示一行123时,这个时候再滚动123的区域,滚动就失效了 :(

<style>
...
.ba {
            position: fixed;
            height: 100px;
            background: #000;
            color:#fff;
            z-index: 1000;
            right:0;
            width: 50%;
            top:50%;
        }
</style>

<div id="box">
    <div class="ba">bababab</div>
    <div id="scroll-box">
        <div class="pull-down-dom">Pull down to refresh</div>
        <div class="content"></div>
    </div>
</div>

用官网上的例子，再在外层加一个固定的元素（黑块 ba）。
下拉直至手指到达黑块，在黑块内左右滑动多次，会触发simulation-scroll-y中的refresh方法，但是滚动区域不会回弹回去。断点后发现，是ismoving还是true。

以上是用demo重现，实战项目中更明显，手指滑到外层固定元素就会重现，不需要左右滑动。断点看了，原因应该是一样的，也是ismoving为true。

插件沒有提供銷毀的方法嗎，衹是怕會有問題

切换组件后,轮播组件提示Cannot read property 'map' of null,切回后轮播已经报错停止

复现场景：vue项目单页面应用，使用的是simulationScrollY，当快速上下滑动整个页面，然后滑动过程中突然松开手指，导致惯性滚动不结束，滚动条不消失，卡住了页面，并且阻碍了页面其他如DOM/BOM/Vue事件的执行。如果用手指再滑动一下页面，又可以消除此类异常。

在代码move方法中，代码如下：
Fmover.prototype._move = function _move (event) {
var this$1 = this;

var F = this.fingerd.injectEvent(event);
var returnVal;
var pluginStorLen = this.pluginsStorage.length;
for (var i = 0; i < pluginStorLen; i++) {
    returnVal = this$1.pluginsStorage[i].move && this$1.pluginsStorage[i].move(F);
}

if (typeof returnVal !== 'undefined' && !returnVal) {
    event.stopPropagation();
}
event.preventDefault();

};

建议修改为：
if (typeof returnVal !== 'undefined' && !returnVal) {
event.stopPropagation();
event.preventDefault();
}

"finger-mover": "^1.1.0",
"fmover-slide-x": "^1.1.0",

<div class="slide-wrap">
    <div>图1</div> 
    <div>图2</div>
    <div>图3</div>
 </div>

new Fmover({
      el: '.slide-wrap',
      plugins: [
        fmoverSlideX({
          loop: false,
          onChangeStart(index){
            console.log(index)
          }
        })
      ]
    })

理论上，从「图1」开始，用手指从左到右滑动，文字会依次切换成「图2，图3」，
控制台上会依次输出 2，3
但是滑到最后一张图的时候，继续向左滑动，文字保持「图3」不变，但是控制台会输出 1

直接报错，看不到错误信息

 var matrixArray = matrix.match(/[+-]?\d*[.]?\d+(?=,|\))/g);

显示matrix为undefined

使用simulation-scroll-y插件，禁用弹性（bounce = false）时，页面滚动有卡顿和不流畅的感觉，希望优化一下。

用 React 或者 Vue 构建单页面应用时，组件生命周期处于销毁阶段时，希望能清除轮播组件使用的定时器
translation:(Use React or Vue to build a single page application, component life cycle in the destruction phase, hoping to remove carousel components using timer)