精通网站开发,电子商务网站建设是学什么,网站建设工作会议召开,建站官网1、下拉刷新获取数据enablePullDownRefresh
开启下拉刷新#xff1a;
enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新 案例#xff1a; 下拉刷新#xff0c;获取新的列表数据,其实就是进行一次新的网络请求#xff1a;
第一步#xff1a;在.json文件中开…1、下拉刷新获取数据enablePullDownRefresh
开启下拉刷新
enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新 案例 下拉刷新获取新的列表数据,其实就是进行一次新的网络请求
第一步在.json文件中开启下拉刷新
{usingComponents: {},enablePullDownRefresh:true,backgroundColor: #6D9AD6}
第二步在.js配置文件中找到下拉刷新处理函数
// pages/wxRequest/wxRequest.js
Page({/*** 页面的初始数据*/data: {listArr:[]},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getData();},getData(){wx.showLoading({title: 网络加载中...,mask:true//遮罩层防止用户误触})wx.request({url: https://api.thecatapi.com/v1/images/search?limit2,success:res{console.log(res)this.setData({listArr:res.data})//当网络请求完成后我们要自动的把下拉刷新的样式关闭掉要不然不好看wx.stopPullDownRefresh() },complete:res{//无论网络请求是否成功都要关闭loading样式wx.hideLoading()}})},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {this.setData({//细节其实我们下拉刷新后应该先把页面清空再获取新的数据//只不过页面清空效果很快肉眼看不太出来listArr:[] })this.getData();},
细节一当网络请求完成后我们要自动的把下拉刷新的样式关闭掉要不然不好看
wx.stopPullDownRefresh(Object object):停止当前页面下拉刷新;wx.startPullDownRefresh(Object object):开始下拉刷新。调用后触发下拉刷新动画效果与用户手动下拉刷新一致。 /*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {//细节其实我们下拉刷新后应该先把页面清空再获取新的数据//只不过页面清空效果很快肉眼看不太出来this.setData({listArr:[] })this.getData();},
细节二在页面加载完毕前应该添加一个wx.showLoading()提示用户正在加载网络请求完成后就关闭这个加载动作 getData(){wx.showLoading({title: 网络加载中...,mask:true//遮罩层防止用户误触})wx.request({url: https://api.thecatapi.com/v1/images/search?limit2,success:res{console.log(res)this.setData({listArr:res.data})//当网络请求完成后我们要自动的把下拉刷新的样式关闭掉要不然不好看wx.stopPullDownRefresh() //当网络请求完成后还要关闭loading样式wx.hideLoading()}})}, 细节三如果网络请求失败呢例如接口失效
successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数调用成功、失败都会执行
getData(){wx.showLoading({title: 网络加载中...,mask:true//遮罩层防止用户误触})wx.request({url: https://api.thecatapi.com/v1/images/search?limit2,success:res{console.log(res)this.setData({listArr:res.data})//当网络请求完成后我们要自动的把下拉刷新的样式关闭掉要不然不好看wx.stopPullDownRefresh() },complete:res{//无论网络请求是否成功都要关闭loading样式wx.hideLoading()}})},
2、触底加载更多的数据onReachBottom 在json文件中配置
{usingComponents: {},enablePullDownRefresh:true,backgroundColor: #6EB66E,navigationStyle:custom ,onReachBottomDistance:200
}
距离底部多少的时候触发我们的触底事件 默认是50px 触底加载更多的数据通常与这个api联合使用导航栏有加载中的小圆圈wx.showNavigationBarLoading(Object object)在js中找到触底事件对应的处理函数 /*** 页面上拉触底事件的处理函数*/onReachBottom() {},
// pages/wxRequest/wxRequest.js
Page({/*** 页面的初始数据*/data: {listArr:[]},/*** 生命周期函数--监听页面加载*/onLoad(options) {wx.showLoading({title: 网络加载中...,mask:true//遮罩层防止用户误触})this.getData();},getData(){wx.request({url: https://api.thecatapi.com/v1/images/search?limit2,success:res{let oldArr this.data.listArr;let newArr oldArr.concat(res.data)//调用concat()方法进行数组的拼接console.log(res)this.setData({listArr:newArr})//当网络请求完成后我们要自动的把下拉刷新的样式关闭掉要不然不好看wx.stopPullDownRefresh() },complete:res{//无论网络请求是否成功都要关闭loading样式wx.hideLoading()wx.hideNavigationBarLoading()}})},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {this.setData({//细节其实我们下拉刷新后应该先把页面清空再获取新的数据//只不过页面清空效果很快肉眼看不太出来listArr:[] })this.getData();},/*** 页面上拉触底事件的处理函数*/onReachBottom() {console.log(触底啦);wx.showNavigationBarLoading();this.getData();
},
res.data是网络请求完成后获取到的数组 let oldArr this.data.listArr; let newArr oldArr.concat(res.data)//调用concat()方法进行数组的拼接 console.log(res) this.setData({ listArr:newArr }) 3、wx.request的其他参数:
wx.request(Object object),默认是get请求 /*** 生命周期函数--监听页面加载*/onLoad(options) {this.getData();},getData(){wx.request({url:https://api.thecatapi.com/v1/images/search,method:get,data:{limit:2 //如果是字符串就要写上双引号},success:res{console.log(res);}})}, post请求 onLoad(options) {this.getData();},getData(){wx.request({url:http://jsonplaceholder.typicode.com/posts,header:{content-type:application/json,token:123456},method:post,data:{name:zhangfei飞,age:18},success:res{console.log(res);}})}, 案例1POST请求获取
接口URL:POST https://tea.qingnian8.com/demoArt/getContent-Type: application/json wxml: view classoutveiw classfrominput type text model:value{{iptValue}} placeholder请输入用户名 bindconfirmonSubmit/ !--bindconfirm:回车触发此事件--/veiwview classrow wx:for{{listArr}} wx:key_idview classusername用户名{{item.title}}/viewview classtime时间{{item.posttime}}/view/view/view
wxss
.out{padding:30rpx;border: red solid 9rpx;
}
.out .row{padding:15rpx;border-bottom: 2px solid #ccc;
} .js:
Page({/*** 页面的初始数据*/data: {iptValue:},onSubmit(){console.log(this.data.iptValue);},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getData();},getData(){wx.request({url: https://tea.qingnian8.com/demoArt/get,method:POST,header:{Content-Type:application/json},data:{num:3,page:1},success:res{console.log(res);}})}, 案例2 POST 请求新增
接口URL:POST https://tea.qingnian8.com/demoArt/addContent-Type: application/json
