|
|
<template>
|
|
|
<div class="container">
|
|
|
<div class="zixunlist">
|
|
|
<div class="zixunitem flex">
|
|
|
<div class="zixunitemleft">
|
|
|
<img src="../../../assets/banner.png" alt="" />
|
|
|
</div>
|
|
|
<div class="zixunitemright">
|
|
|
<div class="flextwo">
|
|
|
<div class="tiezicontentname tiezicontentnamek">滚滚长江东逝水</div>
|
|
|
<img
|
|
|
src="../../../assets/xingxing_icon@2x.png"
|
|
|
alt=""
|
|
|
class="starimg"
|
|
|
/>
|
|
|
<!-- <img
|
|
|
src="../../../assets/weishoucang_icon@2x.png"
|
|
|
alt=""
|
|
|
class="starimg"
|
|
|
/> -->
|
|
|
<van-list
|
|
|
v-model="loading"
|
|
|
:finished="finished"
|
|
|
finished-text="没有更多了"
|
|
|
@load="onLoad"
|
|
|
>
|
|
|
<div
|
|
|
class="zixunitem flex"
|
|
|
v-for="(item, index) in zixunlist"
|
|
|
:key="index"
|
|
|
>
|
|
|
<div class="zixunitemleft">
|
|
|
<img :src="item.image" alt="" />
|
|
|
</div>
|
|
|
<div class="tieziwordbox tieziwordboxk">滚滚长江东逝水</div>
|
|
|
<div class="flexone luntandibu">
|
|
|
<div class="teizipingitem teizipingitemk flexone">
|
|
|
<img
|
|
|
src="../../../assets/pinglun_icon@2x.png"
|
|
|
alt=""
|
|
|
class="lunimg"
|
|
|
/>
|
|
|
1005
|
|
|
</div>
|
|
|
<div class="teizipingitem teizipingitemk flexone">
|
|
|
<img
|
|
|
src="../../../assets/zan_icon@2x.png"
|
|
|
alt=""
|
|
|
class="lunimg zanimg"
|
|
|
/>
|
|
|
1005
|
|
|
</div>
|
|
|
<div class="teizipingitem teizipingitemk flexone">
|
|
|
<div class="zixunitemright">
|
|
|
<div class="flextwo">
|
|
|
<div class="tiezicontentname tiezicontentnamek">
|
|
|
{{ item.name }}
|
|
|
</div>
|
|
|
<img
|
|
|
src="../../../assets/cai_icon@2x.png"
|
|
|
src="../../../assets/xingxing_icon@2x.png"
|
|
|
alt=""
|
|
|
class="lunimg zanimg"
|
|
|
class="starimg"
|
|
|
/>
|
|
|
1005
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="zixunitem flex">
|
|
|
<div class="zixunitemleft">
|
|
|
<img src="../../../assets/banner.png" alt="" />
|
|
|
</div>
|
|
|
<div class="zixunitemright">
|
|
|
<div class="flextwo">
|
|
|
<div class="tiezicontentname tiezicontentnamek">滚滚长江东逝水</div>
|
|
|
<img
|
|
|
src="../../../assets/xingxing_icon@2x.png"
|
|
|
alt=""
|
|
|
class="starimg"
|
|
|
/>
|
|
|
<!-- <img
|
|
|
<!-- <img
|
|
|
src="../../../assets/weishoucang_icon@2x.png"
|
|
|
alt=""
|
|
|
class="starimg"
|
|
|
/> -->
|
|
|
</div>
|
|
|
<div class="tieziwordbox tieziwordboxk">滚滚长江东逝水</div>
|
|
|
<div class="flexone luntandibu">
|
|
|
<div class="teizipingitem teizipingitemk flexone">
|
|
|
<img
|
|
|
src="../../../assets/pinglun_icon@2x.png"
|
|
|
alt=""
|
|
|
class="lunimg"
|
|
|
/>
|
|
|
1005
|
|
|
</div>
|
|
|
<div class="teizipingitem teizipingitemk flexone">
|
|
|
<img
|
|
|
src="../../../assets/zan_icon@2x.png"
|
|
|
alt=""
|
|
|
class="lunimg zanimg"
|
|
|
/>
|
|
|
1005
|
|
|
</div>
|
|
|
<div class="teizipingitem teizipingitemk flexone">
|
|
|
<img
|
|
|
src="../../../assets/cai_icon@2x.png"
|
|
|
alt=""
|
|
|
class="lunimg zanimg"
|
|
|
/>
|
|
|
1005
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="zixunitem flex">
|
|
|
<div class="zixunitemleft">
|
|
|
<img src="../../../assets/banner.png" alt="" />
|
|
|
</div>
|
|
|
<div class="zixunitemright">
|
|
|
<div class="flextwo">
|
|
|
<div class="tiezicontentname tiezicontentnamek">滚滚长江东逝水</div>
|
|
|
<img
|
|
|
src="../../../assets/xingxing_icon@2x.png"
|
|
|
alt=""
|
|
|
class="starimg"
|
|
|
/>
|
|
|
<!-- <img
|
|
|
src="../../../assets/weishoucang_icon@2x.png"
|
|
|
alt=""
|
|
|
class="starimg"
|
|
|
/> -->
|
|
|
</div>
|
|
|
<div class="tieziwordbox tieziwordboxk">滚滚长江东逝水</div>
|
|
|
<div class="flexone luntandibu">
|
|
|
<div class="teizipingitem teizipingitemk flexone">
|
|
|
<img
|
|
|
src="../../../assets/pinglun_icon@2x.png"
|
|
|
alt=""
|
|
|
class="lunimg"
|
|
|
/>
|
|
|
1005
|
|
|
</div>
|
|
|
<div class="teizipingitem teizipingitemk flexone">
|
|
|
<img
|
|
|
src="../../../assets/zan_icon@2x.png"
|
|
|
alt=""
|
|
|
class="lunimg zanimg"
|
|
|
/>
|
|
|
1005
|
|
|
</div>
|
|
|
<div class="teizipingitem teizipingitemk flexone">
|
|
|
<img
|
|
|
src="../../../assets/cai_icon@2x.png"
|
|
|
alt=""
|
|
|
class="lunimg zanimg"
|
|
|
/>
|
|
|
1005
|
|
|
<div class="tieziwordbox tieziwordboxk">滚滚长江东逝水</div>
|
|
|
<div class="flexone luntandibu">
|
|
|
<div class="teizipingitem teizipingitemk flexone">
|
|
|
<img
|
|
|
src="../../../assets/pinglun_icon@2x.png"
|
|
|
alt=""
|
|
|
class="lunimg"
|
|
|
/>
|
|
|
1005
|
|
|
</div>
|
|
|
<div class="teizipingitem teizipingitemk flexone">
|
|
|
<img
|
|
|
src="../../../assets/zan_icon@2x.png"
|
|
|
alt=""
|
|
|
class="lunimg zanimg"
|
|
|
/>
|
|
|
1005
|
|
|
</div>
|
|
|
<div class="teizipingitem teizipingitemk flexone">
|
|
|
<img
|
|
|
src="../../../assets/cai_icon@2x.png"
|
|
|
alt=""
|
|
|
class="lunimg zanimg"
|
|
|
/>
|
|
|
1005
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-list>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {};
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
page: 1,
|
|
|
zixunlist: [],
|
|
|
showpull: false,
|
|
|
loading: false,
|
|
|
finished: false,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.getzixunlist()
|
|
|
},
|
|
|
methods: {
|
|
|
onLoad() {
|
|
|
// 异步更新数据
|
|
|
// setTimeout 仅做示例,真实场景中一般为 ajax 请求
|
|
|
setTimeout(() => {
|
|
|
let newpage = this.page;
|
|
|
newpage++;
|
|
|
this.page = newpage;
|
|
|
this.getzixunlist();
|
|
|
// 加载状态结束
|
|
|
this.loading = false;
|
|
|
// 数据全部加载完成
|
|
|
if (this.showpull == false) {
|
|
|
this.finished = true;
|
|
|
}
|
|
|
}, 1000);
|
|
|
},
|
|
|
// 获取中面咨讯
|
|
|
getzixunlist() {
|
|
|
let that = this;
|
|
|
var url = '/api/article/get_list';
|
|
|
var params = {
|
|
|
page: that.page,
|
|
|
}
|
|
|
|
|
|
that.$axios.post(url, params).then((res) => {
|
|
|
console.log(res);
|
|
|
that.zixunlist = that.zixunlist.concat(res.data)
|
|
|
if (that.page > 1) {
|
|
|
if (res.data.length == 0) {
|
|
|
that.showpull = true
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}).catch((err) => {
|
|
|
console.log(err)
|
|
|
|
|
|
})
|
|
|
},
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
...
|
...
|
|