轉載自:https://www.jianshu.com/p/8c98af820fea
哈嘍,大家好,看這標題是不是有點奇怪,你們期盼的微信小程序實戰篇-電商(三)沒出現,我是這麼想的,因爲電商裏面的內容有很多,如何我只是以一二三那樣命名的話,不方便你們查看每篇文章講解的內容,所以我就換了一個命名的方式,把每篇要講解的主要內容做爲標題,這樣就方便以後你們忘記知識點,要回顧的時候可以快速查找的到,有木有很貼心啊~,不要迷戀哥,哥只是個傳說。好了不開玩笑啦,回到正題上來,請看標題,木錯,我們今天就要講解一下下拉刷新與加載更多。
下拉刷新
實現下拉刷新目前能想到的有兩種方式
-
調用系統的API,系統有提供下拉刷新的API接口
-
監聽scroll-view,自定義下拉刷新,還記得scroll-view裏面有一個bindscrolltoupper屬性嗎?忘記請自行回顧上一篇 微信小程序實戰篇-電商(二)當滾動到頂部/左邊,會觸發 scrolltoupper 事件,所以我們可以利用這個屬性,來實現下拉刷新功能。
兩種方法都可以,第一種比較簡單,易上手,畢竟一些邏輯系統已經給你處理好了,第二種適合那種想要自定義下拉刷新樣式的小程序,我們講解電商,就用第一種,系統提供的就好,主要是教會大家怎麼用。以首頁爲例
- home.json 參數配置
"enablePullDownRefresh": true
我們哪個頁面需要下拉刷新,就在哪個頁面對應的xxx.json文件配置上面屬性,這個屬性從字面意思也可以知道,是否允許下拉刷新,當然,如何你不想一個個配置允許下拉刷新,你可以直接在全局變量app.json的window裏面配置上面這個屬性,這樣整個項目都允許下拉刷新了,這個一定要加的,因爲系統默認是不具備下拉刷新功能的
2. home.js
//下拉刷新
onPullDownRefresh:function()
{
wx.showNavigationBarLoading() //在標題欄中顯示加載
//模擬加載
setTimeout(function()
{
// complete
wx.hideNavigationBarLoading() //完成停止加載
wx.stopPullDownRefresh() //停止下拉刷新
},1500);
},
onPullDownRefresh下拉刷新事件監聽,具體看一下里面的代碼,wx.showNavigationBarLoading() 與wx.hideNavigationBarLoading() 這兩句話是用來控制小菊花的顯示和隱藏,由於我們現在還沒有講解網絡請求,所以我就模擬了一下網絡加載,通過setTimeout方法,寫一個時間延遲的方法,這個方法可以模擬網絡加載所消耗的時間,還有就是當網絡加載完成我們要停止下拉刷新wx.stopPullDownRefresh() 。
這個到目前爲止下拉刷新的功能已經完成了,但是還不夠完美,還是有點怪怪的,就是下拉刷新沒有動畫,有木有~我那時也感到奇怪,微信封裝的下拉刷新怎麼可能這樣吶,後來我參考別人寫的代碼,發現一個小坑,先看一下我填完坑的效果吧
麼樣,是不是順眼多了,想知道我是怎麼加入這個動畫的嘛,讓我來給你揭曉,其實很簡單,只需要一句話代碼在app.json中window裏配置下面屬性,這個是配置整個系統的背景顏色,爲什麼我配置系統顏色就會出現下拉刷新了吶,原因就在下拉刷新的動畫本身就有,只不過當我們沒配置背景顏色,系統默認就爲白色,動畫也是白色,所以我們就看不到動畫效果,是不是有點坑,哈哈~~
"backgroundColor": "#f0145a"
加載更多
實現加載更多也同理有兩種方式
- 調用系統的API
- 監聽scroll-view,bindscrolltolower滑動到底部的監聽
我還是拿第一種實現方式講解,處理方式和下拉刷新略有不同,不過也大同小異吧,還是以首頁爲例
home.js
//加載更多
onReachBottom: function () {
console.log('加載更多')
setTimeout(() => {
this.setData({
isHideLoadMore: true,
recommends: [
{
goodId: 7,
name: 'OLAY玉蘭油精油沐浴露玫瑰滋養二合一450ml',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161213/148162245074.jpg',
newprice: "¥36.60",
oldprice: "¥40.00",
},
{
goodId: 10,
name: '蘭蔻玫瑰清瀅保溼柔膚水嫩膚水化妝水400ml補水保溼溫和不刺激',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057937593.jpg',
newprice: "¥30.00",
oldprice: "¥80.00",
}, {
goodId: 11,
name: 'Lancome/蘭蔻清瑩柔膚爽膚水/粉水400ml補水保溼玫瑰水化妝水',
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系統提供的觸底事件的監聽,和下拉刷新一樣,我們也是模擬一些數據,加了一個時間延遲的事件,isHideLoadMore,一個自定義的值,用來控制顯示和隱藏加載控件
home.wxml
<view class="weui-loadmore" hidden="{{isHideLoadMore}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加載</view>
</view>
在home.wxml底部加入上面的代碼,這是加載更多的控件,加載更多待遇就沒下拉刷新待遇好,系統並沒有提供加載更多的控件動畫,所以我們需要自己製作
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;
}
這個是我們自定義的樣式,樣式很簡單,就是一個簡單的加載小菊花,這裏我要講解的是 weui-loading 樣式裏設置 background,data:image/svg+xml;base64這個是什麼意思吶,我們之前一般設置背景直接加入顏色,這個是background的另一種用法,加入圖片,這個圖片還有點特別是base64格式,並用svg繪製的,當然你還可以直接把url裏面寫入圖片路徑也是可以的,好,下面我們一起看一下效果吧!
總結
今天就講到這裏,下拉刷新和加載更多都是前端程序必備的知識,幾乎所有APP裏都有下拉刷新和加載更多,所以大家一定要掌握,這裏主要講解的是小程序自帶的下拉刷新與加載更多API,大家可以試着挑戰一下用第二種方式,實現一下~