实现功能所用到的API和事件
1.wx.request (获取远程服务器的数据,可以理解成$.ajax)
2. scroll-view的两个事件
3 bindscrolltolower(滑到页面底部时)
4 bindscroll (页面滑动时)
5 bindscrolltoupper (滑倒页面顶部时)
接下来上我得代码
// pages/goods_list/goods_list.js
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
shoplist: []
},
requestParmse: {
query: "",
cid: "",
pagenum: 1,
pagesize: 10,
},
/**
* 生命周期函数--监听页面加载
*/
getlist() {
wx.showLoading({
title: '加载中',
})
app.axios.shoplist(this.requestParmse, "get").then(res => {
console.log(res);
this.setData({
shoplist: res.data.message,
arr: res.data.message
})
wx.hideLoading({
title: "数据加载完成"
})
})
},
onLoad: function (options) {
this.requestParmse.cid = options.cid || ""
this.requestParmse.query = options.query || ""
this.getlist()
// wx.showLoading({
// title: '加载中',
// })
// this.requestParmse.cid = options.cid
// app.axios.shoplist(this.requestParmse, "get").then(res => {
// console.log(res);
// this.setData({
// shoplist: res.data.message,
// arr: res.data.message
// })
// wx.hideLoading({
// title: "数据加载完成"
// })
// })
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
//下拉刷新得实现
onPullDownRefresh: function () {
//开启动画
wx.showLoading({
title: '刷新',
})
//将页码修改为1
this.requestParmse.pagenum = 1
//请求数据
app.axios.shoplist(this.requestParmse, "get").then(res => {
//将请求的数据和原来的数据展开到一个数组
this.setData({
shoplist: { goods: [...res.data.message.goods] },
arr: { goods: [...res.data.message] }
})
//数据获取完成,关闭动画
wx.hideLoading({
title: "刷新成功"
})
})
},
/**
* 页面上拉触底事件的处理函数
*/
//上拉加载实现
onReachBottom: function () {
//开启加载动画
wx.showLoading({
title: '加载中',
})
//上拉页码加一
this.requestParmse.pagenum++
//页码作为参数传递给接口
app.axios.shoplist(this.requestParmse, "get").then(res => {
//将请求的数据和原来的数据展开到一个数组
var k = [...res.data.message, ...this.data.shoplist.goods]
this.setData({
shoplist: { goods: [...res.data.message.goods, ...this.data.shoplist.goods] },
arr: { goods: [...res.data.message, ...this.data.shoplist.goods] }
})
//数据获取完成,关闭动画
wx.hideLoading({
title: "数据加载完成"
})
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})