小程序 上拉加载onReachBottom 的使用（以下是在mpvue中的例子）

• 
  <li class="clearfix" v-for="(item,index) in newsData" :key="index" @click="goToDet(item.id)">
  

<img mode="widthFix" :src="imgurl+item.theme_pic" alt="" />

{{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 无反应

转载于:https://www.cnblogs.com/AbbyXie/p/11571273.html