瀑布流樣式實現小程序下拉刷新和上拉加載

全局方法介紹

屬性	類型	描述	鏈接
enablePullDownRefresh	boolean（默認false）	是否開啓當前頁面下拉刷新	官方鏈接
onReachBottomDistance	number（默認50）	頁面上拉觸底事件觸發時距頁面底部距離單位爲px。	官方鏈接

頁面的方法介紹

屬性	類型	描述
onPullDownRefresh	function	監聽用戶下拉動作
onReachBottom	function	頁面上拉觸底事件的處理函數

demo展示

怎麼做？

1.全局配置

在你的app.json中開啓：
"enablePullDownRefresh"：true,
"onReachBottomDistance":50

在你的需要的頁面的json中開啓 ，如（index.json）：
"enablePullDownRefresh":true, // 這個其實也可以不寫但是全局哪裏要配置
"onReachBottomDistance":50 //同上
"backgroundTextStyle": "dark", // 如果顏色默認，可能顯示不出來下拉時候點的樣式
"backgroundColor": "#fff"

上代碼

1.wxml

<view class='case-page'>
  <view class='list-masonry'>
    <view class='item-masonry' wx:for="{{note}}">
      <image src='{{item.url}}' mode='widthFix'></image>
    </view>
  </view>
</view>
 <view class="loading-heart" hidden="{{!ishow}}">
 </view>

2.wxss

page {
  background-color: white;
}

.case-page {
  padding: 20rpx;
}

.list-masonry {
  column-count: 2;
  column-gap: 20rpx;
}

.item-masonry {
  /* animation:myfirst 5s;
  -moz-animation:myfirst 5s; 
  -webkit-animation:myfirst 5s; 
  -o-animation:myfirst 5s;  *//* opacity: 0 */
}

.item-masonry image {
  width: 100%;
  margin-top: 20rpx;
  /* transition: all 2s; */
}

/* @keyframes myfirst {
  from {opacity:0;}
  to {opacity:1;}
} */

/*動畫十一：心跳  */

.loading-heart {
  width: 150rpx;
  height: 150rpx;
  position: relative;
  animation: loading-heart 1s ease infinite;
  margin: 0 auto;
  text-align: center;
  right: 20rpx;
}

.loading-heart::before {
  content: '';
  display: block;
  width: 20px;
  height: 40px;
  background-color: red;
  border-radius: 20px 20px 0 0;
  position: absolute;
  top: 40%;
  left: calc(50% - 7px);
  transform-origin: center bottom;
  transform: translateY(-50%) rotate(45deg);
}

.loading-heart::after {
  content: '';
  display: block;
  width: 20px;
  height: 40px;
  background-color: red;
  border-radius: 20px 20px 0 0;
  position: absolute;
  top: 40%;
  left: calc(50% + 7px);
  transform-origin: center bottom;
  transform: translateY(-50%) rotate(-45deg);
}

@keyframes loading-heart {
  0% {
    transform: scale(0.4);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.4);
  }
}

3.js

const app = getApp()

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    animationData: '',
    ishow: false,
    note: [{
      url: '../images/wxy1.jpg'
    },
    {
      url: '../images/wxy2.jpg'
    },
    {
      url: '../images/wxy3.jpg'
    },
    {
      url: '../images/wxy4.jpg'
    },
    {
      url: '../images/wxy5.jpg'
    },
    {
      url: '../images/wxy6.jpg'
    },
    {
      url: '../images/wxy7.jpg'
    },
    {
      url: '../images/wxy8.jpg'
    },
    {
      url: '../images/wxy9.jpg'
    },
    {
      url: '../images/wxy10.jpg'
    }
    ]
  },
  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading()
    this.data.note.forEach((el, index, array) => {
      let randomNumber = Math.ceil(Math.random() * 14);
      el.url = `../images/wxy${randomNumber}.jpg`
      this.setData({
        note: this.data.note
      })
    });
    let interval = setInterval(()=>{
      wx.hideNavigationBarLoading()
      clearInterval(interval)
    },3000)

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    this.setData({
      ishow: true
    })
    let arr = [
    {
      url: '../images/wxy11.jpg'
    }, {
      url: '../images/wxy12.jpg'
    },
    {
      url: '../images/wxy13.jpg'
    }, {
      url: '../images/wxy14.jpg'
    },
    {
      url: '../images/wxy15.jpg'
    }, {
      url: '../images/wxy16.jpg'
    },
    {
      url: '../images/wxy17.jpg'
    }, {
      url: '../images/wxy18.jpg'
    },
    {
      url: '../images/wxy19.jpg'
    },
    {
      url: '../images/wxy20.jpg'
    }]
    let interval = setInterval(() => {
      let newArr = [...this.data.note, ...arr]
      this.setData({
        note: newArr
      })
      clearInterval(interval)
    }, 3000);
  }
})

結語

微信小程序的上拉 刷新和下拉加載是在實際開發中非常重要的，所以寫了這麼個東西來娛樂一下，也順變給還沒有做過的同學一個小小的參考。