uniapp如何开启上下拉

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

uniapp如何开启上下拉

uniapp开启上下拉的方法:1、在pages.json中开启下拉刷新;2、在每次上拉时往数组中多扔一组数据,语句如“onReachBottom(){let that=this...}”。

本教程操作环境:windows7系统、uni-app2.5.1版本,Dell G3电脑。

推荐(免费):uni-app开发教程

uniapp实现上拉加载和下拉刷新

下拉刷新onPullDownRefresh

需要先在pages.json中开启下拉刷新

//在pages.json中找到需要开启的页面. 在style中输入"enablePullDownRefresh": true,
登录后复制

开启下拉刷新之后, 下拉对应的页面就会出现下拉的动画, 但是动画不会自动关闭, 所以手动关闭

onPullDownRefresh () {    //刷新初始化数据    this.size = 10    this.current = 1     //调用获取数据的函数    this.getData()     //关闭刷新动画    setTimeout(function () {        uni.stopPullDownRefresh()     }, 1000)},
登录后复制

上拉加载 onReachBottom

每次上拉时往数组中多扔一组数据

const SIZE = 10data(){return {size: 10,current: 1}}//上拉加载函数onReachBottom(){    let that = this    //每次上拉加载的数据比上一次多十个    that.size += SIZE    setTimeout(()=>{        that.getData()    },1000)}
登录后复制

以上就是uniapp如何开启上下拉的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。

作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:jquery怎样实现点击显示点击其他地方隐藏
下一篇:css兼容写法

发表评论

关闭广告
关闭广告