SwipeRefreshLayout 设置下拉刷新的距离高度

SwipeRefreshLayout 的下拉刷新距离比较短,有的时候,想要手动设置它的下拉刷新高度,如何解决呢?在网上找了好一会,居然没搜到比较满意的答复,好些都是复制粘贴。于是乎,求人不如求己,拿出API文档,大概看了下,发现了三个相关API:

相关API

一、setProgressViewEndTarget方法

setProgressViewEndTarget (boolean scale, int end)方法有两个参数,
参数scale设置为true,则下拉过程,会自动缩放;参数end是下拉刷新的高度,也就是我们需要的参数,通过改变它的值,就能改变下拉刷新高度。

  • setProgressViewEndTarget (false,50)的效果图

  • setProgressViewEndTarget (false,100)的效果图

  • setProgressViewEndTarget (true,100)的效果图

二、setProgressViewOffset方法

setProgressViewOffset(boolean scale, int start, int end)
scale设置为true,则下拉过程,控件会自动缩放;参数start是下拉刷新控件的起始位置,参数end是下拉刷新的最大高度;通过改变start和end的值,就能改变下拉刷的具体位置和高度。

  • swipeRefreshLayout.setProgressViewOffset(false,0,100)的效果图

  • swipeRefreshLayout.setProgressViewOffset(false,100,200)的效果图

三、setDistanceToTriggerSync方法

这个方法主要是用来设置手指在屏幕下拉多少距离才会触发SwipeRefreshLayout控件的刷新动画效果;setDistanceToTriggerSync(int distance)参数的distance就是手指下拉的具体高度值。查看SwipeRefreshLayout的源码我们会发现如下代码:

/**
 * Set the distance to trigger a sync in dips
 *
 * @param distance
 */
public void setDistanceToTriggerSync(int distance) {
    mTotalDragDistance = distance;
}

setDistanceToTriggerSync方法最终是把具体高度distance赋值给了mTotalDragDistance ,该变量的单词意思是 总的拖拽距离 ,也就是我们所说触发刷新动画时手指需要下拉的距离。

//默认触发动画的下拉距离
private static final int DEFAULT_CIRCLE_TARGET = 64;

mSpinnerFinalOffset = DEFAULT_CIRCLE_TARGET * metrics.density;
mTotalDragDistance = mSpinnerFinalOffset;

继续看源码,我们会发现,mTotalDragDistance默认等于mSpinnerFinalOffset,而mSpinnerFinalOffset等于64乘以当前分辨率值,也就是说,默认情况下,要触发下拉刷新动画效果,手指下拉距离为64dp。

OK,要说的也就这么多了,利用这三个方法,就可以方便的设置SwipeRefreshLayout 的下拉刷新的距离,和刷新动画所在的位置了!

  • 8
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uni-app提供了多种下拉刷新样式供开发者选择。其中,mescroll的uni版本是专门用在uni-app的下拉刷新和上拉加载的组件,支持一套代码编译到iOS、Android、H5、小程序等多个平台,是一个比较完善且实用的框架,推荐使用。 在uni-app中,设置下拉刷新样式需要在页面的配置文件中进行设置。可以通过以下步骤来设置: 1. 在页面的配置文件中引入下拉刷新相关的组件和方法,可以使用以下代码引入: ```js import { onPullDownRefresh } from '@dcloudio/uni-app' ``` 2. 监听页面上的下拉动作,并执行相应的操作。可以使用以下代码监听下拉刷新: ```js onPullDownRefresh(() => { // 需要刷新的接口或操作 getRankList() // 结束刷新 uni.stopPullDownRefresh() }) ``` 3. 在配置文件中,设置下拉刷新的样式。可以使用以下代码设置样式: ```json { "path": "pages/index/index", "style": { "pullToRefresh": { "support": true, "style": "default", "contentdown": { "caption": "下拉刷新" }, "contentover": { "caption": "松开刷新" }, "contentrefresh": { "caption": "正在刷新" } } } } ``` 其中,`"style"`字段可以设置为不同的样式,比如`"default"`表示经典下拉刷新样式,`"circle"`表示圆圈样式。可以根据需要选择相应的样式来设置下拉刷新的外观。 通过上述步骤,你可以在uni-app中设置下拉刷新的样式。希望对你有所帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [uniapp几种实现下拉刷新的方式](https://blog.csdn.net/C1091045324/article/details/128000726)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [uniapp 实现下拉刷新功能](https://blog.csdn.net/weixin_63382268/article/details/129162904)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值