Hello, everyone, look at this title is not a bit strange, you look forward to the micro-program actual combat chapters - e-commerce (3) did not appear, I think so, because there are many content in e-commerce, how I just named as one or two or three, it is not convenient for you to see the content of each article, so I changed the way of naming, to explain each of the main. To content as the title, so that you can forget the knowledge points later, when you want to look back, you can quickly find it. You have a very intimate wood. Don't be infatuated with brother, brother is only a legend. Okay, no kidding. Let's get back to the main topic. Look at the title, Mu Error. Today we're going to talk about pull-down refresh and load more.
Dropdown refresh
There are two ways to achieve drop-down refresh
1. Call the API of the system. The system has API interface that provides drop-down refresh. 
2. Listen for scroll-view, custom drop-down refresh, remember that there is a bindscroll to upper attribute in scroll-view? Forget to review the last article by yourself. Wechat Small Procedure Practical Chapter-E-Commerce (II) When you scroll to the top / left, the scrolltoupper event is triggered, so we can use this property to implement the drop-down refresh function.
Both methods can be used. The first one is relatively simple and easy to use. After all, some logical systems have already been handled for you. The second one is suitable for the small programs that want to customize the drop-down refresh style. We will use the first one to explain e-commerce. The system provides just the right way to teach you how to use it. Take the home page as an example
1. home.json parameter configuration
"enablePullDownRefresh": trueWhich page we need to drop-down refresh, which page corresponds to the xxx.json file configuration above properties, this property can also be literally known, whether to allow drop-down refresh, of course, how you do not want one configuration to allow drop-down refresh, you can directly configure the above properties in the global variable app.json's window, so that the whole project can allow drop-down refresh. New, this must be added, because the system does not have the default drop-down refresh function
2. home.js
//Dropdown refresh
onPullDownRefresh:function()
{
wx.showNavigationBarLoading() //Display the load in the title bar
//Simulated loading
setTimeout(function()
{
// complete
wx.hideNavigationBarLoading() //Complete stop loading
wx.stopPullDownRefresh() //Stop drop-down refresh
},1500);
},
OnPull Down Refresh drop-down refresh event listener, take a look at the code inside, wx. show Navigation Bar Loading () and wx. hide Navigation Bar Loading () are used to control the display and hiding of chrysanthemum. Since we have not explained the network request yet, so I simulated the network loading and wrote a method of time delay through setTimeout method. One way to simulate the time consumed by network loading is to stop dropdown refresh wx.stopPullDownRefresh() when the network loading is complete.
So far, the function of pull-down refresh has been completed, but it is not perfect enough. It is still a bit strange. There is no animation in the pull-down refresh. I was surprised at that time. How could the pull-down refresh of Wechat package be so easy? Later, I found a small pit by referring to the code written by others. Let's see the effect of filling the pit first.
Well, it's a lot more pleasant. I want to know how I joined this animation. Let me show you. In fact, it's very simple. Just one sentence code is needed to configure the following attributes in window s of app.json. This is to configure the background color of the whole system. Why do I configure the system color will appear drop-down refresh? The reason is that the cartoon itself has drop-down refresh. But when we don't configure the background color, the system defaults to white, and the animation is white, so we can't see the animation effect, is it a little pit, haha?~~
"backgroundColor": "#f0145a"Load more
There are two ways to load more.
1. API for calling system
2. Monitor scroll-view, bindscrolltolower slides to the bottom of the monitor
I'd like to explain the first way of implementation. There are slightly different ways of handling and pull-down refresh, but they are much the same, let's take the home page as an example.
- home.js
//Load more
onReachBottom: function () {
console.log('Load more')
setTimeout(() => {
this.setData({
isHideLoadMore: true,
recommends: [
{
goodId: 7,
name: 'OLAY Magnolia Oil Essential Oil Bath Dew Rose Nutrition Two in One 450 ml',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161213/148162245074.jpg',
newprice: "￥36.60",
oldprice: "￥40.00",
},
{
goodId: 10,
name: 'Lancome Rose Cleaning Moisturizing and Softening Water Rejuvenating Water Cosmetic Water 400 ml Moisturizing and moisturizing without stimulation',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057937593.jpg',
newprice: "￥30.00",
oldprice: "￥80.00",
}, {
goodId: 11,
name: 'Lancome/Lancome Clean and Bright Soft Skin Toner/Powder water 400 ml Moisturizing Rose Water Cosmetic Water',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
newprice: "￥30.00",
oldprice: "￥80.00",
},
{
goodId: 12,
name: 'U.S.A CLINIQUE Clinique butter is oilless/Special effect moisturizer 125 ml',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
newprice: "￥239.00",
oldprice: "￥320.00",
},
{
goodId: 13,
name: 'France LANCOME Lancome softness light isolation sunscreen cream 50 ML2017 It expires in March',
url: 'bill',
imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058014894.jpg',
newprice: "￥130.00",
oldprice: "￥180.00",
},
],
})
}, 1000)
}The onReachBottom system provides bottom-touching event monitoring, as well as pull-down refresh. We also simulate some data, adding a time-delayed event, isHideLoadMore, a custom value to control the display and hiding of load controls.
2. home.wxml
<view class="weui-loadmore" hidden="{{isHideLoadMore}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">Loading</view>
</view>Add the above code at the bottom of home.wxml. This is to load more controls. Loading more benefits will not bring down refresh benefits. The system does not provide more control animation to load, so we need to make it ourselves.
3. home.wxss
/* Load more */
.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;
}This is our custom style, the style is simple, is a simple loading chrysanthemum, here I want to explain the weui-loading style setting background, data:image/svg+xml;base64 is what it means, we usually set the background to add color directly before, this is another use of backgrounds, add pictures, this picture is also a little bit, especially B. AS64 format, and draw with svg, of course, you can also directly write the url into the image path is also possible, well, let's see the effect together!
summary
Today I'm going to talk about this. Drop-down refresh and loading are all necessary knowledge for front-end programs. Almost all apps have drop-down refresh and loading more, so you must master it. The main point here is to explain the drop-down refresh and loading more API s of small programs. You can try to challenge the second way to achieve it.~
Attention to Wechat Public Number for Latest Consultation
