美文网首页SwiftUI实战
SwiftUI实战-轮播图

SwiftUI实战-轮播图

作者: ISwiftUI | 来源:发表于2022-05-09 06:38 被阅读0次

    无限轮播图

    轮播图.gif

    相关源码:
    ContentView.swift

    import SwiftUI
    
    struct ContentView: View {
        
        @State var imagesName = ["12345", "67891"]
        @State var images = ["12345", "67891"]
        @State var currentIndex: Int = 0
        
        var body: some View {
            VStack {
                
                ZStack(alignment: .bottom) {
                    CustomLoopView.init(urls: images, currentIndex: $currentIndex)
                    
                    HStack(alignment: .center, spacing: 6) {
                      ForEach(0..<imagesName.count, id:\.self ) { index in
                        let isCurrentIndex = index == currentIndex
                        Color(isCurrentIndex ? .systemBlue : .white).cornerRadius(2).frame(width: isCurrentIndex ? 10 : 4, height: 4)
                      }
                    }
                    .frame(height: 20)
                }
                Spacer()
            }.onAppear {
                images = [imagesName.last!] + images + [imagesName.first!]
            }
        }
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
    

    CustomLoopView.swift

    相关文章

      网友评论

        本文标题:SwiftUI实战-轮播图

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