小程序 上拉加载onReachBottom 的使用(以下是在mpvue中的例子)
-
{{item.title_name}}
查看更多》
<script>
import { get, post } from "../../utils";
import $store from "../../store/index";
export default {
components: {},
data () {
return {
imgurl:$store.state.str,
newsData:[],
pageNum: 1,
}
},
methods:{
async getNews(){
const data = await get("Index/culture",{
p:this.pageNum
});
if(data.code == 200){
// this.newsData = data.data;
this.newsData = this.newsData.concat(data.data);
}else if(data.code == 400){
wx.showToast({
title: data.errMsg,
icon: 'none',
duration: 2000
})
return false;
}
},
goToDet(id) {
wx.navigateTo({
url: '/pages/newsDetails/main?id='+id
})
},
},
// 上拉加载
onReachBottom: function () {
this.pageNum++
this.getNews();
},
mounted() {
this.getNews();
},
created () {
}
}
</script>
<style scoped>
.news{
width: 100%;
}
.n_top{
width: 100%;
}
.thtz{
width: 100%;
}
.thtz ul{
width: 100%;
box-sizing: border-box;
}
.thtz li{
margin: 3px 0;
padding: 10px 10px;
box-sizing: border-box;
width: 100%;
background: #ffffff;
border-bottom:1px solid #ccc ;
}
.thtz li:last-child{
border: 0;
}
.thtz .h_hhjd_zt{
float: left;
width: 35%;
}
.thtz .h_hhjd_yw{
padding-left: 5%;
box-sizing: border-box;
position: relative;
float: left;
width: 62%;
}
.thtz .h_hhjd_zt img{
width: 100%;
height: 50px;
border-radius: 5%;
}
.thtz .h_hhjd_yw h3{
margin-top: 10px;
font-weight: normal;
font-size: 14px;
color: #2B2828;
line-height: 22px;
overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.thtz .h_hhjd_yw>p{
margin: 20px 0 10px;
}
.thtz .h_hhjd_yw>p>span{
display: inline-block;
margin-right: 10px;
font-size: 16px;
color: #f9b454;
}
</style>
注意事项:
在样式中使用 position: fixed; onReachBottom 无反应