韩国设计app网站有哪些,WordPress评论博主,网站商城系统,合肥企业建站程序文章目录 1.onPullDownRefresh2.onReachBottom 1.onPullDownRefresh
在 js 中定义 onPullDownRefresh 处理函数#xff08;和onLoad等生命周期函数同级#xff09;#xff0c;监听该页面用户下拉刷新事件。
需要在 pages.json 里#xff0c;找到的当前页面的pages节点和onLoad等生命周期函数同级监听该页面用户下拉刷新事件。
需要在 pages.json 里找到的当前页面的pages节点并在 style 选项中开启 enablePullDownRefresh。当处理完数据刷新后uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。
#uni.startPullDownRefresh(OBJECT)
开始下拉刷新调用后触发下拉刷新动画效果与用户手动下拉刷新一致。
OBJECT 参数说明
参数名类型必填说明successFunction否接口调用成功的回调failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
success 返回参数说明
参数类型说明errMsgString接口调用结果
使用示例
view v-foritem in list{{item}}/view
button clickpulldown手动点击/buttononPullDownRefresh() {console.log(触发了下拉刷新);setTimeout(() {this.list [前端, java, 测试, 大数据, UI]uni.stopPullDownRefresh();}, 2000)}methods: {pulldown() {//点击按钮下拉刷新uni.startPullDownRefresh();}}#uni.stopPullDownRefresh()
停止当前页面下拉刷新。
示例
pages.json
{pages: [{path: pages/index/index,style: {navigationBarTitleText: uni-app,enablePullDownRefresh: true}}],globalStyle: {navigationBarTextStyle: white,navigationBarBackgroundColor: #0faeff,backgroundColor: #fbf9fe}
}index.vue
// 仅做示例实际开发中延时根据需求来使用。
export default {data() {return {text: uni-app}},onLoad: function (options) {setTimeout(function () {console.log(start pulldown);}, 1000);uni.startPullDownRefresh();},onPullDownRefresh() {console.log(refresh);setTimeout(function () {uni.stopPullDownRefresh();}, 1000);}
}注意
支付宝小程序startPullDownRefresh在开发者工具里会提示暂未开放请勿使用支付宝小程序startPullDownRefresh请使用真机调试非真机预览后续支付宝小程序开发工具更新可能会有所修改
#FAQ
Q如何暂时禁用掉下拉刷新待需要的时候再重新开启 AApp 平台下可以处理此类场景详细参考uni-app 中实现动态禁用/开启下拉刷新
Q自定义title如何让下拉刷新在title之下 AApp和H5端使用circle方式的下拉刷新设offset在title高度之下。hello uni-app的模板-导航栏中有示例。小程序端无法实现除非放弃原生下拉刷新自己模拟下拉刷新插件市场有类似插件但性能不如原生下拉刷新。
Q如何自定义下拉刷新样式 A小程序端的原生下拉刷新样式是固定的App端原生的下拉刷新有2种样式可选择下拉漏出雪花和下拉circle圈。如果使用nvue可以使用refresh组件自定义下拉刷新都是原生渲染。如果想使用scroll-view在前端实现自定义下拉刷新需要注意列表不可太长和太复杂否则会有性能问题。插件市场搜索下拉刷新有示例。
2.onReachBottom
可在pages.json里定义具体页面底部的触发距离onReachBottomDistance
比如设为50那么滚动页面到距离底部50px时就会触发onReachBottom事件。
如使用scroll-view导致页面没有滚动则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档。
示例代码
Page.jsononReachBottomDistance: 10, 配置下拉触底的距离onReachBottom() {console.log(页面进行触底)
},
