常见情景经验分享

1.分页功能

对于一个列表页面，分页是必不可少的，pc端可以不用说，但是对于移动端，细节还是挺多的，对于分页功能必不可少两个参数，第一个nowPage，代表现在页数，第二个pageSize，代表一页多少条，所以在我们移动端做分页功能的时候：

1.首先data里面创建一个状态对象a，参数为nowPage：可以创建一个startPage为1代表初始页面，

pageSIze一般为10，第三个参数，大部分接口存在的id，代表获取什么列表，

2.创建一个getList方法，入参就为data里面的状态，当然，我们可以在方法里面重新写一个状态对象，（这里吧入参比作状态，因为你发送一个请求第一身份信息就不用说了，代表你一种需要什么的状态），例如：

const obj ={...this.a,rowguid,source:'mobile'}来作为入参，当请求发送完毕后获取当返回值，后面我们就可以判断当前页数如果大于1的话，我们就可以使用concat来将两个数组合并，为1的话就直接赋值过去，因为后台都会给我们返回一个total值代表总数，所以在发送请求前判断下当前list数量是否为total数如果相等，直接return

2.关于uniapp开发微信小程序跳转功能和左上角返回按钮冲突

我遇到的一个场景就是在一个列表页中有两个模块的组件，对应不同的列表，如图

当我们点击详情页进去的时候，点击里面的一个取消报名或者重新报名的功能按钮时，成功时返回列表页，一开始，咱使用的是uni.navigateBack(),发现返回上级页面并没有及时的触发视图刷新，触发视图更新的函数是在组件里面，所以，第一时间想到的是通过uni.navigateTo()的方法跳转到列表页，同时触发视图更新，当然效果的确是实现了的，但是，在小程序点击左上角返回按钮的时候，却是返回详情页，以正常的思路应该是直接返回主页面，所以，

1.第一个解题思路，在我们使用uni.navigateTo()进入详情页，再进入列表页的时候，页面栈已经加入了两个路由信息，而我们正常的返回则是根据这个页面栈来的（先进后出），所以，就在网上搜了下怎么获取页面栈，getCurrentPages()，就是这个方法，返回了一个当前页面所经历的路由信息，心想有戏，我只需要跳到这个页面，然后通过slice（0，-2）就可以清除后两条页面栈，（当然这是取决于你的详情页没有其他路由的入口），结果，这个函数是个纯函数，就只是返回了一个页面栈的信息，所以又在微信开发平台搜索，怎么修改页面栈，结果是不行的，（此路不通）

2.第二次尝试，所以既然小程序提供的头部导航不符合我们的需求，那我们就自定义一个导航栏，

所以我们使用了uniapp提供的一个组件，当我将大概处理成之前的样式的时候，发现这个右上角的胶囊颜色不对，这个样式是在pages.json文件里面控制的 navigationBarTextStyle这个属性控制

 有两个值，控制胶囊里面icon的颜色，但是当我设为white的时候却不是我想要的样式

本应该是这个样式

 再三的百度，发现还是改不了，算了，看看功能能不能实现，所以我又自定义了返回按钮的功能，返回主页面使用uni.switchTab，发现是ok的，除了这个样式，但是！！！！这个思路还是有很多缺陷，第一就是定死的返回的路径，可能这个列表页的入口不是固定的，所以还是的用到页面栈这个数组，通过find的方法，找出第一个该页面的页面栈，代表第一次进入该页面，然后获取前一个index的页面信息进行跳转，然后对页面栈信息进行判断，如果是index进入的使用switchTab跳转，其他的就使用navigateTo跳转。按理说逻辑应该是走的通的，但是还是可能存在副作用，所以最后还是没有使用这个方法。

3.最后一次，想了想，既然修改页面栈，这么麻烦，那还是使用navigateBack这个方法，在列表页使用onShow监听，第一次想的是通过自定义事件在上面两个组件里面使用uni.$on监听该自定义事件，但是组件使用的是vue的语法，所以不能使用uni的方法，所以最后使用了一个状态变量来控制数据的更新，当返回列表页的时候触发onShow钩子，在onShow的钩子中将状态不停切换，再传入子组件中，然后再子组件中使用watch去监听该状态，当状态改变触发一次请求获取数据

父组件中：

 子组件中：

没想到兜兜转转一个监听就能解决，但是咱们开发不就是走弯路走过来的嘛。