美文网首页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