最近在做关于uni-app的东西,就算只开发h5页面也是十分方便的。
因为对于路由有一定需求就利用了插件市场上比较火热的uni-simple-router这个组件。
Pages里面如果定义含有aliasPath,然后定义tabBar,执行跳转会有问题。除非不去额外定义aliasPath。于是就很纠结,然后我发现原来它官方文档有写到这个问题,但是不是在一个很明显的位置。它利用拦截路由进行跳转重定向。
const whitelist = { //声明了一个白名单
'/pages/tabbar/tabbar-1/tabbar-1': 'tabbar-1',
'/pages/tabbar/tabbar-2/tabbar-2': 'tabbar-2',
'/pages/tabbar/tabbar-3/tabbar-3': 'tabbar-3',
'/pages/tabbar/tabbar-4/tabbar-4': 'tabbar-4',
}
const router = new Router({
routes:[
...routes,
{
path: '*',
name: 'moddle',
redirect:to=>{
const name = whitelist[to.path];
if(name){
return
};
return
}
}
]
});
差不多它的例子就是这样的。这样确实可以做到正确的跳转。假设有3个页面,并且每次导航我都会去滚动页面。那么这样的重定向行为,会有这样2种情况(都是用的全局滚动,也就是onPageScroll所监听的东西,如果使用scrolll-view则没有问题,官方文档也说了
scroll-view 不适合放长列表,有性能问题。长列表滚动和下拉刷新,应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。包括在app-nvue页面,长列表应该使用list而不是scroll-view。
所以不推荐用scroll-view做长列表页面
)
1. 你先访问一个列表页面然后再到B页面再回到列表页面,那么这个列表页面里面的滚动条会回到起点。这样的表现确实是让人失望的。
2. 而如果从列表页导航到A页面然后再导航到列表页(这里的列表页滚动条会被记忆),再导航到B页面再返回到A页面(和情况1发生一样的行为),那么滚动条会在当初导航到A页面之前的滚动条。说明这个功能在重定向的处理还是有问题。
这个问题可以说是这个插件的问题,那么说说uni-app里面本来的问题。 如果在css page{}这里加入overflow:hidden之类的属性,会导致滚动条问题。当初我就在列表之后的详情页加入该属性,然后回退的时候,滚动事件发生了问题,onPageScroll方法不能执行,并且回退页面的时候列表页的滚动条会回到起点。
领取专属 10元无门槛券
私享最新 技术干货