Springboot 二叉树排序 bam parsing ipad sharepoint highcharts interface cassandra linktosql jquery获取dom对象 springboot单点登录 cmd查看mysql版本 bootstrap文件上传样式 spark算法 js教程文档 java不定长数组 重置hosts python的数据类型 pythonfor循环 python参数 python条件判断 python自学教材 python中集合 java环境 stringjava java实现接口 java查看版本 linuxgrep cfqq网吧任务 手机知识 催眠魔蛙 win10有几个版本 maya2016教程 js倒计时 视频加文字用什么软件 lol卡米尔 语音分析软件 压枪软件 cf小号
当前位置: 首页 > 学习教程  > 编程语言

小程序onPullDownRefresh下拉刷新时提高用户体验的技巧

2020/12/28 18:41:31 文章标签:

1、在page.json文件中开启下拉刷新设置 {"pages" : [{"path" : "pages/index/index","style" : {"enablePullDownRefresh" : true // 开启单页面下拉刷新功能}} ,... 2、在index.vue页面中监听刷新 onPullDownRefr…

1、在page.json文件中开启下拉刷新设置

{
    "pages" : [
        {
            "path" : "pages/index/index",
            "style" : {
                "enablePullDownRefresh" : true // 开启单页面下拉刷新功能
            }
        } ,
        ...        
    

2、在index.vue页面中监听刷新

onPullDownRefresh() {
	this.refresh();
},

3、为提升用户在下拉刷新时的体验,可以考虑如下方法

  • uni.showLoading()     显示带遮罩的提示框,这样在加载数据的时候点击页面不会触发其他操作
  • uni.showNavigationBarLoading()     显示导航条加载动画
  • uni.stopPullDownRefresh()      数据响应后,停止当前页面下拉刷新
refresh() {
	// 1 遮罩提示框
	uni.showLoading({
		mask: true
	});
    // 2 显示加载进度
	uni.showNavigationBarLoading();

    // 3 请求后端
    uni.request({
		url: this.serverUrl + '/list',
		method: "POST",
        ...
        success: (res) => {
            ...
        },
        complete: () => {
            // 4 不管接口成功与否,隐藏操作
			uni.hideNavigationBarLoading();
			uni.hideLoading();
			uni.stopPullDownRefresh();
        }
    });

 


本文链接: http://www.dtmao.cc/news_show_550082.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?