Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to write reusable paging components in Mini Program. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, and let's take a look at it.

When the tab switching list is encountered in the project, each tab needs paging requirements, and the paging process is similar, so I want to encapsulate the paging as a component to facilitate application.

The application of the component has been written as a small demo, and the effect is shown in the following figure (data is simulated with mock):

The source code can be viewed at: wxapp-pagination

Project requirements

Specific project requirements:

View your own related meetings (the page is named meetings)

Tab handoff, which is divided into:

"my meeting" (the meeting I attended will be distinguished by "join" as key later)

"my appointment" (the meeting I booked will be distinguished by "book" as key later)

Load 10 size=10 at a time, pull to the bottom, and load the next page (page = page + 1)

Of course, as a front end, consider the performance requirements:

For the first time, only the first page of the default tab page is loaded, and the rest of the tab does not start loading until you click to the corresponding tab.

Go back to the loaded tab page and leave the original data without reloading.

So the prototype looks something like this:

Logical realization

The project structure related to paging logic is as follows:

├── components │ ├── meeting-item # list item │ └── pagination # paging component ├── model │ └── user.js # my related model └── pages │ └── user # my related page │ ├── meetings # my meeting │ └──... │└── vant-weapp

Let's try to figure out the relationship between them:

Listen for paging events within a component

The event that triggers paging scrolls to the bottom of the page, in Mini Program, and triggers the onReachBottom event of the Page page, but this event can only be triggered in Page, so pass the trigger time to the pagination component.

The solution is: within the component pagination, set the key property. Whenever the onReachBottom event is triggered, set the component property key to a random string, and when the component pagination listens for changes in the key, it makes paging operations.

/ components/pagination/index.jsComponent ({properties: {key: {type: String, observer:'_ loadMoreData' / / _ loadMoreData is a paging operation}) Page ({onReachBottom () {const key = scene [+ this.data.currentTab] .key / / corresponding tab corresponds to key this.setData ({[key]: random (16)})})

Implementation logic of paging component

After the trigger reaches the bottom, the data needs to be loaded. However, before loading again, the loading conditions are met:

The previous page has not been loaded yet (loading = true). It will not be loaded repeatedly.

The current page is fully loaded (ended = true) and does not continue to load

The specific loading process is as follows:

Page: triggers the onReachBottom event and modifies the key value of the pagination component

Component: the key value monitors changes and triggers the loading event _ loadMoreData

After determining that the condition is met in component: _ loadMoreData, trigger the load list function this.triggerEvent ('getList'), and pass in the page parameters page and size.

Page: get data from the model layer.

Page: after getting the data, pass it to the pagination components list and total values.

Component:list listens for changes and determines whether the load is complete.

Component

/ / components/pagination/index.jsComponent ({properties: {name: String, key: {type: String, observer:'_ loadMoreData' / / _ loadMoreData is paging operation}, size: {/ / entries per load type: Number, value: 10}, total: Number, / / Total pages list: {/ / loaded entry type: Array Observer:'_ endState' / / each time the new data is loaded Determine whether all data has been loaded}}, data: {page: 0, / / current page loading: false, / / whether ended: false / / whether all data has been loaded}, methods: {_ loadMoreData () {const {loading, ended, size} = this.data if (loading) return / / the previous page has not been loaded yet Do not load if (ended) return / / all the current page has been loaded, do not load const page = this.data.page + 1 this.setData ({loading: true, / / start loading new page loading is set to true page}) / / trigger loading the next page Pass the parameters this.triggerEvent ('getList', {page, size})}, _ endState (val, oldVal) {const {total, list} = this.properties let ended = false / / to determine whether all the data has been loaded if (list.length > = total) {ended = true} this.setData ({loading: false, / / the current page is loaded, loading is set to false ended})})

Page

Circular list item

The pagination component gets a list of loops, and the initial idea is to loop slot, but you can't get item objects in slot:

The solution is to encapsulate each list item as a component and loop the abstract node, which is extensible to the paging of other pages.

Declare in the componentGenerics field:

/ / components/pagination/index.json {"componentGenerics": {"selectable": true}, / /...}

Use abstract nodes:

Specify which component "selectable" is:

The corresponding json file defines the corresponding usingComponents:

/ pages/user/meetings/index.json {"usingComponents": {"pagination": "/ components/pagination/index", "meeting-item": "/ components/meeting-item/index"}}

The meeting-item component receives a property item so that in the meeting-item component, you can get the item value of the circular list and draw the page normally.

Realize toggle lazy loading

Add the initImmediately attribute to pagination. When initImmediately is true, the page is loaded for the first time, and the variable initState is used to mark whether the page has been initialized.

/ components/pagination/index.jsComponent ({properties: {initImmediately: {type: Boolean, value: true, observer: function (val) {if (val & &! this.data.initState) {this.initData ()}}, / /...}, data: {initState: false, / / whether it has been loaded / /...} Lifetimes: {attached: function () {if (this.data.initImmediately) {this.initData ()},}, methods: {initData () {console.info (`${this.data.name}: start init data`) this._loadMoreData () this.setData ({initState: true})}, / /. _ endState (val, oldVal) {if (! this.data.initState) return / /.} })

When currentTab is the current type, initImmediately is set to true.

Reuse of components

Completed the above components, in other paged pages, can be directly reused. For example, to implement a paging that gets a list of all users, you only need to add a component of user-item, like this:

These are all the contents of this article entitled "how to write reusable paging components in Mini Program". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.