uniapp,微信小程序局部位置自定义下拉刷新，上拉加载。

前言：uniapp以及微信小程序的官方下拉刷新和上拉加载都是全局的，或者说是整个页面的。但如果我想刷新的是局部位置，很显然pages.json里面配置的就不行了。如图要实现的效果：

这里有用到uview。搜索框和上拉的提示语都是用的uview 。 这里的下拉刷新用的是官方的滚动视图标签进行实现scroll-view 详细看官文。

##下面就是我实现的源码和注释解释。

1.最重要的是最外层的view需要固定位置并且禁用滚动<view style="overflow-y: hidden;position: fixed;">
2.第二就是课程列表的“scrollviewCss”的样式，需要设个高度和允许<scroll-view>标签里的内容滚动，
还有<sroll-view>里面配置的信息，参考官方，里面配置都有的。 3.最主要的也就上面两个，其他的都是没啥用的.还有含<u->开头的标签都是uview的标签。可以自行npm一下uview,不装也没事，把哪些标签，头部<comheader>去掉也行。

<template>		
  //最重要的，需要在最外层用定位fixed固定头部，overflow-y: hidden;禁用外层的滚动，
  //不然你会发现外面里面都会滚动，动作冲突等问题
 <view style="overflow-y: hidden;position: fixed;">
  <view class="headerCss">
   <!-- 头部 -->
   <view><comheader :title="title"></comheader></view>
   <!-- 搜索 -->
   <view><u-search placeholder="搜索感兴趣的课程或导师" :disabled="true" margin="25rpx 40rpx 25rpx 40rpx" :show-action="false" @click="clickSearch"></u-search></view>
   <!-- 分类 -->
   <view class="sortCss">
    <u-dropdown style="background-color: #bbb;">
     <u-dropdown-item v-model="sort" title="分类" :options="sortList"></u-dropdown-item>
     <u-dropdown-item v-model="onlineStatus" title="线上" :options="onlineList"></u-dropdown-item>
     <u-dropdown-item v-model="hotStatus" title="热门" :options="hotList"></u-dropdown-item>
    </u-dropdown>
   </view>
  </view>
  <!-- 课程列表 -->
  <scroll-view class="scrollviewCss" scroll-y="false" refresher-enabled="true" :refresher-triggered="triggered"
   :refresher-threshold="45" refresher-background="#f8f8f8" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
   @refresherabort="onAbort" @scrolltolower="scrollBottem">
   <view class="courseList">
    <view class="courseOne">
     <view>
      <image src="../../static/backImg/dandan.jpg"></image>
     </view>
     <view class="courseMsg">
      <view class="courseTitle">瑞志教育双十一发工资聚会下午茶超低价大套餐等你来拿但是发射点发射点发</view>
      <view class="courseTips">不管你是微商还是抖音用户，我们都为你私人定制套餐</view>
      <view class="courseTutor">苏亚雷斯 / 足球咨询师</view>
      <view class="courseLast">
       <view class="courseLastPrice">￥49.9</view>
       <view class="courseLastType">营销类</view>
      </view>
     </view>
    </view>
    <view class="courseOne">
     <view>
      <image src="../../static/backImg/dandan.jpg"></image>
     </view>
     <view class="courseMsg">
      <view class="courseTitle">瑞志教育双十一发工资聚会下午茶超低价大套餐等你来拿但是发射点发射点发</view>
      <view class="courseTips">不管你是微商还是抖音用户，我们都为你私人定制套餐</view>
      <view class="courseTutor">苏亚雷斯 / 足球咨询师</view>
      <view class="courseLast">
       <view class="courseLastPrice">￥49.9</view>
       <view class="courseLastType">营销类</view>
      </view>
     </view>
    </view>
    <view class="courseOne">
     <view>
      <image src="../../static/backImg/dandan.jpg"></image>
     </view>
     <view class="courseMsg">
      <view class="courseTitle">瑞志教育双十一发工资聚会下午茶超低价大套餐等你来拿但是发射点发射点发</view>
      <view class="courseTips">不管你是微商还是抖音用户，我们都为你私人定制套餐</view>
      <view class="courseTutor">苏亚雷斯 / 足球咨询师</view>
      <view class="courseLast">
       <view class="courseLastPrice">￥49.9</view>
       <view class="courseLastType">营销类</view>
      </view>
     </view>
    </view>
    <view class="courseOne">
     <view>
      <image src="../../static/backImg/dandan.jpg"></image>
     </view>
     <view class="courseMsg">
      <view class="courseTitle">瑞志教育双十一发工资聚会下午茶超低价大套餐等你来拿但是发射点发射点发</view>
      <view class="courseTips">不管你是微商还是抖音用户，我们都为你私人定制套餐</view>
      <view class="courseTutor">苏亚雷斯 / 足球咨询师</view>
      <view class="courseLast">
       <view class="courseLastPrice">￥49.9</view>
       <view class="courseLastType">营销类</view>
      </view>
     </view>
    </view>
    <view class="courseOne">
     <view>
      <image src="../../static/backImg/dandan.jpg"></image>
     </view>
     <view class="courseMsg">
      <view class="courseTitle">瑞志教育双十一发工资聚会下午茶超低价大套餐等你来拿但是发射点发射点发</view>
      <view class="courseTips">不管你是微商还是抖音用户，我们都为你私人定制套餐</view>
      <view class="courseTutor">苏亚雷斯 / 足球咨询师</view>
      <view class="courseLast">
       <view class="courseLastPrice">￥49.9</view>
       <view class="courseLastType">营销类</view>
      </view>
     </view>
    </view>
   </view>
   <!-- 加载....没有更多 -->
   <view style="line-height: 60rpx;margin-bottom: 50rpx;">
    <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
   </view>
  </scroll-view>
 </view>
</template>
<script>
 import comheader from "../components/header/header.vue"
 export default {
  data() {
   return {
    title: "全部课程",
    sort: 1,
    onlineStatus: 1,
    hotStatus: 1,
    sortList: [{
      label: '默认排序',
      value: 1,
     },
     {
      label: '距离优先',
      value: 2,
     },
     {
      label: '价格优先',
      value: 3,
     }
    ],
    onlineList: [{
      label: '线上',
      value: 1,
     },
     {
      label: '向下',
      value: 2,
     },
    ],
    hotList: [{
      label: '热门',
      value: 1,
     },
     {
      label: '一般',
      value: 2,
     },
    ],
    triggered: true,
    status: 'loadmore',
    iconType: 'flower',
    loadText: {
     loadmore: '轻轻上拉',
     loading: '努力加载中',
     nomore: '拉也没用，没有了'
    }
   }
  },
  components: {
   comheader
  },
  methods: {
   clickSearch() {
    console.log("点击跳转")
    wx.navigateTo({
     url: "../search/search"
    })
   },
   /* 滚动到底部 */
   scrollBottem() {
    console.log("滚动高度")
    this.status = "nomore"
   },
   clickOne() {
    console.log("点击了")
   },
   onRefresh() {
    setTimeout(() => {
     this.triggered = false;
    }, 2000)
    console.log("进入");
   },
   /* 下拉被复位 */
   onRestore() {
    this.triggered = true; // 需要重置
    console.log(this.triggered);
    console.log("停止");
   },
   /* 下拉被中止，没下拉完就松手就会触发 */
   onAbort() {
    console.log("onAbort");
   },
  }
 }
</script>
<style scoped>
 /deep/.mycollect {
  color: #2f2f2f !important;
 }
 /deep/.mycollect {
  margin-bottom: 20rpx !important;
 }
 /deep/.mycollect .titleCss {
  text-indent: 0px !important;
 }
</style>
<style scoped lang="scss">
 .headerCss {
  margin-top: -12rpx;
  .sortCss {
   background-color: #f1f1f1f8;
   height: 80rpx;
  }
 }
 .scrollviewCss {
  overflow-y: hidden;
  height: 80vh;
  .courseList {
   .courseOne {
    margin: 40rpx 35rpx 30rpx 35rpx;
    display: flex;
    image {
     width: 238rpx;
     height: 238rpx;
     border-radius: 6rpx;
    }
    .courseMsg {
     margin-left: 20rpx;
     .courseTitle {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 10rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 2;
     }
     .courseTips {
      font-size: 24rpx;
      color: #999999;
      margin-bottom: 10rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 2;
     }
     .courseTutor {
      font-size: 24rpx;
     }
     .courseLast {
      margin-top: 10rpx;
      display: flex;
      justify-content: space-between;
      .courseLastPrice {
       color: #E84A10;
       font-size: 32rpx;
      }
      .courseLastType {
       background-color: #848484;
       color: #dedede;
       padding: 8rpx;
       font-size: 26rpx;
      }
     }
    }
   }
  }
 }
</style>

最后的效果就是这样的了：

完！！