z-paging使用心得，z-paging使用经验，vue渲染，nvue渲染，子窗体，分块渲染，uniapp手机端体验优化
1.核心组件
2.周边组件
3.使用细节
马上终于写一下心得了。我一定会写的。
优化点
1.show-scrollbar 隐藏滚动条 https://z-paging.zxlee.cn/api/props/scroll-view.html
2.使用数据缓存 https://z-paging.zxlee.cn/api/props/cache.html
官方使用视频
https://z-paging.zxlee.cn/start/teaching.html#%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B
选项卡视频里的一些改进之处。（为了懒加载。先设置，auto=“false”，需要判断，tab索引和swiper索引是否一样，并且，是否有loaded过。）
1.关于索引的命名
tabIndex
swiperIndex（视频叫currentIndex，名字起的不明确）
2.关于组件是否初始化
使用hasLoaded来定义把（视频里叫firstLoaded，名字也不明确）
优化懒加载的逻辑---()
<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<!-- 在这个文件对每个tab对应的列表进行渲染 -->
props: {
// 当前组件的index，也就是当前组件是swiper中的第几个
tabIndex: {
type: Number,
default: function() {
return 0
}
},
// 当前swiper切换到第几个index
swiperIndex: {
type: Number,
default: function() {
return 0
}
}
},
watch: {
swiperIndex: {
handler(newVal) {
if (newVal === this.tabIndex) {
// 懒加载，当滑动到当前的item时，才去加载
if (!this.hasLoaded) {
this.$nextTick(() => {
this.$refs.paging.reload();
})
}
}
},
immediate: true
},
},
在queryList请求成功的时候，设置this.hasLoaded=true
zpgaging的目的，是优化用户体验。但是，也会有以下问题
一.nvue的时候
1.全屏的zpaging，会有短暂的白屏。
2.nvue的初次渲染，耗时太多。官方说，建议nvue页面，永远使用原生导航。这太扯淡了。我们想在nvue页面，实现复杂的自定义导航，结果闪屏了，怎么办？？？！！！！
二.vue的时候
1.vue页面的好处是，自定义导航渲染的，是真的快。
2.即便是使用了，虚拟列表，默认也会一直显示120条列表，这样还是会卡。而且，来回的列表高度计算，以及滚动监听，也会增加内存的开销，导致卡顿。
3.下拉刷新的时候，会出现页面回弹的抖动。这是zpaging官方自己说的。这种体验，显然不好。
为了解决zpaging的问题，为了极致的优化。最好的使用姿势是。
1.我们假设，超过50条的，就是长列表。长列表，永远使用zpaging。
2.基于vue中，会出现页面回弹的抖动。我们永远只在，nvue中，使用zpaging。
3.在需要自定义导航的页面，渲染姿势：vue+自定义导航+子窗体(子窗体中使用nvue+zpaging)
4.在不需要定义导航的页面，渲染姿势：原生导航+nvue+zpaging
5.另外，还有一种，渲染姿势：分块渲染。导航栏是块，内容区是一块。页面先加载导航栏，onready的时候，把内容区v-if出来。
关于子窗体
一.子窗体主要是高度计算问题
二.手机界面的高度组成
1.整个屏幕的高度=可用区域+底部虚拟导航（有些手机，可用设置虚拟导航）
2.可用区域=状态栏高度（差不多在24px左右）+导航高度（uniapp原生导航的高度，定死了是44px，自定义导航，可用自由定义了）+内容区域（这就是子窗体的高度了）+tabbar（uniapp默认的tabbar高度是50px）
3.子窗子的高度，要动态的赋值，不要在page.json里配置。如果page.json里配置了值，某些情况下，动态赋值的高度，会失效。
4.子窗体使用的时候，实例化，一定要放在生命周期的函数内部！！！！！！！！！！！！！！下面是错误！！！！
const mineGuanzhu = uni.getSubNVueById('mineGuanzhu') // 在vue实例外部，去实例化，很容易就走到了page.json里的配置，导致二次进入页面的时候，无法控制子窗体的位置等等样式！！！！
export default {
data() {
return {
}
},
正确的应该
onReady() {
const mineGuanzhu = uni.getSubNVueById('mineGuanzhu')
mineGuanzhu.setStyle({
position: 'absolute',
top: 80,
height: 600,
})
mineGuanzhu.show()
},
5.某些全局样式，可能需要单独引入。
6.子窗体传参和传递事件。
第一，可以使用uni.setStorageSync,uni.getStorageSync来实现初始化时的传参。
第二，使用uni.$meit,uni.$on。在监听和响应事件
基于以上的种种思考
最佳的渲染处理和用户体验要求下，永远都不要使用全屏的zpaging。
