zoukankan      html  css  js  c++  java
  • 小程序 上拉加载onReachBottom 的使用(以下是在mpvue中的例子)

    <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{
       100%;
    }
    .n_top{
       100%;
    }
    .thtz{
       100%;
    }
    .thtz ul{
       100%;
      box-sizing: border-box;
    }
    .thtz li{
      margin: 3px 0;
      padding: 10px 10px;
      box-sizing: border-box;
       100%;
      background: #ffffff;
      border-bottom:1px solid #ccc ;
    }
    .thtz li:last-child{
      border: 0;
    }
    .thtz .h_hhjd_zt{
      float: left;
       35%;
    }
    .thtz .h_hhjd_yw{
      padding-left: 5%;
      box-sizing: border-box;
      position: relative;
      float: left;
       62%;
    }
    .thtz .h_hhjd_zt img{
       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 无反应
  • 相关阅读:
    10:简单密码
    08:字符替换
    07:配对碱基链
    05:输出亲朋字符串
    18:等差数列末项计算
    09:密码翻译
    用最通俗的话说23种设计模式之代理模式
    Android学习之 UI效果
    精确到时分秒的jQuery插件例子
    Eclipse 常用快捷键
  • 原文地址:https://www.cnblogs.com/AbbyXie/p/11571273.html
Copyright © 2011-2022 走看看