|  | @@ -8,12 +8,12 @@
 | 
	
		
			
				|  |  |        </div>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |        <!-- 内容区域 -->
 | 
	
		
			
				|  |  | -      <div class="content">
 | 
	
		
			
				|  |  | +      <div class="list-content">
 | 
	
		
			
				|  |  |          <slot></slot>
 | 
	
		
			
				|  |  |        </div>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |        <!-- 上拉加载更多区域 -->
 | 
	
		
			
				|  |  | -      <div v-if="pullupUp" class="load-more-wrapper" v-show="showLoadMoreText">
 | 
	
		
			
				|  |  | +      <div v-if="showLoadMoreText" class="load-more-wrapper">
 | 
	
		
			
				|  |  |          <div class="load-more-indicator">
 | 
	
		
			
				|  |  |            {{ loadMoreText }}
 | 
	
		
			
				|  |  |          </div>
 | 
	
	
		
			
				|  | @@ -24,17 +24,28 @@
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  <script>
 | 
	
		
			
				|  |  |  import BScroll from 'better-scroll';
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  |  export default {
 | 
	
		
			
				|  |  |    props: {
 | 
	
		
			
				|  |  | +    //开启下拉刷新
 | 
	
		
			
				|  |  |      pullupDown: {
 | 
	
		
			
				|  |  |        type: Boolean,
 | 
	
		
			
				|  |  |        default: true,
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | +    //开启上拉加载更多
 | 
	
		
			
				|  |  |      pullup: {
 | 
	
		
			
				|  |  |        type: Boolean,
 | 
	
		
			
				|  |  |        default: true,
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | +    //下拉刷新回调函数
 | 
	
		
			
				|  |  | +    pullupDownFn: {
 | 
	
		
			
				|  |  | +      type: Function,
 | 
	
		
			
				|  |  | +      default: () => {},
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    //上拉加载更多回调函数
 | 
	
		
			
				|  |  | +    pullupFn: {
 | 
	
		
			
				|  |  | +      type: Function,
 | 
	
		
			
				|  |  | +      default: () => {},
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    data() {
 | 
	
		
			
				|  |  |      return {
 | 
	
	
		
			
				|  | @@ -44,7 +55,7 @@ export default {
 | 
	
		
			
				|  |  |        showLoadMoreText: false, // 是否显示加载更多
 | 
	
		
			
				|  |  |        refreshText: '下拉刷新', // 刷新文本
 | 
	
		
			
				|  |  |        loadMoreText: '加载更多', // 加载更多文本
 | 
	
		
			
				|  |  | -      pullupUp: true,
 | 
	
		
			
				|  |  | +      pullupUp: true, // 是否可以上拉加载更多
 | 
	
		
			
				|  |  |      };
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    mounted() {
 | 
	
	
		
			
				|  | @@ -52,12 +63,28 @@ export default {
 | 
	
		
			
				|  |  |      this.initScroll();
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    watch: {
 | 
	
		
			
				|  |  | -    pullup(val) {
 | 
	
		
			
				|  |  | -      console.log('状态改变',val)
 | 
	
		
			
				|  |  | -      this.pullupUp = val
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | +    pullup: {
 | 
	
		
			
				|  |  | +      handler(val) {
 | 
	
		
			
				|  |  | +        console.log('状态改变',val)
 | 
	
		
			
				|  |  | +        this.pullupUp = val
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      immediate: true
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    methods: {
 | 
	
		
			
				|  |  | +    /** 刷新滚动容器高度,使用时最好在nextTick函数中调用*/
 | 
	
		
			
				|  |  | +    refresh() {
 | 
	
		
			
				|  |  | +      // this.$nextTick(()=>{
 | 
	
		
			
				|  |  | +      //   console.log('刷新滚动容器')
 | 
	
		
			
				|  |  | +      //   this.bs.finishPullUp(); //  加载更多完成
 | 
	
		
			
				|  |  | +      //   this.bs.refresh(); // 重新计算高度
 | 
	
		
			
				|  |  | +      // })
 | 
	
		
			
				|  |  | +      setTimeout(() => {
 | 
	
		
			
				|  |  | +        console.log('刷新滚动容器')
 | 
	
		
			
				|  |  | +        this.bs.finishPullUp(); //  加载更多完成
 | 
	
		
			
				|  |  | +        this.bs.refresh();
 | 
	
		
			
				|  |  | +      },500)
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  |      // 初始化 better-scroll
 | 
	
		
			
				|  |  |      initScroll() {
 | 
	
		
			
				|  |  |        this.bs = new BScroll(this.$refs.scrollWrapper, {
 | 
	
	
		
			
				|  | @@ -71,50 +98,63 @@ export default {
 | 
	
		
			
				|  |  |          },
 | 
	
		
			
				|  |  |        });
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        // 监听下拉刷新事件
 | 
	
		
			
				|  |  | -        this.bs.on('pullingDown', (pos) => {
 | 
	
		
			
				|  |  | -          if(this.pullupDown) {
 | 
	
		
			
				|  |  | -            this.isRefreshing = true;
 | 
	
		
			
				|  |  | -            //this.refreshText = '正在刷新';
 | 
	
		
			
				|  |  | -            this.$emit('refresh');
 | 
	
		
			
				|  |  | -            // 这里可以执行刷新操作,例如发送请求获取数据
 | 
	
		
			
				|  |  | -            // 刷新完成后,调用 this.refreshFinish() 结束刷新
 | 
	
		
			
				|  |  | -            setTimeout(() => {
 | 
	
		
			
				|  |  | -              this.refreshFinish();
 | 
	
		
			
				|  |  | -            }, 300);
 | 
	
		
			
				|  |  | -          }else {
 | 
	
		
			
				|  |  | -            setTimeout(() => {
 | 
	
		
			
				|  |  | -              this.refreshFinish();
 | 
	
		
			
				|  |  | -            }, 300);
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | -        console.log(this.pullupUp,'pullingUp1')
 | 
	
		
			
				|  |  | -        // 监听上拉加载事件
 | 
	
		
			
				|  |  | -        this.bs.on('pullingUp', () => {
 | 
	
		
			
				|  |  | -          console.log(this.pullupUp,'pullingUp2')
 | 
	
		
			
				|  |  | -          if(this.pullupUp) {
 | 
	
		
			
				|  |  | -            this.showLoadMoreText = true;
 | 
	
		
			
				|  |  | -            this.loadMoreText = '正在加载...';
 | 
	
		
			
				|  |  | -            this.$emit('loadMore');
 | 
	
		
			
				|  |  | -            // 这里可以执行加载更多操作,例如发送请求获取数据
 | 
	
		
			
				|  |  | -            // 加载完成后,调用 this.loadMoreFinish() 结束加载更多
 | 
	
		
			
				|  |  | -            setTimeout(() => {
 | 
	
		
			
				|  |  | -              this.loadMoreFinish();
 | 
	
		
			
				|  |  | -            }, 500);
 | 
	
		
			
				|  |  | -          }else {
 | 
	
		
			
				|  |  | -            setTimeout(() => {
 | 
	
		
			
				|  |  | -              this.loadMoreFinish();
 | 
	
		
			
				|  |  | -            }, 500);
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | +      // 监听下拉刷新事件
 | 
	
		
			
				|  |  | +      this.bs.on('pullingDown', this.pullingDownHandler);
 | 
	
		
			
				|  |  | +      // 监听上拉加载事件
 | 
	
		
			
				|  |  | +      this.bs.on('pullingUp', this.pullingUpHandier);
 | 
	
		
			
				|  |  |        // better-scroll 初始化完成后,刷新 scroll
 | 
	
		
			
				|  |  | -      this.bs.refresh();
 | 
	
		
			
				|  |  | +      this.$nextTick(()=>{
 | 
	
		
			
				|  |  | +        this.bs.refresh();
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 下拉刷新
 | 
	
		
			
				|  |  | +    async pullingDownHandler(){
 | 
	
		
			
				|  |  | +      console.log('下拉刷新')
 | 
	
		
			
				|  |  | +      if(this.pullupDown) {
 | 
	
		
			
				|  |  | +        this.isRefreshing = true;
 | 
	
		
			
				|  |  | +        //this.refreshText = '正在刷新';
 | 
	
		
			
				|  |  | +        this.$emit('refresh');
 | 
	
		
			
				|  |  | +        // 这里可以执行刷新操作,例如发送请求获取数据
 | 
	
		
			
				|  |  | +        await this.downFn();
 | 
	
		
			
				|  |  | +        // 刷新完成后,调用 this.refreshFinish() 结束刷新
 | 
	
		
			
				|  |  | +        setTimeout(() => {
 | 
	
		
			
				|  |  | +          this.refreshFinish();
 | 
	
		
			
				|  |  | +        }, 500);
 | 
	
		
			
				|  |  | +      }else {
 | 
	
		
			
				|  |  | +        setTimeout(() => {
 | 
	
		
			
				|  |  | +          this.refreshFinish();
 | 
	
		
			
				|  |  | +        }, 300);
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 上拉加载
 | 
	
		
			
				|  |  | +    async pullingUpHandier(){
 | 
	
		
			
				|  |  | +      console.log(this.pullupUp,'pullingUp2')
 | 
	
		
			
				|  |  | +      if(this.pullupUp) {
 | 
	
		
			
				|  |  | +        this.showLoadMoreText = true;
 | 
	
		
			
				|  |  | +        this.loadMoreText = '正在加载...';
 | 
	
		
			
				|  |  | +        this.$emit('loadMore');
 | 
	
		
			
				|  |  | +        await this.upFn();
 | 
	
		
			
				|  |  | +        this.loadMoreText = '加载更多';
 | 
	
		
			
				|  |  | +        this.showLoadMoreText = false;
 | 
	
		
			
				|  |  | +        // 加载完成后,调用 this.loadMoreFinish() 结束加载更多
 | 
	
		
			
				|  |  | +      }else {
 | 
	
		
			
				|  |  | +        setTimeout(() => {
 | 
	
		
			
				|  |  | +          this.loadMoreFinish();
 | 
	
		
			
				|  |  | +        }, 300);
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    async downFn(){
 | 
	
		
			
				|  |  | +      await this.pullupDownFn();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +     async upFn(){
 | 
	
		
			
				|  |  | +      await this.pullupFn();
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      // 结束下拉刷新
 | 
	
		
			
				|  |  |      refreshFinish() {
 | 
	
		
			
				|  |  | -      this.isRefreshing = false;
 | 
	
		
			
				|  |  | +      console.log('更新容器高度');
 | 
	
		
			
				|  |  |        this.refreshText = '下拉刷新';
 | 
	
		
			
				|  |  |        this.bs.finishPullDown(); //  刷新完成
 | 
	
		
			
				|  |  |        this.bs.refresh(); // 重新计算高度
 | 
	
	
		
			
				|  | @@ -122,11 +162,14 @@ export default {
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      // 结束上拉加载更多
 | 
	
		
			
				|  |  |      loadMoreFinish() {
 | 
	
		
			
				|  |  | -      this.showLoadMoreText = false;
 | 
	
		
			
				|  |  |        this.loadMoreText = '加载更多';
 | 
	
		
			
				|  |  | -      this.bs.finishPullUp(); //  加载更多完成
 | 
	
		
			
				|  |  | +      this.showLoadMoreText = false;
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  | +  destroyed() {
 | 
	
		
			
				|  |  | +    // 销毁 better-scroll
 | 
	
		
			
				|  |  | +    this.bs.destroy();
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  |  };
 | 
	
		
			
				|  |  |  </script>
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -166,5 +209,4 @@ export default {
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  |  </style>
 |