美文网首页
SwiftUI的 上拉加载,下拉刷新 ScrollView

SwiftUI的 上拉加载,下拉刷新 ScrollView

作者: 激动的厨师 | 来源:发表于2023-03-08 17:16 被阅读0次
z6841-364db.gif

因为没有在网上找到合适的组件,就自己做了一个。
部分代码:

ZStack(alignment: .top) {
            VStack(spacing:0) {
                //这里如果是加载状态显示 loading
                Color.clear.frame(height: refreshAbleVM.progressViewCurrHight > refreshAbleVM.topRefreshH ? refreshAbleVM.progressViewCurrHight - refreshAbleVM.topRefreshH : 0)
                HStack {
                    if refreshAbleVM.state == .loading{
                        ProgressView()
                            .frame(height:refreshAbleVM.topRefreshH - 10)
                    }else if refreshAbleVM.state != .normal{
                        Image(systemName: "arrow.down")
                            .frame(height: refreshAbleVM.topRefreshH - 10)
                                .rotationEffect(.init(degrees: refreshAbleVM.pullDownMid ? 180 : 0))
                        Text(refreshAbleVM.pullDownMid ? "松开立即刷新" : "下拉可以刷新").animation(.none)
                    }
                }
                
                
                Spacer()
            }
                
            ScrollView{
                //这里读取顶部偏移量
                VStack(spacing:0) {
                    GeometryReader{ proxy -> AnyView in
                        DispatchQueue.main.async{
                            //这里不知道为什么 不能用 vm里面的变量,用了会不停的调用 不知道为什么??
                            arrowFrame = proxy.frame(in: .global)
                        }
                        return AnyView(Color.clear)
                    }.frame(height: 0)
                    
                    content()
                    
                    LazyVStack(spacing:0){
                        HStack {
                            if refreshAbleVM.state == .bottomLoading{
                                ProgressView()
                                    .frame(height:refreshAbleVM.bottomRefreshH - 10)
                            }else{
                                if refreshAbleVM.state != .noMoreData {
                                    Image(systemName: "arrow.up")
                                        .frame(height: refreshAbleVM.topRefreshH - 10)
                                            .rotationEffect(.init(degrees: refreshAbleVM.pullUpMid ? 180 : 0))
                                }
                                Text(refreshAbleVM.state == .noMoreData ? "我也是有底线的~" : refreshAbleVM.pullUpMid ? "松开立即加载数据" : "上拉加载更多数据")
                                    .animation(.none)
                                    .overlay {
                                        GeometryReader{ bproxy -> AnyView in
                                            DispatchQueue.main.async{
                                                arrowBottomFrame = bproxy.frame(in: .global)
                                            }
                                            return AnyView(Color.clear)
                                        }.frame(height:refreshAbleVM.bottomRefreshH - 10)
                                    }
                                    
                            }
                        }
                        .opacity(refreshAbleVM.state == .loading ? 0 : 1)
                        .onAppear{
                            if refreshAbleVM.state == .normal{
                                refreshAbleVM.state = .bottomLoading
                            }
                        }
                        
                    }
                }
            }

还有一个问题,有点疑问。就是GeometryReader 的闭包内如果给 VModel里变量赋值,就会不停的调用闭包代码。但是我用了

@State private var arrowFrame = CGRect.zero

然后再赋值

GeometryReader{ proxy -> AnyView in
                        DispatchQueue.main.async{
                            //这里不知道为什么 不能用 vm里面的变量,用了会不停的调用 不知道为什么??
                            arrowFrame = proxy.frame(in: .global)
                        }
                        return AnyView(Color.clear)
                    }.frame(height: 0)

这里代码就不会重复调用。按理说GeometryReader 闭包只会在滚动时调用的,如果给VM赋值,不滚动也在不停的赋值。如果有大佬知道可以告诉我。目前只能用@ State 属性,然后用onChange 监听了。

相关文章

网友评论

      本文标题:SwiftUI的 上拉加载,下拉刷新 ScrollView

      本文链接:https://www.haomeiwen.com/subject/zkeoldtx.html