html:
<div class="content_left"> <el-card shadow="always"> <div class="radio"> 排序： <el-radio-group v-model="reverse"> <el-radio :label="true">倒序</el-radio> <el-radio :label="false">正序</el-radio> </el-radio-group> </div> <el-timeline :reverse="reverse" v-loading="loading"> <el-scrollbar style="height:100%;" id="scrollbar" ref="scrollbar"> <el-timeline-item v-for="(activity, index) in activities" :key="index" > <div> {{activity.start_time|formatDate}} <span class="item_xian"></span> {{activity.end_time|formatDate}} </div> <div> <div class="li_div"> <label for>名称:</label> <span>{{activity.title}}</span> </div> <div class="li_div"> <label for>内容:</label> <span>{{activity.field_id.field_name}}</span> <el-tag>{{activity.field_id.type_name}}</el-tag> </div> </div> </el-timeline-item> <div id="load" style="height:1px;width: 80%;margin: 0 auto;" ></div> <div v-if="state" style="text-align:center;height: 28px;">没有更多了</div> </el-scrollbar> </el-timeline> </el-card> </div>js： 正序倒序部分
data() { return { loading: true, reverse: true, state: false, flag: false, activities: [], }; }, watch: {//监听reverse变量 reverse: function(val) { // console.log(val); if (val) { this.activities = this.activities.sort(function(a, b) { return b.start_time < a.start_time ? 1 : -1; }); } else { this.activities = this.activities.sort(function(a, b) { // return b.start_time - a.start_time; return b.start_time > a.start_time ? 1 : -1; }); } // console.log(list); } },滚动部分
mounted() { //监听事件 this.flag = true; document .getElementById("scrollbar") .addEventListener("scroll", this.listenScrollbar, true); }, methods: { listenScrollbar() { if (this.flag) { //scrollbar 在App.vue页面 滚动条 这个一定要找到 // console.log(document.getElementById("scrollbar").firstChild.scrollTop); let let1 = document.getElementById("scrollbar").firstChild.scrollTop; //滚动条滚动距离 let let2 = document.getElementById("scrollbar").firstChild.scrollHeight; //浏览器总高度 let let3 = document.getElementById("scrollbar").scrollHeight; //浏览器可见高度 if (let2 - let3 - let1 <= 0.05) { this.flag = false; // console.log("底部"); let loadingInstance = this.$loading({ target: "#load", text: "加载中" }); ++this.metaparams.page; // console.log(this.metaparams.page); setTimeout(() => { this.getAgenda(); loadingInstance.close(); }, 2000); } } }, getAgenda() { let _this = this; //调用后端接口 _List(this.metaparams).then(response => { if (response.data.length !== 0) { // _this.activities = response.data; let list = response.data.sort(function(a, b) { return b.start_time < a.start_time ? 1 : -1; }); for (let i in list) { _this.activities.push(list[i]); } //*判断在这 _this.reverse = true; _this.state = false; _this.loading = false; _this.flag = true; // console.log(_this.activities); } else { //*判断在这 _this.state = true; _this.flag = false; } }); }本文下拉逻辑参考下面这篇博客 !https://blog.csdn.net/clumsyCoding/article/details/89383976 欢迎大家留言交流 大家2020新年快乐!
