<template>
<div class="list-con">
<!-- <div class="list" v-for="(item,key) in list" :key="key"> -->
<div class="positionfixd">
<ul>
<li style="width:14.5%">序号</li>
<li>编号</li>
<li style="width:24.5%">时间</li>
<li>等级</li>
<li style="border-right:1.5px solid #000">照片</li>
</ul>
</div>
<table border="1" cellpadding="0" cellspacing="0">
<tr class="list" v-for="(item,key) in list" :key="key">
<td class="td1">{{key+1}}</td>
<td>{{item.number}}</td>
<td class="td2">
<date-view :date="item.createdTime"></date-view>
</td>
<td>{{item.level===1?'重要':'普通'}}</td>
<td class="tdimg">
<img :src="item.problemPhotosList[0]" alt />
</td>
</tr>
</table>
<!-- <p> -->
<!-- {{item.county}}
{{item.village}}
{{item.userName}}
{{item.number}}-->
<!-- {{item.title}} -->
<!-- {{item.number}} -->
<!-- </!-->
<!-- </div> -->
<!-- <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
<span slot="no-more">没有更多消息了</span>
</infinite-loading>-->
<infinite-loading @infinite="infiniteHandler">
<span slot="no-more">没有更多消息了</span>
</infinite-loading>
</div>
</template>
<script>
import InfiniteLoading from "vue-infinite-loading";
import dateView from "./../views/date-view.vue";
// const api = "http://hn.algolia.com/api/v1/search_by_date?tags=story";
export default {
components: {
InfiniteLoading,
"date-view": dateView
},
data() {
return {
list: []
};
},
methods: {
// $state 方法
infiniteHandler($state) {
let params = {
pageNum: this.list.length / 20 + 1
};
this.$ajax
.get(
"/openapi/sqrj/h5/findByVillage?status=2&pageSize=20&pageNum=" +
params.pageNum,
params
)
.then(res => {
//通过接口获取到list 通过传参 pageNum 来控制请求的数据
console.log(res.data.result, "res.data.result.list.length");
console.log(this.list.length, res.data.result.total);
if (res.data.result.list.length) {
//如果接口list里面有值 那么进行下一步操作
this.list = this.list.concat(res.data.result.list); //将请求到的接口list:res.data.result.list 合并到this.list里面，这样现在在页面的list就合并进去了
console.log(this.list, "data");
$state.loaded(); //这一步操作相当于监听上拉动作改变pageNum的值重新发送请求
if (this.list.length === res.data.result.total) { //如果this.list的长度等于请求接口里面的数据的总长度，那么提示已经没有新数据了
$state.complete();
}
} else {
$state.complete();
}
});
}
// onInfinite() {
// let params = {
// pageNum: this.list.length / 20 + 1
// }
// this.$ajax.get('/openapi/sqrj/h5/findByVillage?status=2&pageSize=20&pageNum='+params.pageNum,params).then((res)=>{
// //通过接口获取到list 通过传参 pageNum 来控制请求的数据
// console.log(res.data.result,'res.data.result.list.length');
// console.log(this.list.length,res.data.result.total);
// if (res.data.result.list.length) { //如果接口list里面有值 那么进行下一步操作
// this.list = this.list.concat(res.data.result.list); //将请求到的接口list:res.data.result.list 合并到this.list里面，这样现在在页面的list就合并进去了
// console.log(this.list,'data');
// this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); //这一步操作相当于监听上拉动作改变pageNum的值重新发送请求
// if (this.list.length=== res.data.result.total) { //如果this.list的长度等于请求接口里面的数据的总长度，那么提示已经没有新数据了
// this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
// }
// }
// else {
// this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
// }
// })
// // this.$ajax.get('/openapi/wc/h5/findByVillage?userId=294259047560044&pageSize=20&pageNum='+params.pageNum,params).then((res)=>{
// // console.log(res.data.result.list.length,'res.data.result.list.length');
// // if (res.data.result.list.length) {
// // this.list = this.list.concat(res.data.result.list);
// // console.log(this.list,'data');
// // this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
// // if (this.list.length / 20 === 20) {
// // this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
// // }
// // } else {
// // this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
// // }
// // })
// // this.$ajax.get(api, params).then((res) => {
// // console.log(res.data.hits.length,'res.data.hits.length');
// // if (res.data.hits.length) {
// // this.list = this.list.concat(res.data.hits);
// // console.log(this.list,'this.list');
// // this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
// // if (this.list.length / 20 === 20) {
// // this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
// // }
// // } else {
// // this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
// // }
// // })
// },
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.list {
overflow: hidden;
margin: 20px 0;
}
span {
float: left;
margin-right: 5px;
}
p {
float: left;
}
.positionfixd {
position: fixed;
top: 0;
left: 0;
width: 100%;
ul {
padding: 0;
margin: 0 0 0 8px;
li {
display: inline-block;
width: 19%;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
background-color: #ccc;
color: #fff;
border: 1.5px solid #000;
border-right: none;
}
}
}
table {
margin-top: 30px;
tr {
td {
width: 20%;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
}
.td1 {
width: 15%;
}
.td2 {
width: 25%;
// span{
// display: inline-block;
// text-align: center;
// }
}
.tdimg {
img {
width: 100%;
height: 100%;
}
}
}
}
</style>
H5实现上拉加载功能
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
推荐阅读更多精彩内容
- ## 用到的工具： react-native react-native-ble-manager iconv-lit...
- 源站：http://fengyuanchen.github.io/viewer/ 应用： html: 源码上是正常...
