vue scroller返回页面记住滚动位置的实例代码
1,设置keepAlive:是否缓存
router: { path: '/actlist', name: 'actlist', component: actlist, meta: { keepAlive: true } }
2,设置渲染页面
app.vue
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
3,记录滚动位置并赋值
beforeRouteEnter(to,from,next){ if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置 sessionStorage.askPositon = ''; next(); }else{ next(vm => { if(vm && vm.$refs.my_scroller){//通过vm实例访问this setTimeout(function () { vm.$refs.my_scroller.scrollTo(0, sessionStorage.askPositon, true); },0)//同步转异步操作 } }) } }, beforeRouteLeave(to,from,next){//记录离开时的位置 sessionStorage.askPositon = this.$refs.my_scroller && this.$refs.my_scroller.getPosition() && this.$refs.my_scroller.getPosition().top; next() }
总结
以上所述是小编给大家介绍的vue scroller返回页面记住滚动位置的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
您可能感兴趣的文章:
- vue-scroller记录滚动位置的示例代码
相关推荐
-
vue-scroller记录滚动位置的示例代码
问题描述: 列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置 解决问题思路: 切换到其他页面前记录位置,返回列表页的时候返回位置.这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现. 还有一种更简单粗暴的方法, vue-scroller.min.js源码中添加宽高不为零判断,实现方式见评论,是最近代码优化的时候发现的. 代码部分: beforeRouteEnter(to,from,next){ if(
-
vue scroller返回页面记住滚动位置的实例代码
1,设置keepAlive:是否缓存 router: { path: '/actlist', name: 'actlist', component: actlist, meta: { keepAlive: true } } 2,设置渲染页面 app.vue <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <rout
-
Vue实现按钮旋转和移动位置的实例代码
1.静态效果图 Chrom移动端浏览模式下可拖动按钮处于任意位置,并且点击可旋转按钮 2.代码 <template> <div id="app"> <div class="icon-add-50" :style="iconstyle" @click='click' @touchmove='touchmove' @touchstart='touchstart(this,$event)' @touchend='touch
-
Vue Spa切换页面时更改标题的实例代码
在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet.title="xxx"; 随便创建一个项目,在独立的模块中,created在钩子函数启动之后document.title='标题'; 但是据说在IOS的微信下是无效的,虽然用苹果机测试过有用,但是想到这样会影响我的代码洁癖. <script> export default {
-
vue中进入详情页记住滚动位置的方法(keep-alive)
> 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置,这里我就想到了keep-alive 1.首先在路由中引入需要的模块 { path: '/scrollDemo', name: 'scrollDemo', meta: { keepAlive: true // 需要缓存 }, component: resolve => { require(['../view/scrollDemo.vue'], resolve) } } 2.在App.vue中设置缓存组件 <
-
vue实现公告栏文字上下滚动效果的示例代码
本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,分享给大家,具体入如下: 代码实现: 在项目结构的components中新建text-scroll.vue文件 <template> <div class="text-container"> <transition class="" name="slide" mode="out-in"> <p class="text
-
vue实现禁止浏览器记住密码功能的示例代码
查找资料 网上查到的一些方法: 使用 autocomplete="off"(现代浏览器许多都不支持) 使用 autocomplete="new-password" 在真正的账号密码框之前增加相同 name 的 input 框 使用 readonly 属性,在聚焦时移除该属性 初始化 input 框的 type 属性为 text,聚焦时修改为 password 使用 type="text",手动替换文本框内容为星号 "*" 或者
-
vue实现表格增删改查效果的实例代码
整理文档,搜刮出一个vue实现表格增删改查效果的实例代码,稍微整理精简一下做下分享. 实现效果 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', p
-
关于在vue 中使用百度ueEditor编辑器的方法实例代码
1. 安装 npm i vue-ueditor --save-dev 2.从nodemodels 取出ueditor1_4_3_3 这整个目录,放入vue 的 static 目录 3.配置 ueditor.config.js 的 21行代码 更改路径 var URL = '/static/ueditor1_4_3_3/' || getUEBasePath(); (1) serverUrl: URL + 'php/controller.php', 这里是你配置的上传内容的
-
Vue组件之高德地图地址选择功能的实例代码
注:本文基于上一篇文章[Vue-Cli 3.0 中配置高德地图 ] ,采用直接引入高德 SDK 的方式来使用高德地图api 一.效果图 二.组件要实现的功能 1. 如果有传入坐标点,则定位到坐标点 2. 如果没有传入坐标点,则定位到当前所在位置 3. 定位成功要在右侧显示经纬度和地址 4. 可以通过拖动 标记 来调整定位点 5. 标记 拖动后,右侧要显示拖动后的经纬度和地址 6. 点击确定按钮,返回最后的坐标点和地名给父组件 三. 组件实现具体代码 <template> <div cla
-
vue悬浮可拖拽悬浮按钮的实例代码
前言 vue开发手机端悬浮按钮实现,可以拖拽,滚动的时候收到里边,不影响视线 github地址 使用,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架 vue-h5-template 后续将发布各种商城组件组件,让商城简单高效开发 线上体验 使用 将 src/components文件夹下的s-icons组件放到你的组件目录下 使用组件 // template <template> <div> <
随机推荐
- IOS10 远程推送适配详细介绍
- 关注程序员健康:程序最需要注意的几件事
- Spring集成MyBatis完整实例(分享)
- ExtJs的Date格式字符代码
- Raid教程 全程图解手把手教你做RAID
- Java版C语言版简单使用静态语言实现动态数组的方法
- xmlHTTP返回值重编码的优化
- 关于.NET Framework中的设计模式--应用策略模式为List排序
- 学习php设计模式 php实现命令模式(command)
- Python 解析XML文件
- 深入理解python多进程编程
- asp下Response.Buffer提速
- Android开发学习笔记之通过API接口将LaTex数学函数表达式转化为图片形式
- 学习使用grunt来打包JavaScript和CSS程序的教程
- jQuery实现根据滚动条位置加载相应内容功能
- 使用node.js中的Buffer类处理二进制数据的方法
- 黑客帝国数字雨效果VC6源代码分享
- c# 递归访问文件夹(删掉歌词文件)
- Android利用浮动窗口提示用户操作
- Android使alertDialog.builder不会点击外面和按返回键消失的方法