mescroll-uni的组件的封装逻辑


pages/group/chat.vue 的页面滚动方法 调用结构如下:

1.被调用的mixins文件

/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js

2.主页面

/pages/group/chat.vue

2.1引用mixins

提供必要的组件数据

2.2使用mescroll-body组件,并创建自定义事件init 指向 mixins中的 mescroll init方法

让mescroll初始化在mescroll-body组件的mounted函数创建

2.3 mescroll-body使用mescroll-uni.js完成初始化并回调

这里是对封装的调用

/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.js

mescroll-uni将组件的基础方法封装

2.4 mescroll-body使用mescroll-uni.js 完成自定义滚动

对实例对象,自定义滚动方法

字符串的调用使用settimeout可能是因为this所指向的vm实例不一样或者uniapp的bug nexttick之后没有完全加载完数据

/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.js

3. /pages/group/chat.vue

经过如上步骤,主页面的mescroll初始化完成

12312


文章作者: iamfugui
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 iamfugui !
评论