仿ios下拉刷新页面

/**
 * @date:2020/9/9
 * @author:dongxiaogang
 * @description:
 */
public class MyScrollview extends ScrollView {
    private View innerView;
    private float y;
    private Rect normal = new Rect();
    private boolean animationFinish = true;

    public MyScrollview(Context context) {
        super(context, null);
    }

    public MyScrollview(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyScrollview(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onFinishInflate() {
        int childCount = getChildCount();
        if (childCount > 0) {
            innerView = getChildAt(0);
        }
        super.onFinishInflate();
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (innerView == null) {
            return super.onTouchEvent(ev);
        } else {
            commonTouchEvent(ev);
        }
        return super.onTouchEvent(ev);
    }

    /**
     * 自定义Touch事件
     *
     * @author:dongxiaogang
     * create at 2020/9/10 13:40
     */
    private void commonTouchEvent(MotionEvent ev) {
        if (animationFinish) {
            int action = ev.getAction();
            switch (action) {
                case MotionEvent.ACTION_DOWN:
                    y = ev.getY();
                    break;
                case MotionEvent.ACTION_MOVE:
                    float preY = y == 0 ? ev.getY() : y;
                    float nowY = ev.getY();
                    int detailY = (int) (preY - nowY);
                    y = nowY;
                    if (isNeedMove()) {
                        if (normal.isEmpty()) {
                            normal.set(innerView.getLeft(), innerView.getTop(), innerView.getRight(), innerView.getBottom());
                        }
                        innerView.layout(innerView.getLeft(), innerView.getTop() - detailY / 2, innerView.getRight(), innerView.getBottom() - detailY / 2);
                    }
                    break;
                case MotionEvent.ACTION_UP:
                    y = 0;
                    //布局回到原来的位置
                    if (isNeedAnimation()) {
                        animation();
                    }
                    break;

            }
        }
    }

    private void animation() {
        TranslateAnimation ta = new TranslateAnimation(0, 0, 0, normal.top - innerView.getTop());
        ta.setDuration(200);
        ta.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                animationFinish = false;
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                innerView.clearAnimation();
                innerView.layout(normal.left, normal.top, normal.right, normal.bottom);
                normal.setEmpty();
                animationFinish = true;
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        innerView.startAnimation(ta);
    }

    /**
     * 是否需要回滚
     *
     * @author:dongxiaogang 187188534@qq.com
     * create at 2020/9/10 14:10
     */
    private boolean isNeedAnimation() {
        return !normal.isEmpty();
    }

    /**
     * 布局是否需要移动
     *
     * @author:dongxiaogang 187188534@qq.com
     * create at 2020/9/10 14:06
     */
    private boolean isNeedMove() {
        int offset = innerView.getMeasuredHeight() - getHeight();
        int scrollY = getScrollY();
        if (scrollY == 0 || scrollY == offset) {
            return true;
        }
        return false;
    }
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Uniapp 是一个基于 Vue.js 的跨平台框架,可以用它来开发 Web、iOS、Android 等多个平台的应用。而仿微信聊天下拉刷新则是一种常见的 UI 效果,当用户下拉聊天记录时,页面会出现下拉刷新的效果,以展示最新的聊天记录。 在 Uniapp 中实现仿微信聊天下拉刷新,可以通过使用下拉刷新组件来完成。首先,在需要实现下拉刷新的页面中引入 uni-app 组件库,然后在该页面的 template 中添加下拉刷新组件,示例代码如下: ```html <template> <view> <scroll-view scroll-y="true" class="chat-scrollview" :style="{height:chatScrollHeight}"> <!-- 聊天记录列表 --> <view class="chat-list"> ... </view> </scroll-view> <!-- 下拉刷新组件 --> <uni-scroll-view refresher-enabled :refresher-threshold="80" @refresherrefresh="onRefresh"> <view slot="refresher" class="uni-refresher"> <i class="uni-icons" :class="{'uni-loading':isRefreshing}"></i> <span v-if="isRefreshing">正在刷新...</span> <span v-else>下拉刷新</span> </view> </uni-scroll-view> </view> </template> <script> import uniScrollView from '@/components/uni-scroll-view/uni-scroll-view.vue' export default { components: { uniScrollView }, data() { return { chatScrollHeight: '100vh', isRefreshing: false } }, methods: { onRefresh() { // 下拉刷新回调函数 this.isRefreshing = true; setTimeout(() => { this.isRefreshing = false; }, 2000); } } } </script> <style lang="scss"> .chat-scrollview { height: calc(100vh - 100rpx); } .uni-refresher { display: flex; align-items: center; justify-content: center; height: 80rpx; color: #999; font-size: 28rpx; line-height: 1; } </style> ``` 在这段代码中,我们使用了 uni-app 自带的 `uni-scroll-view` 组件作为下拉刷新组件,并设置了 `refresher-enabled` 属性为 true,表示开启下拉刷新功能。同时,我们在组件中设置了 `refresher-threshold` 属性为 80,表示下拉超过 80rpx 才会触发下拉刷新的回调函数 `onRefresh`。当用户下拉到阈值时,会触发 `@refresherrefresh` 事件,我们在这个事件中执行下拉刷新的逻辑。在代码中,我们设置了一个 `isRefreshing` 变量来控制刷新状态,当 `isRefreshing` 为 true 时,显示“正在刷新...”文本和 loading 图标,当 `isRefreshing` 为 false 时,显示“下拉刷新”文本。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值