Micro-Letter Applet Scroll-view Component Implementation List Page instance code _javascript

Introduction to Scroll-view Components

The Scroll-view is a scrollable view component provided by a micro-letter applet, and its main function is to make a pull-load Drop-down list page that is often seen on the phone side! Let's take a < smile > as an example to explain the use of this component!

Import a new page page for the app

First you need to import a new page page for our applet, the project root opens App.json this project configuration file inside the pages array add "Pages/alljoke/alljoke" then set the bottom navigation in "Tabbar" list item ("List") Add to:

 {
   "text": "List",
   "Pagepath": "Pages/alljoke/alljoke",
   "IconPath": "Images/note.png",
   " Selectediconpath ":" Images/notehl.png "
  },

If you want to understand the meaning of the specific configuration can refer to the Applet configuration Document no longer repeat here!

JSON Configuration page

Next is the configuration page for our new page, create a new directory in the page directory like Alljoke, then create a new Alljoke.json in this directory, and copy the following code into this file:

{"
  Navigationbartitletext": "Jokes Collection",
  "Enablepulldownrefresh": True
}

Because we're going to do a drop down refresh, we need to use the Onpulldownrefresh method provided by the applet, so you must open the Enablepulldownrefresh in the configuration item. Another option is the top of the page.

Wxml View Page

Good turn to view page, the same in the Alljoke directory to create a new Alljoke.wxml page. Wxml is a small program that creates a view page document type that is written like HTML, It's not difficult to get started on the front end. You need to learn more about reading Wxml documents. Copy the following code to the Alljoke.wxml.

<view>
 <view>
  <scroll-view class= "scroll" scroll-top= "{scrolltop}}" style= "height:580px;" Scroll-y= "true" bindscroll= "Scrll"  bindscrolltolower= "Loadmore" >
   <view class= "block" wx:for= "{{ Listli}} "wx:for-item=" Item >
    <text>{{item.text}}</text>
   </view>  
  </ scroll-view>
 </view>
 <view class= "Top" hidden= "{Hidden}}" catchtap= "Gotop" >⇧</view >
</view>

You can see, our protagonist Scroll-view also here Grand debut! Bring over a long series of configuration, let me tell you about these configuration role!

Configuration Items	function
Scroll-top	Set the position of the vertical scroll bar, note that if the value of the setting has not changed, the component will not render!
Scroll-y	Allow scrolling vertically
Bindscroll	Callback functions that are triggered when scrolling
Bindscrolltolower	Events triggered by scrolling to the bottom

The options used are listed, and there is one thing that needs special attention:

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

For more information, please read the micro-mail program Scroll-view component documentation

WXSS Style

Also in the Alljoke directory to create a new ALLJOKE.WXSS file, the style of small programs and traditional CSS almost everyone can design according to their own preferences, here I simply did a little bit ugly style will be used. (Off the topic: can't stand their own hands and clothing)

. 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 small program documentation

Logical part

To the last and most important part of the logic! Old rules Alljoke directory new Alljoke.js file, first paste code and then slowly explain:

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, = this wx.request ({url: ' https://wechat.sparklog.com/jokes ', D ATA: {page:page, per: ' ", Method: ' Get ', success:function (res) {if (page===1) {THAT.SETDA Ta ({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.lis Tli.concat (Res.data), done:true})}else{That.setdata ({page:page+1, Listli:tha T.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.setd 
  ATA ({scrolltop:1, hidden:false})}else{This.setdata ({scrolltop:1, hidden:true});

 }, Gotop:function () {this.setdata ({scrolltop:0, hidden:true})}})

As you can see, first we need to register the page using page () function, and then define some initialization data in the. OnLoad is the life cycle function of this page, which is called when the page loads. We called the custom getlist function when the page was loaded. This function receives two parameters , the first parameter is the page to be loaded, and the second parameter is a Boolean value that is used to determine whether this function is a drop-down refresh call or a function called when the page is loaded! Next Onpulldownrefresh is the Drop-down refresh function provided by the applet, Inside Wx.showtoast Displays the message prompt box, which prompts the user to load, and Loadmore is the event that is scrolled to the bottom. function to check whether all list items have been loaded, if all list items have already been loaded, and if the database has list items, Pull up to the bottom load the next page The!scrll function is a function that is triggered when scrolling, and you can see that this function will determine whether the scroll bar position is greater than 600, and if more than 600 shows the button that hits the bottom directly, If less than 600 hides the button at the top of the line. The parameters of the scroll bar position are also updated. Just when I spoke wxml, I already talked about it. Scroll-view component settings vertical scroll bar position scroll-top when the parameter is the same, the page will not be rendered again, and we take advantage of that. If you want to reach the top, the position must be ' 0 ', when scrolling triggers the SCRLL function, we set the position information to ' 1 ' because the scrolling function will trigger repeatedly, so the page is not rendered. That is, because the position setting parameter is set to ' 1 ' unchanged, Causes the Scroll-top settings item not to take effect as the direct top of the Gotop function (the argument is given an opportunity to ' 0 '). The last is the function of the top button, you can see it is the position information into ' 0 ', the parameter change scroll-top setting takes effect, The page goes directly to the top. Finally, by changing the hidden this parameter to put yourself (directly to the top button) to hide it!

End

OK, through the above steps we finally realized the Drop-down to refresh the loaded list page function, from above we can see the micro-letter provides the interface and API is quite comprehensive, to achieve a function overall than the original JS implementation to be simpler!

Thank you for reading, I hope to help you, thank you for your support for this site!