业务场景:用vue.js开发单页面应用,当滚动到页面a底部时,点击跳转到下一个页面b,再按返回,页面还是停留在页面a的底部,怎样做?
其实你把b做成a的子组件就可以了。
这样子a不会进入销毁状态。
具体形如:
<p name="list" v-bind:show="show=='list'">
<ul>
<li v-for="item in list">{{item.html}}</li>
</ul>
</p>
<p name="detail" v-bind:show="show=='detail'">
<b-component v-bind:data="current"></b-component>
</p>
刚巧做个这个,贴一下我已的一个方案。
整个应用是基于 VUE + WEBPACK
使用了VUE-ROUTER + VUEX
VUE-ROUTER 自身会有栅格钩子函数 data , activate ,deactivate
当A->B时,记录A中你的列表位置(列表数据是VUEX中的,“.forum-infinite-scroll” 用来定位你的列表)
deactivate ({to, next}) { this.pos = $(this.$el).find('.forum-infinite-scroll').offset() next() }
当B->A时,移动到原位置
deactivate ({to, next}) { this.pos = $(this.$el).find('.forum-infinite-scroll').offset() if (this.pos && this.pos.top < 0) { let scroller = $(this.$el).find('.infinite-scroll-bottom') setTimeout(()=>{ this.$nextTick(function () { $.refreshScroller() scroller.scrollTop(Math.abs(this.pos.top) + 250) }) }, 500) } next() }
这里有几个地方需要注意,
一是 this.$nextTick
二是 $.refreshScroller()
缺一不可
点击返回的时清除之前的scrollHeight
销毁前获取活动位置
下次进来滚动到相应位置
没用过vue,不过我觉得这种状况你应该不能用vue的返回方法,而是重新进入这个页面,这样页面会刷新,就重新回到顶部了。
scrollHeight 存下来, 进入的时候再去设置scrollHeight 。。
没用过vue。
可以在b页面跳转到a页面来重置,不要使用默认的返回。
试试vue-router中的saveScrollPosition
没用过vue,不过一般router都会提供一个location改变时的hook,我想是不是可以在这绑定一个函数,里面将scroll重置到最顶上
**以上答案全部作废;哈哈,狂不?** 返回的话,如果前面是个带图列表页,无论怎么返回,都会重载入该列表视图; 也就是说;图片没完全载入的情况下,即便你做了scrollHeight或者scrollTOP, 都无法滚动到指定位置,因为html本身都没有那么长; **在下angularjs写过一个瀑布流的MALL,就这返回并定位到位置的门槛高到直接挡脸的高度;** 好啦:我当初的解决方案,其实相当简单;A页 - B页这样的话,其实A页和B页是一个视图; 1,当初做的B页是直接接到A页瀑布流的底部; 2,禁用瀑布流;同时记录_ScrollTop到controller; 3,吧瀑布流height:0; -,返回就是把B页隐藏;(用作复用); 5,瀑布HEIGHT:AUTO; 6,你返回了; 差不多就这样,偷懒的方法;( ̄▽ ̄)"; **只要跳视图了,基本触发重载; 所以,就不能触发重载咯**;AB就是一个视图里面了;