uniapp(下拉刷新+上拉加载)---通俗易懂且代码可直接复制

开发时间：2024/09/15

开发作者：zhaozzz

开发工具：uniapp开发微信小程序

好久没写博客了，最近挺忙的，要看论文，要找方向。更新一下最近遇到的问题把。

1.实现加载分页+下拉刷新+上拉加载

只需要改一下接口和属性名，其他的全部复制粘贴，就可以使用，我已经帮大家测试过了喔~

欢迎大家来交流哦

1.实现加载分页 。我使用了uview中的---loadMore 加载更多组件  点击跳转 

我先来展示一下我的界面，看是否对您有帮助呢？

上拉加载界面+下拉刷新界面 

HTML界面

    <view class="wrap">
        <view class="item u-border-bottom" v-for="(item, index) in list" :key="index">
          <view class="main_toalbox" @click="toTeacherResume(item.teacherId)">
            <view class="main-box">
              <view class="main-box_1">
                <ul>
                  <li>
                    <u-avatar 
					:show-sex="true"
					:sex-icon="getSexIcon(item.teacherGender)" 
					:src="`${BASE_URL}${item.teacherAvatar}`"></u-avatar>
                  </li>
                  <li style="font-size: 12px;color: #999999;">最近登录</li>
                  <li style="padding-left: 10px;font-size: 12px;color: #999999;">今天</li>
                </ul>
              </view>
              <view class="main-box_2">
                <ul>
                  <li class="li_1">
                    <span>{
  { getTeacherLabel(item.teacherName)}}</span>
                  </li>
                  <li class="li_2">
                    <span
                      style="
                      display: inline-block;
                      margin-left: 0px;
                      margin-top: 8px;
                      width: 25px;
                      margin-right: 5px;
                      text-align: center;
                      border-radius: 5px;
                      background-color: #6e7ac2;
                      color: #ffffff;">{
  { item.teacherGender }}</span>
                    <span style="
                      width: 80px;
                      display: inline-block;
                      margin-right: 7px;
                      text-align: center;
                      border-radius: 5px;
                      background-color: #6e7ac2;
                      color: #ffffff;
                      margin-top: 8px;
                    "
                    >{
  { item.starRating }}</span>
                    <span style="
                      color: #fa7409;
                      background-color: #ffffff;
                      border: 1px solid #fa7409;
                      margin-top: 8px;
                      border-radius: 5px;
					  padding-left: 5px;
					  padding-right: 5px;">{
  { item.university }}</span>
                  </li>
                  <li class="li_3" style="margin-top: 8px;">
                    <span style="color: black;">家教区域：</span>
                    <span v-for="(area,index) in splitAreas(item.teachingArea)" :key="index" class="area-label">
                      {
  {area}}
                    </span>
                    <span v-if="item.teachingArea.split(',').length > 3"></span>
                  </li>
                  <li class="li_4" style="margin-top: 8px;">
                    <span style="color: black;">家教科目：</span>
                    <span v-for="(subject, index) in displayedSubjects(item.tutoringSubjects)" :key="index" class="subject-label">
                      {
  { subject }}
                    </span>
                  </li>
                </ul>
              </view>
            </view>
          </vi