catalogue
- Paging load
- Jump with reference
- Date processing method
start
1, Paging load
What is paging loading
- A common scenario is to browse commodity information on Weibo and Taobao. By default, only a few pages are loaded at the beginning. Sliding down can resend the request and display more pages of information in total
- When there is a large amount of data, it will be classified and loaded, which can optimize the user experience.
Two basic ideas of classified loading
-
A fixed number of data are displayed on each page to limit the data capacity obtained each time.
-
Starting from the second page, the data obtained each time should skip the part of the page number that has been displayed and skip the data capacity.
-
The skip method is reflected in the request url, which can be directly added after the url? Skip = XXX & limit = XXX. You can also define skip and limit attributes in the data of request()
// 1. url: 'http://192.168.1.20:3000/home/hot?skip=0&limit=12', // 2. url: 'http://192.168.1.20:3000/home/hot', data: { skip: '', limit: '' },
Use scenario process to realize analysis
- Scenario: when the scroll bar of the user's page scrolls to the bottom, start paging, and trigger the function to initiate a request
- You need to use the scroll view tag to monitor scrolling < scroll view class = "recommend" scroll-y. recommend is css. In order to fix the height of the scroll view, the scrolling area of the page is only the component part of the out tabs. Otherwise, it is only the scrolling of the page, not the scrolling of the scroll view, and the bottom touch event cannot be detected. ( Use reference)
- Write the bottom event of bindscrolltower = "XXX" binding, modify the paging request parameters, and call the function again to initiate the request
- Finally, use the result of the new request and the previous result to complete the array splicing. hot:[...this.data.hot,...res.data.data.list]
Lift chestnut
wxml code
<!--
Thoughts on paging function:
1. The area we want to scroll is the recommended component, not index Page; Remove top tabs Part of
2. How can scrolling be generated? First, the box should have a fixed height; If the height is not set, the box height is supported by the content;
3. The content must overflow, and the height of the content must exceed the height of the box to realize scrolling; The height of the scroll is determined by calc Calculate
4. By monitoring the bottom event, get data from the server in batches
Implementation: Using scroll-view Scroll the View tab to wrap the recommended components;
1)use scroll-y Turn on vertical scrolling;
2)use css Calculate attributes to scroll-y Set a fixed height;
3)use bindscrolltolower Bind the bottom event to realize paging
-->
<scroll-view class="recommend" scroll-y bindscrolltolower="scrolltolower">
<!--Selected large picture-->
<view class="cover_view">
<view class="cover_item" wx:for="{{cover}}" wx:key="_id">
<image class="my_img" mode="widthFix" src="{{ baseURL+item.thumb }}"></image>
</view>
</view>
<!--month-->
<view class="month_view">
<!--Month title section-->
<view class="title">
<view class="active">{{month.date_msg}}</view>
<view>{{month.title}}</view>
<view class="active"> more> </view>
</view>
<!--Month picture list-->
<view class="list">
<!--be careful!!! What to cycle is not month Itself, but month Inside list array-->
<view class="list_item" wx:for="{{month.list}}" wx:key="_id">
<image class="my_img" mode="aspectFill" src="{{ baseURL+item.thumb }}"></image>
</view>
</view>
</view>
<!--Hot-->
<view class="hot_view">
<!--Popular title-->
<view class="hot_t">Hot</view>
<!--List of popular pictures-->
<view class="list">
<view class="list_item" wx:for="{{hot}}" wx:key="_id">
<image class="my_img" mode="aspectFill" src="{{ baseURL+item.thumb }}"></image>
</view>
</view>
</view>
</scroll-view>
js code
Component({
data: {
//Receive data from selected large drawings
cover:[],
//Receive month data
month:[],
//Receive hot data
hot:[],
//Define the set of request parameters to get popular data
params:{
skip: 0,
limit: 12
},
//Total number of data
total:0,
//Defines the root path of the picture link
baseURL:"http://118.190.104.39:3000/"
},
/**
* Method list of components
*/
methods: {
//Request method for obtaining selected large map
getCover(){
wx.request({
//Fill in the interface address in the url
url: this.data.baseURL+'home/cover',
//The callback function after the successful request completes the data processing in this method
//Use es6 new syntax and arrow function to solve the problem of this directivity
success:(res)=>{
//console.log(res.data.data)
//Update to data to facilitate data binding of the page
this.setData({
cover:res.data.data
})
}
})
},
//Get month data
getMonth(){
wx.request({
url: this.data.baseURL+'home/month',
success:(res)=>{
//console.log(res.data.data)
//Get the data object returned in the background
var my_month = res.data.data
//Gets the timestamp returned in the background
var my_date = res.data.data.date
//Processing timestamp
var date = new Date(my_date)
//Use the getMonth() method to get the month data in the date object. Because the index starts from 0, it needs to execute + 1
var month = date.getMonth()+1
//Use the getDate() method to get the date data in the date object
var days = date.getDate()
var date_msg = days+ " / "+month
//console.log(date_msg)
//Append the processed date format to the returned data object, and add an attribute and attribute value
my_month.date_msg = date_msg
//console.log(my_month)
this.setData({
month:my_month
})
}
})
},
//Get hot data
getHot(){
wx.request({
//Splicing request parameters in the path is a traditional method
//url: 'http://122.114.27.185:3000/home/hot?skip=0&limit=12',
url: this.data.baseURL+'home/hot',
//Requested parameter set
data: this.data.params,
success:(res)=>{
//console.log(res.data.data.list)
this.setData({
//Merge new and old hot arrays
//es6 expand operator
//Hot can't only store the 12 pieces of data requested each time. We need to store all the requested data in hot
//At this time, array merging is required
//Array merging using expansion operator
//Expand operator = = "allows an expression to expand somewhere
// hot:res.data.data.list,
hot:[...this.data.hot,...res.data.data.list],
//Get the total number of interface data and update it to data
total:res.data.data.total
})
}
})
},
//Paging function - automatically triggered when the user scrolls down to the bottom! You don't need to put it in the life cycle function
scrolltolower(){
//First, judge whether the server has more data. If yes, continue to load, and if not, terminate the program
//Use the skip parameter of each data request to judge whether the accumulation exceeds the total number of data pieces
if( this.data.params.skip >= this.data.total ){
//Call the prompt box of wechat to prompt the user that there is no more data
wx.showToast({
title: 'I have a bottom line!',
//Remove the default icon
icon:'none'
})
//Termination procedure
return
}
console.log("Bottomed out");
//Get the global request parameters
var params = this.data.params
//Change the skip value every time -- + 12
//params.skip = params.skip+12
params.skip += 12
//Pass the modified parameters back to data
this.setData({
params:params
})
//Call the method requesting hot data again
this.getHot()
}
},
/**
*Component lifecycle
*/
lifetimes: {
attached: function() {
// After the component is created, start to request data
//Call the request method of selecting large map
this.getCover()
//Call the month data request method
this.getMonth()
//Call popular data request method
this.getHot()
}
}
})
wxss code
.recommend {
/*Use css to calculate attributes and realize the height assignment of rolling view
!!!When calculating the parameters passed in attribute calc(), the two parameters must be separated by spaces!!!
*/
height: calc(100vh - 36px);
}
/*Selected large picture*/
.cover_view {
display: flex;
flex-wrap: wrap;
}
.cover_item {
width: 50%;
border: 3px solid #fff;
}
.my_img {
width: 100%;
}
/*month*/
.title {
padding:20rpx 10rpx;
display: flex;
/*Set the alignment of elements - edge on both sides and divide the remaining space equally*/
justify-content: space-between;
}
.active {
color:hotpink;
/*Set text bold --- 700 bold, 400 normal*/
font-weight: 700;
}
.list {
display: flex;
flex-wrap: wrap;
}
.list_item {
width: 33.33%;
border: 3px solid #fff;
}
.hot_t {
margin:16rpx 10rpx;
padding-left:14rpx;
border-left: 3px solid hotpink;
font-weight: 700;
color: hotpink;
}
Knowledge points
- Data merging of new and old arrays hot:[...this.data.hot,...res.data.data.list],
this.setData({
//Merge new and old hot arrays
//es6 expand operator
//Hot can't only store the 12 pieces of data requested each time. We need to store all the requested data in hot
//At this time, array merging is required
//Array merging using expansion operator
//Expand operator = = "allows an expression to expand somewhere
// hot:res.data.data.list,
hot:[...this.data.hot,...res.data.data.list],
//Get the total number of interface data and update it to data
total:res.data.data.total
})
-
Component life cycle function lifetimes component creation completed attached
-
The life cycle of a component refers to some functions of the component itself, which are automatically triggered at a special time point or when encountering some special framework events.
-
Among them, the most important life cycle is created attached detached, which contains the main time point of a component instance life process.
Component({ lifetimes: { attached: function() { // Execute when the component instance enters the page node tree }, detached: function() { // Execute when the component instance is removed from the page node tree }, }, // The following is an old-fashioned definition method, which can maintain compatibility with the < 2.2.3 basic library attached: function() { // Execute when the component instance enters the page node tree }, detached: function() { // Execute when the component instance is removed from the page node tree }, // ... }) -
2, Jump with reference
Keep the current page and jump to a page in the application. But you can't jump to the tabbar page. Use Wx Navigateback can return to the original page. The page stack in the applet can be up to ten layers
reference resources: https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
- Page value transfer demo
wx.navigateTo({
url: 'test?id=1',
events: {
// Accepted value
// Add a listener for the specified event to get the data transmitted from the open page to the current page
acceptData: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// Value transmission
// Transfer data to the opened page through eventChannel
res.eventChannel.emit('sendData', { data: 'send' })
}
})
//test.js
Page({
onLoad: function(option){
// Get original page parameters
console.log(option.query)
const eventChannel = this.getOpenerEventChannel()
// send out
// Execute the original page method and transfer parameters
eventChannel.emit('acceptData', {data: 'This is the data passed to the original page by the target page's method of executing the original page'});
eventChannel.emit('someEvent', {data: 'sendother'});
// accept
// Listen to the sendData event and obtain the data transmitted from the previous page to the current page through eventChannel
eventChannel.on('sendData', function(data) {
console.log(data)
})
}
})
3, Date processing method
var date=1601084737033;
// 1 convert it back to the normal date type. The built-in Date object in js can be used directly
var newDate=new Date(date);
// console.log(newDate);
// 2. Month + 1 is required in the month js of the date
var month=newDate.getMonth()+1;
console.log(month);
// 3. Get the number
var currentDate=newDate.getDate();
var msg=currentDate+" / " + month +" month";
console.log(msg);