哈嘍茧跋，大家好，看這標(biāo)題是不是有點(diǎn)奇怪卓囚，你們期盼的微信小程序?qū)崙?zhàn)篇-電商（三）沒出現(xiàn)瘾杭，我是這么想的，因?yàn)殡娚汤锩娴膬?nèi)容有很多哪亿，如何我只是以一二三那樣命名的話富寿，不方便你們查看每篇文章講解的內(nèi)容，所以我就換了一個(gè)命名的方式锣夹，把每篇要講解的主要內(nèi)容做為標(biāo)題页徐，這樣就方便以后你們忘記知識點(diǎn)，要回顧的時(shí)候可以快速查找的到银萍，有木有很貼心啊~变勇，不要迷戀哥，哥只是個(gè)傳說贴唇。好了不開玩笑啦搀绣，回到正題上來，請看標(biāo)題戳气，木錯(cuò)链患，我們今天就要講解一下下拉刷新與加載更多。

下拉刷新

實(shí)現(xiàn)下拉刷新目前能想到的有兩種方式

1. 調(diào)用系統(tǒng)的API瓶您，系統(tǒng)有提供下拉刷新的API接口

   
   
   下拉刷新API.png
2. 監(jiān)聽scroll-view,自定義下拉刷新麻捻，還記得scroll-view里面有一個(gè)bindscrolltoupper屬性嗎？忘記請自行回顧上一篇 微信小程序?qū)崙?zhàn)篇-電商（二）當(dāng)滾動到頂部/左邊呀袱，會觸發(fā) scrolltoupper 事件贸毕，所以我們可以利用這個(gè)屬性，來實(shí)現(xiàn)下拉刷新功能夜赵。

兩種方法都可以明棍，第一種比較簡單，易上手寇僧，畢竟一些邏輯系統(tǒng)已經(jīng)給你處理好了摊腋，第二種適合那種想要自定義下拉刷新樣式的小程序沸版，我們講解電商，就用第一種兴蒸，系統(tǒng)提供的就好推穷，主要是教會大家怎么用。以首頁為例

1. home.json 參數(shù)配置

"enablePullDownRefresh": true

我們哪個(gè)頁面需要下拉刷新类咧，就在哪個(gè)頁面對應(yīng)的xxx.json文件配置上面屬性,這個(gè)屬性從字面意思也可以知道馒铃，是否允許下拉刷新，當(dāng)然痕惋，如何你不想一個(gè)個(gè)配置允許下拉刷新区宇，你可以直接在全局變量app.json的window里面配置上面這個(gè)屬性，這樣整個(gè)項(xiàng)目都允許下拉刷新了,這個(gè)一定要加的值戳，因?yàn)橄到y(tǒng)默認(rèn)是不具備下拉刷新功能的

2. home.js

  //下拉刷新
  onPullDownRefresh:function()
  {
    wx.showNavigationBarLoading() //在標(biāo)題欄中顯示加載
    
    //模擬加載
    setTimeout(function()
    {
      // complete
      wx.hideNavigationBarLoading() //完成停止加載
      wx.stopPullDownRefresh() //停止下拉刷新
    },1500);
  },

效果圖-1.gif

** onPullDownRefresh** 下拉刷新事件監(jiān)聽议谷，具體看一下里面的代碼，wx.showNavigationBarLoading() 與wx.hideNavigationBarLoading() 這兩句話是用來控制小菊花的顯示和隱藏堕虹，由于我們現(xiàn)在還沒有講解網(wǎng)絡(luò)請求卧晓，所以我就模擬了一下網(wǎng)絡(luò)加載，通過setTimeout方法赴捞，寫一個(gè)時(shí)間延遲的方法逼裆，這個(gè)方法可以模擬網(wǎng)絡(luò)加載所消耗的時(shí)間，還有就是當(dāng)網(wǎng)絡(luò)加載完成我們要停止下拉刷新wx.stopPullDownRefresh() 赦政。

這個(gè)到目前為止下拉刷新的功能已經(jīng)完成了胜宇，但是還不夠完美，還是有點(diǎn)怪怪的恢着，就是下拉刷新沒有動畫桐愉，有木有~我那時(shí)也感到奇怪，微信封裝的下拉刷新怎么可能這樣吶掰派，后來我參考別人寫的代碼从诲，發(fā)現(xiàn)一個(gè)小坑，先看一下我填完坑的效果吧

效果圖-2.gif

怎么樣靡羡，是不是順眼多了系洛，想知道我是怎么加入這個(gè)動畫的嘛，讓我來給你揭曉亿眠，其實(shí)很簡單碎罚，只需要一句話代碼在app.json中window里配置下面屬性磅废，這個(gè)是配置整個(gè)系統(tǒng)的背景顏色纳像，為什么我配置系統(tǒng)顏色就會出現(xiàn)下拉刷新了吶，原因就在下拉刷新的動畫本身就有拯勉，只不過當(dāng)我們沒配置背景顏色竟趾，系統(tǒng)默認(rèn)就為白色憔购，動畫也是白色，所以我們就看不到動畫效果岔帽，是不是有點(diǎn)坑玫鸟，哈哈~~

"backgroundColor": "#f0145a"

加載更多

實(shí)現(xiàn)加載更多也同理有兩種方式

1. 調(diào)用系統(tǒng)的API
2. 監(jiān)聽scroll-view，bindscrolltolower滑動到底部的監(jiān)聽

我還是拿第一種實(shí)現(xiàn)方式講解犀勒，處理方式和下拉刷新略有不同屎飘，不過也大同小異吧，還是以首頁為例

1. home.js

  //加載更多
  onReachBottom: function () {
    console.log('加載更多')
    setTimeout(() => {
      this.setData({
        isHideLoadMore: true,
        recommends: [
          {
            goodId: 7,
            name: 'OLAY玉蘭油精油沐浴露玫瑰滋養(yǎng)二合一450ml',
            url: 'bill',
            imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161213/148162245074.jpg',
            newprice: "￥36.60",
            oldprice: "￥40.00",
          },
          {
            goodId: 10,
            name: '蘭蔻玫瑰清瀅保濕柔膚水嫩膚水化妝水400ml補(bǔ)水保濕溫和不刺激',
            url: 'bill',
            imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057937593.jpg',
            newprice: "￥30.00",
            oldprice: "￥80.00",
          }, {
            goodId: 11,
            name: 'Lancome/蘭蔻清瑩柔膚爽膚水/粉水400ml補(bǔ)水保濕玫瑰水化妝水',
            url: 'bill',
            imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
            newprice: "￥30.00",
            oldprice: "￥80.00",
          },
          {
            goodId: 12,
            name: '美國CLINIQUE倩碧黃油無油/特效潤膚露125ml',
            url: 'bill',
            imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
            newprice: "￥239.00",
            oldprice: "￥320.00",
          },
          {
            goodId: 13,
            name: '法國LANCOME蘭蔻柔皙輕透隔離防曬乳霜50ML2017年3月到期',
            url: 'bill',
            imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058014894.jpg',
            newprice: "￥130.00",
            oldprice: "￥180.00",
          },
        ],
      })
    }, 1000)
  }

onReachBottom系統(tǒng)提供的觸底事件的監(jiān)聽贾费，和下拉刷新一樣钦购，我們也是模擬一些數(shù)據(jù)，加了一個(gè)時(shí)間延遲的事件褂萧，isHideLoadMore押桃，一個(gè)自定義的值，用來控制顯示和隱藏加載控件

2. home.wxml

 <view class="weui-loadmore" hidden="{{isHideLoadMore}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加載</view>
  </view>

在home.wxml底部加入上面的代碼导犹，這是加載更多的控件唱凯，加載更多待遇就沒下拉刷新待遇好，系統(tǒng)并沒有提供加載更多的控件動畫谎痢，所以我們需要自己制作

3. home.wxss

/*  加載更多   */
.weui-loading {
  margin: 0 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
  animation: weuiLoading 1s steps(12, end) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  background-size: 100%;
}
.weui-loadmore {
  width: 65%;
  margin: 1.5em auto;
  line-height: 1.6em;
  font-size: 14px;
  text-align: center;
}
.weui-loadmore__tips {
  display: inline-block;
  vertical-align: middle;
}

這個(gè)是我們自定義的樣式磕昼，樣式很簡單，就是一個(gè)簡單的加載小菊花节猿，這里我要講解的是 weui-loading 樣式里設(shè)置 background掰烟，data:image/svg+xml;base64這個(gè)是什么意思吶，我們之前一般設(shè)置背景直接加入顏色沐批，這個(gè)是background的另一種用法纫骑，加入圖片，這個(gè)圖片還有點(diǎn)特別是base64格式九孩，并用svg繪制的先馆，當(dāng)然你還可以直接把url里面寫入圖片路徑也是可以的，好躺彬，下面我們一起看一下效果吧煤墙！

效果圖-3.gif

總結(jié)

今天就講到這里，下拉刷新和加載更多都是前端程序必備的知識宪拥，幾乎所有APP里都有下拉刷新和加載更多仿野，所以大家一定要掌握，這里主要講解的是小程序自帶的下拉刷新與加載更多API她君，大家可以試著挑戰(zhàn)一下用第二種方式脚作，實(shí)現(xiàn)一下~

上一篇：微信小程序?qū)崙?zhàn)篇-電商（二）

下一篇：微信小程序?qū)崙?zhàn)篇-分類頁面制作