### 本组件优势： 1、使用小程序/uniapp**原生page滑动**，流畅度高于scroll-view组件
2、采用组件方式直接使用，只需在**下拉刷新**、**上拉加载**、**加载完成时**触发组件方法即可
3、包含无数据时**空布局**展示
4、可自定义**下拉刷新**、**上拉加载**样式
5、采用组件的**双向绑定v-model**
6、完美解决**自定义导航**后看不到**下拉刷新loading**的问题
### 实际效果图

我们在page.json中开启了**自定义导航栏**属性和**下拉刷新**属性后 ```javascript // 开启下拉刷新 "enablePullDownRefresh": true // 自定义导航栏 "navigationStyle": "custom" ``` 此时，页面中的下拉刷新三个小圆点会被我们的导航栏遮盖住，导致用户下拉刷新看不到loading效果，如下图

这样用户体验就不好了，接下来我们看看怎么解决：
1、封装mscroll组件
2、封装组件内**下拉刷新**、**上拉加载**、**加载完成时**方法
3、利用``margin-top: -100upx;``在用户下拉刷新之前隐藏我们写的loading
### 封装mscroll组件 ```javascript ``` ### 使用方式 #### page.json配置 ```javascript "pages": [ { "path": "pages/homePage/index", "style": { "navigationBarTitleText": "页面标题", // 页面标题 "enablePullDownRefresh": true, // 开启下拉刷新(必需) "backgroundTextStyle": "light", // 下拉刷新loading小圆点颜色，白底+白色小圆点可以实现“隐藏”原生小圆点哦 "navigationStyle": "custom", // 自定义导航栏(不自定义导航栏也可以使用本组件哦，只不过就只能使用原生小圆点样式了，无法自定义下拉刷新样式) "backgroundColor": "#F5F7F9" // 页面背景底色 } } ] ``` #### 父组件使用 ```javascript ``` 至此，代码就写完啦，考虑不周或者有bug的地方，还望多多留言告知我哟😁！