Wepy 列表页scroll-view上拉分页实现

Wepy 列表页scroll-view上拉分页实现

index.wpy文件

<view class="container">
    <view class="m-top">
          <!-- 应用的公共组件 -->
      <Panel title="选择菜单" class="panel">
      <scroll-view class="scroll" scroll-y="true" @scrolltolower="scrollTolower" style="height:{{height}}px">
        <view v-if="noData" class="tc tips pu40">暂无相关数据</view>
        <radio-group>
          <view class="item" v-for="item in listData" :key="item.index">
            <radio :value="item" color="#5ca2fa" data-item="{{item}}" @tap="getCaseItem(item)"></radio>
            <view class="item-right">
              <!-- 编号 -->
              <view class="title">{{item.bh}}</view>
              <view class="content">水果名称:{{item.sgmc}}</view>
              <view class="content">价钱:{{item.jq}}</view>
              <view class="content">进货日期:{{item.jhrq}}</view>
              <view class="content">进货地点:{{item.jhdd}}</view>
              <view class="content">货主:{{item.hz}}</div>
            </view>
          </view>
        </radio-group>
      </scroll-view>
     </Panel>
    </view>
    <view class="m-bot">
      <button class="global-btn" @tap="submitTap">确定</button>
    </view>
  </view>
</template>

<script>
import wepy from '@wepy/core';
import api from '@/utils/fgRequest';
wepy.page({
  data: {
    params: {
      userName: wx.getStorageSync('user').userInfo.userName, //登录名,
      pageNumber: 1,
      pageSize: 5
    },
    listData: [],
    height: "", //scroll高度
    pageCount: 0
  },
  onShow(options) {
    let self = this;
    self.params.userName = wx.getStorageSync('user').userInfo.userName;
    self.listData = []; //
    self.calHeight();
    self.pageInit();
  },
  methods: {
    //计算scroll高度
    <!-- 一定要把不是scroll-view的高度减掉，计算出scroll-view的高度，这一步是重点 -->
    calHeight () {
      let self = this;
      let system = wx.getSystemInfoSync()
      let query = wx.createSelectorQuery()
      console.log(query);
      query.select('.m-bot').boundingClientRect()
        .exec(res => {
          self.height = system.windowHeight - res[0].height - 46
        })
    },
    pageInit(){
      let self = this;
      api.request('***/***', self.params , 'POST').then(res => {
        if(res.data.code == "0"){        
          console.log(res.data.data.list);
         self.listData.push(...res.data.data.list)
         self.pageCount = res.data.data.pageCount
        }else{
          wx.showToast({
            title: res.data.msg,
            duration: 1500,
            icon: 'none'
          })
        }
      })
    },
    // 上拉加载
    scrollTolower () {
      let self = this;
      if (self.params.pageNumber == self.pageCount) {
        wx.showToast({
          title: '已加载全部数据!',
        })
      } else {
        self.params.pageNumber += 1;
        self.pageInit()
      }
    }
});
</script>

 

<config>
{
"navigationBarTitleText":"水果商店",
​
        "usingComponents":{
​
            "Panel":"~@/components/panel" 
        }  
}     
</config>

<style lang="less">
​
page {
​
  width: 100%;
​
  height: 100%;
​
}
​
.container {
​
  display: flex;
​
  flex-direction: column;
​
  height: 100%;
​
  width: 100%;
​
}
​
.m-top {
​
  width: 100%;
​
  flex: 1;
​
  overflow: auto;
​
}
​
.scroll {
​
  height: 100%;
​
  display: block;
​
  .item {
​
    display: flex;
​
    flex-direction: row;
​
    align-items: baseline;
​
    margin: 20rpx;
​
    .item-right {
​
      display: block;
​
      .title {
​
        padding: 10rpx;
​
        font-size: 32rpx;
​
        color: #0a162e;
​
      }
​
      .content {
​
        padding: 5rpx 10rpx;
​
        font-size: 26rpx;
​
        color: #343d51;
​
      }
​
    }
​
  }
​
}
​
.m-bot {
​
  width: 100%;
​
  // height: 100rpx;
​
}
​
</style>

  虽然实现分页的方法很多，但是这个也是实现分页不错办法。这个是真实开发总结出来的，×××是我用来代替真实项目的一小部分，还有一小部分功能我删除了，只保留了如何实现分页，希望对开发小程序的你们带来一点帮助。