微信小程序封装列表上拉加载，下拉刷新组件（粘贴可用）

杜十娘.1

已于 2023-10-26 10:41:15 修改

阅读量684

点赞数

分类专栏：前端开发文章标签：微信小程序小程序 html

于 2023-04-12 09:51:50 首次发布

本文链接：https://blog.csdn.net/weixin_51410591/article/details/130099712

版权

该博客详细介绍了如何在微信小程序中封装一个列表上拉加载和下拉刷新的组件，包括wxml、wxss、js和json四个部分的代码实现，并提供了具体的使用示例。

摘要由CSDN通过智能技术生成

组件wxml代码

<!--pages/component/pullRefresnView/pullRefreshView.wxml-->
<scroll-view enable-flex scroll-y="{
  {scrollY}}" 
style="height:{
  { height }}"
class="prv-container"
 refresher-enabled="{
  {refresherEnable}}"
 bindrefresherrefresh="_onRefresh"
 refresher-triggered="{
  {refreshing}}"
 bindscrolltolower="_onLoadmore"
 bindrefresherpulling="_onPulling"
 refresher-default-style="none"
 bindrefresherrestore="_onClose"
 bindscrolltoupper="_onScrollTop"
 refresher-threshold="{
  {pullDownHeight}}"
 scroll-into-view="{
  {scrollToView}}"
 scroll-with-animation="{
  {scrollWithAnimation}}"
 scroll-top='{
  {topNum}}'
 bindscroll="getScrollPosition"
 bindtouchend="handlerTouchend"
 lower-threshold="70"
>
 <slot slot="refresher" name="refresher" wx:if="{
  {refresherType=='custom'}}"></slot>
 <view slot="refresher" class="prv-pulldown" style="height:{
  {pullDownHeight}}px;line-height:{
  {pullDownHeight}}px;" wx:else>
  <view wx:if="{
  {refresherType=='default'}}">
   <block wx:if="{
  {pullState==0||pullState==1}}">
    <view class="prv-pull-icon" style='transform:rotate({
  {pullState==0?0:180}}deg);'></view>
    <text class="text" wx:if="{
  {pullState==0}}"> {
  {pullText}}</text>
    <text class="text" wx:if="{
  {pullState==1}}" space="nbsp"> {
  {releaseText}}</text>
   </block>
   <block wx:if="{
  {pullState==2}}">
    <view class="prv-loading"></view><text> {
  {refreshText}}</text>
   </block>
  </view>
  <view wx:elif="{
  {refresherType=='circle'}}" class="prv-loading prv-dot-loading">
  </view>
 </view>
 <slot></slot>
 <slot name="loader" wx:if="{
  {loadType=='custom'&&!isEmpty&&showLoading}}"></slot>
 <view class="prv-loadmore" wx:elif="{
  {!isEmpty&&showLoading}}">
  <block wx:if="{
  {nomore}}">
   <text class="load-text">{
  {nomoreText}}</text>
  </block>
  <block wx:else>
   <view