Sample code on the implementation list page of the scroll-view component of WeChat applet

This article mainly introduces the sample code of the list page of the scroll-view component of the applet. the scroll-view component introduces that scroll-view is a rolling view component provided by the applet, its main function is to do the pull loading that is often seen on the mobile phone end. if you need it, refer to the introduction of the scroll-view component.

Scroll-view is a scroll view component provided by the applet. its main function is to pull and load the drop-down list page that is frequently seen on the mobile terminal! The following uses <摇出微笑> For example, let's explain how to use this component!

Import New page for app

First, we need to import a new page for our Applet. the Project root directory opens the app. add "pages/allJoke" to the pages array in the json project configuration file and add the following items in the "tabBar" list ("list:

{"Text": "list", "pagePath": "pages/allJoke", "iconPath": "images/note.png", "selectedIconPath ": "images/noteHL.png "},

For more information about the configuration, see the mini-program configuration document!

Json configuration page

Next we will create a page configuration page, create a directory such as alljoke under the page Directory, create a allJoke. json under this directory, and copy the following code to this file:

{"NavigationBarTitleText": "Joke collection", "enablePullDownRefresh": true}

We need to use the onPullDownRefresh method provided by the applet for pull-down refresh, so enablePullDownRefresh must be enabled in the configuration item. Another option is that you can set the title on the top of the page without setting it at will!

Wxml view page

It's a good turn to view the page. Similarly, create a alljoke under the alljoke directory. wxml page. wxml is a type of view page document created by a applet. Its syntax is similar to html, which makes it difficult to get started at the front end. for more information, see the wxml document. copy the following code to alljoke. wxml

  
    
      
        
     
      {{item.text}}
        
        
    
   
  
   ⇧
  
 

As you can see, scroll-view, our main character, also debuted here! This is a long string of configurations. let me explain the functions of these configurations for you!

The options used are listed. Note the following:

When using a vertical scroll bar, you must set a fixed height for the component, that is, the height set in the style code above! Remember!

For more information, see the small program scroll-view component documentation.

Wxss style

Similarly, create alljoke under the allJoke directory. the style of the wxss file and applet is similar to that of the traditional css. you can design your own style according to your preferences. here I will simply make it ugly. (digress: you can't stand it yourself)

.block {  border: 8px solid #71b471;  margin: 20rpx 20rpx;  padding: 10rpx;  background-color: #fff;  border-radius: 20rpx;  text-align: center;}.top {  width: 100rpx;  height: 100rpx;  line-height: 100rpx;  background-color: #fff;  position: fixed;  bottom: 40rpx;  right: 20rpx;  text-align: center;  font-size: 50rpx;  opacity: .8;  border-radius: 50%;  border: 1px solid #fff; }

Introduction to styles in the applet documentation

Logic

Finally, it is the most important logical part! Create the alljoke. js file under the old rule allJoke directory and paste the code to explain it slowly:

Page ({data: {listLi: [], page: 1, scrollTop: 0, done: false, hidden: true}, onLoad: function (options) {this. getList (1) ;}, onPullDownRefresh: function () {wx. showToast ({title: 'loading ', icon: 'Loading'}); this. getList (1, true) ;}, getList: function (page, stopPull) {var that = this wx. request ({url :' https://wechat.sparklog.com/jokes ', Data: {page: page, per: '20'}, method: 'GET', success: function (res) {if (page = 1) {that. setData ({page: page + 1, listLi: res. data, done: false}) if (stopPull) {wx. stopPullDownRefresh ()} else {if (res. data <20) {that. setData ({page: page + 1, listLi: that. data. listLi. concat (res. data), done: true})} else {that. setData ({page: page + 1, listLi: that. data. listLi. concat (res. data)}) }}},})}, loadMore: function () {var done = this. data. done; if (done) {return} else {wx. showToast ({title: 'loading ', icon: 'Loading', duration: 500}); var page = this. data. page; this. getList (page) }}, scrll: function (e) {var scrollTop = e. detail. scrollTop if (scrollTop> 600) {this. setData ({scrollTop: 1, hidden: false})} else {this. setData ({scrollTop: 1, hidden: true}) ;}, goTop: function () {this. setData ({scrollTop: 0, hidden: true })}})

We can see that we need to use the page () function to register the page first, and then define some initialization data in data. onLoad is the lifecycle function of the page. it is called when the page is loaded. we called the custom getList function during page loading. this function receives two parameters. The first parameter is the page to be loaded, and the second parameter is a Boolean value. it is used to determine whether the function is called by pull-down refresh, this function is called when the page is loaded! Next, onPullDownRefresh is the drop-down refresh function provided by the applet, which contains wx. showToast displays a message prompt box to indicate that the user is loading. loadMore is an event triggered by scrolling to the bottom. the function checks whether all list items have been loaded. If all list items have been loaded, return is returned. if there are still list items in the database, load the next page at the bottom! The scrll function is a function triggered during scrolling. you can see that this function determines whether the scroll bar position is greater than six hundred. if it is greater than six hundred, click the button at the bottom of the page. if it is less than six hundred, the button at the top of the page is hidden. the parameters of the scroll bar position are also updated. when talking about wxml, we have already talked about the scroll-view component setting vertical scroll bar position scroll-top setting item. if the parameters are the same, the page will not be re-rendered. we just used this point, to reach the top, the position must be '0'. when the scrll function is triggered during scrolling, we set the position information to '1', because the scrolling function will trigger it repeatedly, therefore, the page will not be rendered at this time. that is to say, because the location setting parameters are all set to '1', the scroll-top setting will not take effect as the direct to the top of the goTop function (turning the parameter to '0' will provide an opportunity ). the last step is the function that goes directly to the top button. you can see that it changes the location information to '0', the parameter change scroll-top settings take effect, and the page goes directly to the top. finally, you can hide yourself (directly to the top button) by changing the hidden parameter!

End

OK. through the above steps, we finally implemented the pull-down refresh and pull-up list page function. from the above we can see that the provided interfaces and APIs are quite comprehensive, it is easier to implement a function than to implement native js!

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

For more information about the instance code on the implementation list page of the scroll-view component of the applet, see The PHP Chinese web!