vue怎么开发移动端页面,vue移动端实现下拉加载更多
这篇文章主要介绍了某视频剪辑软件移动端项目中如何实现页面缓存的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
背景
在移动端中，页面跳转之间的缓存是必备的一个需求。
例如：首页=列表页=详情页。
从首页进入列表页，列表页需要刷新，而从详情页返回列表页，列表页则需要保持页面缓存。
对于首页，一般我们都会让其一直保持缓存的状态。
对于详情页，不管从哪个入口进入，都会让其重新刷新。
实现思路
说到页面缓存，在某视频剪辑软件中那就不得不提点火电极组件了，保活提供了路由缓存功能，本文主要基于它和状态管理来实现应用里的页面跳转缓存。
状态管理里维护一个数组缓存页面，用以保存当前需要缓存的页面。
点火电极的包含设置为缓存页面。
路由自指的添加自定义字段需要缓存页面或保持活力，需要缓存页面为一个数组，表示该路由要进入的页面如果在数组内，则缓存该路由，保持活动则表示无论进入哪个页面都保持缓存，如应用首页这种。
在路由守卫每个之前里判断，如果要跳转的路由页面在当前路由的需要缓存页面里，则当前路由添加进缓存页面里，反之删除。
具体实现
状态管理实现内容
//src/store/模块/app.js
导出默认值{
状态：{
//页面缓存数组
缓存页面：[]
},
突变：{
//添加缓存页面
ADD_CACHE_PAGE(state，page) {
如果(!状态。缓存页面。包括(第页)){
state.cachePages.push(page)
}
},
//删除缓存页面
REMOVE_CACHE_PAGE(state，page) {
如果(状态。缓存页面。包括(第页)){
状态。缓存页面。拼接(状态。缓存页面。索引，共页，1)
}
}
}
}
//src/store/getters.js
const getters={
缓存页面：状态=状态。app。缓存页面
}
导出默认吸气剂
//src/store/索引。射流研究…
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
Vue.use(Vuex)
从导入用户。/模块/用户
从导入应用程序。/模块/应用程序
从导入吸气剂./getters
//导出商店对象
导出默认的新Vuex .商店({
吸气剂，
模块：{
用户，
应用
}
})
App.vue里，保活的包括设置缓存页面
keep-alive :include=cachePages
router-view:key= $ route。完整路径/路由器视图
/保持活力
计算值：{
.mapGetters([
缓存页面
])
}
路由配置
{
路径："/home "，
姓名：家，
component:()=import( @/views/tabbar/Home )，
元：{
标题： 首页，
保持活动状态：真
}
},
{
路径："/list "，
名称：列表，
组件：()=import(@/views/List )，
元：{
标题： 列表页，
needCachePages: [ListDetail]
}
},
{
路径："/列表-详细信息"，
姓名：列表详细信息，
组件：()=导入( @/views/Detail )，
元：{
标题： 详情页
}
}
路由守卫
从“vue”导入某视频剪辑软件
从“vue路由器"导入路由器
从" @/商店"导入商店
Vue.use(路由器)
//导入模块文件夹里的所有路由
const files=require.context( ./modules ，false，/\ .js$/)
让模块=[]
files.keys().forEach(key={
模块=模块。concat(文件(键)).默认)
})
//路由
常量路由=[
{
路径："/",
重定向："/home "，
},
.模块
]
常量路由器=新路由器({
模式："哈希",
路线：路线
})
函数是保活(路由){
如果(路线。元路由。meta。keepalive){
store.commit(ADD_CACHE_PAGE ，route.name)
}
if (route.children) {
route.children.forEach(child={
isKeepAlive(子级)
})
}
}
routes.forEach(item={
isKeepAlive(项目)
})
//全局路由守卫
router.beforeEach(收件人，发件人，下一个)={
如果(从。meta。needcachepages来自。meta。需要缓存页面。包括(至。名称)){
store.commit(ADD_CACHE_PAGE ，from.name)
} else if(从。meta。needcachepages){
store . commit( REMOVE _ CACHE _ PAGE ，from.name)
}
//页面缓存第一次失败，怀疑是vuex到keep-alive缓存延迟的原因。
//这里用100ms的延迟来解决。
setTimeout(()={
下一个()
}, 100)
})
导出默认路由器
还原页面滚动条位置
虽然此时页面被缓存，但是滚动条每次都会回到顶部。
对于缓存的页面，激活和停用的钩子都会被触发，可以用来恢复滚动条位置。
记录页面离开时的滚动条位置，即停用触发器时的位置。
当你返回页面时，也就是激活被触发时，恢复滚动条位置。
//创建mixin
//src/mixins/index.js
export const save position=(scroll id= app )={
返回{
data() {
返回{
myScrollTop: 0
}
},
已激活(){
const target=document . getelementbyid(scroll id)
target target . scroll top=this . my scroll top
},
beforeRouteLeave(收件人、发件人、下一个){
const target=document . getelementbyid(scroll id)
this . my scroll top=target . scroll top 0
下一个()
}
}
}
这里发现使用deactivated时，由于页面隐藏太快，获取的节点的滚动条高度会为0，所以使用beforeRouteLeave。
在需要缓存的页面中使用。
脚本
从“@/mixins”导入{ savePosition }
导出默认值{
mixins:[新保存位置()]
}
/脚本
如果页面已经自定义了滚动容器，此时可以传入滚动容器id。
模板
div id= scroll-container style= height:100 VH； overflow-y:scroll；
/div
/模板
脚本
从“@/mixins”导入{ savePosition }
导出默认值{
mixins:[新保存位置(滚动容器)]
}
/脚本
注意
经常有小伙伴来问我一个问题，为什么我配置了却没有缓存效果？
这个时候，你需要注意一个问题。保持活动的关键之一是路由中的名称应该与。vue文件。
如果您的缓存不起作用，请先检查这两个名称是否与needCachePages一致。
思考与不足
这个方案是我一年多前实施的。现在想来还是有不足的地方，比如每次都需要在路由中配置needCachePages。
其实在移动端，返回上一页总是缓存上一页的，就像开发小程序一样。当我们调用Navigator并返回时，页面总是被缓存，没有任何人工配置。
所以现在的想法是在vue中提供一个全局跳转api。只需调用这个api来缓存当前页面。如果你需要刷新，你可以在applet中执行你的逻辑。
这就是本文关于如何在vue mobile项目中实现页面缓存的示例代码。更多相关vue页面缓存内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。