-
Notifications
You must be signed in to change notification settings - Fork 43
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
和 Vue 一起的坑 #4
Comments
我也遇到了同样的问题,被你抢先发了 issues ... DOM 已经更新完毕,再启动 imulationScrollY 页面没法往下滚,不过可以弹性滚动 |
@GreatAuk 不过我觉得 finger-mover 更强大,坐等作者回复,哈哈。 |
@zaxlct 掘金过来的?作者去better-scroll 作者的博客下打广告了。我也觉得 finger-mover 更强大,文档也很 nice |
@HcySunYang 对,文档很好。 |
移动网站的长列表,好多都是网页加载完之后,再通过 ajax 异步获取数据填充列表的。 然后「酒香也怕巷子深」,我建议项目可以写个简单的 Vue demo 或者 React demo,这样能吸引更多的人来使用和维护。 等这个 BUG 修复了,我们也可以发个 PR 补充个 demo 什么的,哈哈。 |
@GreatAuk
问题在于,数据更新之后,没有刷新可滚动元素的尺寸,导致滑动不上去。后面会着手封装成为Vue的组件。 demo请查看:https://github.com/HcySunYang/finger-mover/blob/dev/demo/vue/simulation-y-demo.html 另外欢迎 @zaxlct 提交关于Vue的demo,我这边已经着手开发左滑删除,拖动排序,图片查看器等插件了。finger-mover还有很大的提升空间,最后再次感谢大家。 |
@GreatAuk export default {
data() {
return {
fm: null,
}
},
mounted() {
// 模拟发送网络请求
setTimeout(() => {
// 数据赋值
// ...
this.$nextTick(()=>{
this.fm[0].refreshSize()
})
}, 1000)
this.initScroll()
},
methods: {
initScroll() {
this.fm = new Fmover({
el: '#scroll_box',
plugins: [
simulationScrollY({
distance: 0,
onLoadMore() {
console.log(123)
}
})
]
})
}
}
} |
@zaxlct 恩,我试了下也触发不了 |
@HcySunYang 试下打开 Demo,检查元素找到 #scroll-box元素后 Edit as HTML ,在里面添加一个链接 |
@GreatAuk @zaxlct simulationScrollY({
loadMore: {
distance: 0,
onLoadMore: function () {
console.log('fire')
this.loadEnd()
}
}
}) 然后在这个过程中,发现了loadMore触发很多次的问题并进行修复,发布了一个小版本1.1.4。可以查看 release,例子点击这里:https://github.com/HcySunYang/finger-mover/blob/dev/demo/vue/simulation-y-demo.html 另外 @zaxlct 你所说的手机中的问题应该是缓存。 |
@GreatAuk 安装最新的 1.1.5 应该就没有链接不可点击的问题了:https://github.com/HcySunYang/finger-mover/releases/tag/1.1.5 |
更新了 1.1.5 ,换了新的浏览器测试,那两个问题还是存在。
<div id="box">
<div id="scroll-box">
<div class="content">
<p v-for="xxx">{{xxx}}</p>
</div>
</div>
</div> export default {
data() {
return {
shopList: [], // 列表数据
fm: null,
}
},
mounted() {
this.initScroll()
this.fetchShopList()
},
methods: {
fetchShopList() {
// 异步获取列表数据
AJAX.GET().then(data => {
if (data) {
this.shopList = data
this.$nextTick(() => {
this.fm[0].refreshSize()
})
}
})
},
initScroll() {
this.fm = new Fmover({
el: '#scroll-box',
plugins: [
simulationScrollY({
loadMore: {
distance: 0,
onLoadMore: function () {
console.log('fire')
this.loadEnd()
}
}
})
]
})
}
},
} @GreatAuk 你的网页现在能往下滚动吗 |
我给 #box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
overflow: hidden;
} 然后能不能得出结论,纵向模拟滚动时,必须得给滚动容器的父节点加这些样式? |
做了个 LoadMore 的小 Demo
|
@GreatAuk 可以封装成一个组件 |
@GreatAuk data() {
fm: null, // 在这里设置 fm,fm 发生变化 Vue 会监听这个变化刷新 DOM
},
created() {
this.fm = null //建议在这里初始化 fm
} |
我要关掉这个issue喽 |
@HcySunYang 谢谢大大 |
在掘金上看到过作者你打广告,你应该是个假的外国人,所以就不说我那蹩脚的英语了。
可以先下载这个视频看下是怎么回事Video
列表不能下拉,请不要怀疑这条列表高度不够,我敢保证那是相当的长的。还有就是能从视频中看到列表使用了 lazy 加载,但我删除后还是不能下拉,说明没影响。
vue 组件中的部分相关代码:
根据下拉后的回弹的弹性效果说明插件生效了,但是只要下拉一点点就会立马自动的回到列表顶部。
还有个坑就是列表中的链接点击后不能跳转了(真机测试,Android 6.01下的 Chrome出现这种情况,但是 IOS下的浏览器没问题)
Sorry! 前端新人,只能提出问题,解决问题完全不知从何下手
The text was updated successfully, but these errors were encountered: