mint-ui下拉组件mt-loadmore遇到的问题

一、遇到的问题：

1. 问题描述：直接使用官方例子，可以上拉列表，并且可以加载更多数据。但是无法进行“触摸数据列表滚动”。
2. 官方例子实践代码：经测试，数据列表不能触摸滚动，只能上拉加载更多。

   <template>
   	<div class="content">
   		<mt-loadmore 
   			:top-method="loadTop" 
   		    :bottom-method="loadBottom" 
   		    :bottom-all-loaded="allLoaded" 
   		    :bottomDistance="100" 
   		    :auto-fill="false" 
   		    ref="loadmore"
   		    >
   		      	<ul class="data-list">
   		        	<li class="data-item" v-for="item in dataList" :key="item.id">
   		            	<p>{{ (item.id + 1 ) + '-' + item.title }}</p>
   		            	<p>{{ item.date}}</p>
   		          	</li>
   		        </ul>
   		</mt-loadmore>
   	</div>
   </template>
   <script>
   	export default {
   	    data(){
   	        return {
   	            dataList:[
   	                {id:0,title:"中心优化营商环境系列报道之一:全程跟进.",date:'2022-07-13'},
   	                {id:1,title:"中心优化营商环境系列报道之一:全程跟进.",date:'2022-07-13'},
   	                {id:2,title:"中心优化营商环境系列报道之一:全程跟进.",date:'2022-07-13'},
   	                {id:3,title:"中心优化营商环境系列报道之一:全程跟进.",date:'2022-07-13'},
   	                {id:4,title:"中心优化营商环境系列报道之一:全程跟进.",date:'2022-07-13'},
   	                {id:5,title:"中心优化营商环境系列报道之一:全程跟进.",date:'2022-07-13'},
   	                {id:6,title:"中心优化营商环境系列报道之一:全程跟进.",date:'2022-07-13'},
   	                {id:7,title:"中心优化营商环境系列报道之一:全程跟进.",date:'2022-07-13'},
   	            ],
   	            allLoaded:false
   	        }
   	    },
   	    methods:{
   	        loadTop(){
   	            this.$refs.loadmore.onTopLoaded();
   	        },
   	        loadBottom(){
   	            this.loadData() 
   	        },
   	        loadData(){
   	            let _this = this
   	            setTimeout(()=>{
   	                this.dataList.push({
   	                    id: this.dataList.length,
   	                    title: '中心优化营商环境系列报道之一:全程跟进.',
   	                    date: '2022-07-13'
   	                })
   	                if(this.dataList.length>10){
   	                    this.allLoaded = true
   	                }
   	                _this.$refs.loadmore.onBottomLoaded();
   	            },1000)
          		}
       	}
   	}
   </script>
   <style lang="less" scope>
   	.content{
   		height:430px;
   		overflow-y:scroll;
   	}
   </style>
   
   

二、请看官方文档例子

1. 官方示例代码

   <mt-loadmore 
   	:top-method="loadTop" 
   	:bottom-method="loadBottom" 
   	:bottom-all-loaded="allLoaded" 
   	ref="loadmore"
   	>
   		<ul>
   		   <li v-for="item in list">{{ item }}</li>
   	  	</ul>
   </mt-loadmore>
   

2. 部分组件的事件解释：
   – top-method=“loadTop”
   解释：顶部下拉事件（top-method）和此事件被触发时，所执行的方法（loadTop）；
   – bottom-method=“loadBottom”
   解释：底部上拉事件（loadBottom）和此事件被出发时，所执行的方法（loadBottom）；
   – bottom-all-loaded=“allLoaded”
   解释：数据全部加载完毕时，开发者将allLoaded的值设置true，此时底部上拉事件（bottom-method）不能被成功触发。

ok，官方例子，关于上拉加载更多相关，就介绍这么多。不仔细想，不会明白为啥会出现无法触摸滑动这个问题

三、分析

猜想：mt-loadmore组件只是提供加载更多功能，并没有包含滚动。那么我在该组件外面套两个父级div元素。外层父级元素设置成overflow-y:scroll，并且固定高度height:430px，内层父级元素高度设置height:auto。这样就可以加载更多，也可以触摸滑动了。

四、解决

于是，代码来了：

<div class="content">
    <div class="loadmore-box">
        <mt-loadmore 
        :top-method="loadTop" 
        :bottom-method="loadBottom" 
        :bottom-all-loaded="allLoaded" 
        :bottomDistance="100" 
        :auto-fill="false" 
        ref="loadmore"
        >
            <ul class="data-list">
                <li class="data-item" v-for="item in dataList" :key="item.id">
                    <p>{{ (item.id + 1 ) + '-' + item.title }}</p>
                    <p>{{ item.date}}</p>
                </li>
            </ul>
        </mt-loadmore>
    </div>
</div>
<script>
.content{
    overflow-y: scroll;
    height: 430px;
    .loadmore-box{
        .data-list{
            margin: 0;
            padding: 0;
            background-color: yellow;
            .data-item{
                text-align: center;
                margin: 0;
                padding: 0;
                height: 40px;
                list-style: none;
            }
        }
    }
}
</script>

总结：“加载更多”和“触摸滚动”两个小功能分开实现。