当 isloading 为 true 的时候显示 "加载中..." 当 isloading 为 false 的时候,isDone 为 true 的时候才显示 "没有更多数据",这也是一个标准的无限滚动。
什么时候对 isloading 和 isDone 设置为 true
- scrollHandler() {
- if (this.isLoading || this.isDone) return;
- let baseHeight = this.scrollview == window ? document.body.offsetHeight: this.scrollview.offsetHeight let moreHeight = this.scrollview == window ? document.body.scrollHeight: this.scrollview.scrollHeight;
- let scrollTop = this.scrollview == window ? document.body.scrollTop: this.scrollview.scrollTop
- if (baseHeight + scrollTop + this.distance > moreHeight) {
- this.isLoading = true;
- this.onInfinite()
- }
- if (!this.scrollview) {
- console.warn('Can\'t find the scrollview!');
- return;
- }
- },
当滚动到底部的时候,对 isloading 进行为 true 的设置。外部组件可以调用 onInfinite,进行 ajax 请求等操作。
在外部如何调用呢?
- this.$refs.infinite.$emit('loadDone')
对组件进行 ref 的设置,然后进行触发 loadDone 或者 load。
比对饿么的组件,它使用的是指令的模式,内部实现还是太复杂。
这里就用到了函数防抖,同上面不用函数节流,用防抖。防抖跟节流的有什么区别?防抖比较更节省性能。如果我们在设置的时间内一直滑动,则不会进行加载,只有滑动到指定的地方,则可以进行检测, 通过定时器来实现。
- debounce(func, wait) {
- var timeout;
- return function() {
- var context = this;
- var args = arguments;
- clearTimeout(timeout) timeout = setTimeout(function() {
- func.apply(context, args)
- },
- wait);
- }
- },
enter image description here
actionSheet 这里亮点就是巧用了。call 方法来改变了 this 的指向。这个有什么好处?往下面看。
prpps : model 我通过 Model 这个数据进行递,把文案的改变,点击后所执行的方法一并封装到 Model 数据里来进行操作。
如果在父组件引入这个组件的时候,看下面代码。
- model: [
- { name: this.name, method(name, index) { location.href = 'tel:110' } }
- ],
如果进行 this. 指向的话,指向的是父组件。这里就不能直接在 data 里面声明了。如果是异步的话,只有在 ajax 请求的异步里进行声明,把值传入,是如何做的呢?
- ff (item,index,method) {
- this.$emit('update:show', false)
- method.call(this.$parent,item,index)
- }
在这里通过. call 来把 this. 的指向到父组件,就能成功的方便的调用了。
enter image description here
对 accordion 组件要进行定义两个组件合并成一个组件的模式。
一个最外层的包裹组件。
第二个是每一个 item 的组件。
每说 accordion-item 里面的组件,通过
- this.height = (this.show ? this.$refs.content.offsetHeight: 0) + 'px';
如果需要显示的话,让每一个 item 的元素来计算高度,展现出来。
通过_uid 来进行 每个 item 的识别。
- methods : {
- open(uid) {
- this.$children.forEach (item => {
- console.log(item._uid)
- if(item._uid == uid){
- item.show = !item.show
- }else{
- if(!this.repeat){
- item.show = false
- item.height = 0;
- }
- }
- })
- }
- }
能够收起的是那个 item 组件,则向收起的那个 item 组件进行一个传递。本质上通过 index 找到子组件对应的项也可以实现。因为_uid 是唯一的。这一步也是省了一些简便的操作。
在这里把一些突出的组件,来开阔我们的思想,来进行一其它组件的封装 ,也可以基于这些组件对自己所需要的项目根据不同的需求来封装。
最后,尤大说了一句话,我最喜欢的就是看别人代码。记住这句话,你的组件能写的又快又好。
来源: http://www.2cto.com/kf/201708/666422.html