hcysunyang / finger-mover Goto Github PK
View Code? Open in Web Editor NEW🥊A motion effect library that integrates Fingerd and Moved
Home Page: https://fmover.hcysun.me
🥊A motion effect library that integrates Fingerd and Moved
Home Page: https://fmover.hcysun.me
建议判断水平改变距离和垂直改变的距离的角度:
简单计算:
dx >= 2 * dy;
可在fmoveSlideX对象move方法中添加 判断如下
Math.abs(fg.distanceX) > Math.abs(fg.distanceY * 2)
感谢作者提供的插件,对我提供了很多的帮助!
我查看了文档,demo里面将width设置成3000px,滚动的时候到3000了就停止滚动。
#scroll-box {
background: #19bbff;
width: 3000px;
}
但是,如果我将width设置成300px,然后用js动态将width改为3000px,宽度可以设置成功,但是却无法滚动。请问有什么办法可以解决呢?
因为需要的运用场景是,要滚动的内容是动态生成的,我预先不知道要将width设置成多少,只有在获取到data之后,动态将width设置成需要的大小。
插件沒有提供銷毀的方法嗎,衹是怕會有問題
"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
<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。
复现场景:vue项目单页面应用,使用的是simulationScrollY,当快速上下滑动整个页面,然后滑动过程中突然松开手指,导致惯性滚动不结束,滚动条不消失,卡住了页面,并且阻碍了页面其他如DOM/BOM/Vue事件的执行。如果用手指再滑动一下页面,又可以消除此类异常。
slideEls = toArray(el.querySelectorAll('div'));
在复杂dom结构中div可能存在于子节点中,建议修改为:
slideEls = toArray(el.children);
往下滑动,停住和开始时总是触发点击事件。
只有在ios里才会有,android的机子不会出现。
添加了 event.cancelBubble = true 也没用。
injectEvent (event) {
if (eventType === EVENT_TYPE.touchend || eventType === EVENT_TYPE.touchcancel) {
// 阻止事件冒泡,避免在滚动时触发页面元素的click事件
event.cancelBubble = true
}
}
slide内容过于复杂时不止一个div,此处会导致页面显示异常,建议调整为
slideEls = el.childNodes;
水平滚动,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:。
在 V2 上看到了帖子,特地跑来 GitHub 体验了一下,感觉这几点做的非常好:
维护一个开源项目特别不容易,特地跑来点赞!(我可不是托啊😂)
如题,让用户更多参与交互还是很有意思。
还要就是 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已经存在页面里面了,只是无法滚动下来。
我是想做上拉加载更多,下拉也加载更多。麻烦看一下怎么解决,给我一个思路也行,非常感谢!
现象就是我滚着页面就触发了页面元素中的按钮点击,希望可以优化一下。
@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 组件...
切换组件后,轮播组件提示Cannot read property 'map' of null,切回后轮播已经报错停止
@HcySunYang
场景还原步骤:
一直到前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)
}
使用simulation-scroll-y插件,禁用弹性(bounce = false)时,页面滚动有卡顿和不流畅的感觉,希望优化一下。
simulation-scroll
能增加滚动到指定元素吗?
还有滚动时检测到某元素边缘弹性滚动到元素(用来做数字选择等等)
同时支持手指超出滚动区域仍然生效?
直接报错,看不到错误信息
var matrixArray = matrix.match(/[+-]?\d*[.]?\d+(?=,|\))/g);
显示matrix为undefined
用 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)
无法访问此网站
找不到 fmover.hcysun.me 的服务器 DNS 地址。
尝试运行 Windows 网络诊断。
DNS_PROBE_FINISHED_NXDOMAIN
https://codepen.io/pnoonlee/pen/awmvPR
情况是这样:
页面出现滚动条,也就是页面高度>window.innerHeight
先进行页面的滚动,滚动到只显示一行123时,这个时候再滚动123的区域,滚动就失效了 :(
场景 => 在一个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()
]
})
能做吗? 为什么没做呢?
在代码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();
}
在掘金上看到过作者你打广告,你应该是个假的外国人,所以就不说我那蹩脚的英语了。
可以先下载这个视频看下是怎么回事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! 前端新人,只能提出问题,解决问题完全不知从何下手
ps. :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.