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

Posted 2022-11-25 abbyxie

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