iOS：如何通过 HTML 字符串 Swift 在 WkWebView 中显示手风琴

Question

我需要像这样从来自 API 响应的 html 字符串中在 WKWebView 中显示手风琴。我已经在 SO 中尝试了很多解决方案来做到这一点，但仍然无法创建它，请分享一些解决方案或代码以按预期显示它。我正在分享我的代码

let fullDesc = responseDict?["description_middle"]?.string ?? ""
                    let htmlString:String! = fullDesc //(postDict?["description"]!.stringValue ?? "")
                    
                    //self.detailWeb.customUserAgent = "Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10136"

                    
                    self.detailWeb.loadHTMLString("<html><body><style>p{align-items:justify;justify-content:justify} h1, h2, h3, h4, h5, h6{font-size:20px; font-weight:bold;} </style><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0,Proxima Nova-Regular\">\(htmlString!)</body></html>", baseURL: nil)

这是我从响应中得到的 html 字符串

"description_middle": "{\"ac_title\":[\"When Should I take this Service?\",\"What benefits will I get by taking this onsite styling consultation service?\",\"Can I select a Fashion Stylist of my choice for this consultation?\",\"What Happens after I make the Payment?\"],\"ac_description\":[\"<p>You should take this Wardrobe Consultation Service if you are facing any of the following situations:<\\/p>\\r\\n\\r\\n<ul>\\r\\n\\t<li>You are struggling to find clothes that fit and flatter your body type<\\/li>\\r\\n\\t<li>You have a big event coming up and need help putting together the perfect outfit<\\/li>\\r\\n\\t<li>you want to update your professional image and make a great first impression<\\/li>\\r\\n\\t<li>you have a closet full of clothes but nothing to wear<\\/li>\\r\\n\\t<li>you want to build a sustainable wardrobe that is both stylish and environmentally friendly<\\/li>\\r\\n<\\/ul>\\r\\n\",\"<p>Taking a Wardrobe Consultation Service brings you several benefits. Some of those benefits are given below:<\\/p>\\r\\n\\r\\n<ul>\\r\\n\\t<li>Time and Convenience:&nbsp;A personal stylist saves your time and effort by doing the shopping, research and curating outfits for you, freeing up your own time to focus on other things.<\\/li>\\r\\n\\t<li>Increased Confidence:&nbsp;A stylist can help you develop your personal style, which can lead to increased confidence in your appearance and self-esteem.<\\/li>\\r\\n\\t<li>Expertise:&nbsp;Personal stylists have expertise in fashion, body shapes, color analysis and current trends, allowing you to benefit from their professional knowledge and advice.<\\/li>\\r\\n\\t<li>Maximizing Wardrobe:&nbsp;A stylist can help you to get the most out of your existing wardrobe, by creating new outfits and suggesting key pieces to purchase, making the most of your investment.<\\/li>\\r\\n\\t<li>Cost Savings:&nbsp;By investing in a personal stylist, you may save money in the long run by avoiding costly fashion mistakes, and making informed purchases that add value to your wardrobe.<\\/li>\\r\\n<\\/ul>\\r\\n\",\"<p>We would be introducing this feature in future. Until then, StyleBuddy will assign you the best available stylist at the time of your booking.<\\/p>\\r\\n\",\"<p>Our Client Support Team will reach out to you to initiate your service sessions. You will be asked to update a Client Information Form, which is required for the Stylist to prepare for your Service. You can also call or WhatsAPP us on&nbsp;+91-00&nbsp;to enquire about&nbsp;your appointment. This service is available from 10 AM to 7 PM India time except on Sundays.<\\/p>\\r\\n\"]}"

Answer 1

根据我的理解，您已经解析了响应并希望以手风琴的形式显示响应。这可以使用

<details>

和

<summary>

标签轻松完成。

这里有一段代码供参考：

import UIKit
import WebKit

// Hardcoded response as a dictionary
let descriptionMiddle: [String: Any] = [
    "ac_title": [
        "When Should I take this Service?",
        "What benefits will I get by taking this onsite styling consultation service?",
        "Can I select a Fashion Stylist of my choice for this consultation?",
        "What Happens after I make the Payment?"
    ],
    "ac_description": [
        "<p>You should take this Wardrobe Consultation Service if you are facing any of the following situations:</p>\r\n\r\n<ul>\r\n\t<li>You are struggling to find clothes that fit and flatter your body type</li>\r\n\t<li>You have a big event coming up and need help putting together the perfect outfit</li>\r\n\t<li>you want to update your professional image and make a great first impression</li>\r\n\t<li>you have a closet full of clothes but nothing to wear</li>\r\n\t<li>you want to build a sustainable wardrobe that is both stylish and environmentally friendly</li>\r\n</ul>\r\n",
        "<p>Taking a Wardrobe Consultation Service brings you several benefits. Some of those benefits are given below:</p>\r\n\r\n<ul>\r\n\t<li>Time and Convenience:&nbsp;A personal stylist saves your time and effort by doing the shopping, research and curating outfits for you, freeing up your own time to focus on other things.</li>\r\n\t<li>Increased Confidence:&nbsp;A stylist can help you develop your personal style, which can lead to increased confidence in your appearance and self-esteem.</li>\r\n\t<li>Expertise:&nbsp;Personal stylists have expertise in fashion, body shapes, color analysis and current trends, allowing you to benefit from their professional knowledge and advice.</li>\r\n\t<li>Maximizing Wardrobe:&nbsp;A stylist can help you to get the most out of your existing wardrobe, by creating new outfits and suggesting key pieces to purchase, making the most of your investment.</li>\r\n\t<li>Cost Savings:&nbsp;By investing in a personal stylist, you may save money in the long run by avoiding costly fashion mistakes, and making informed purchases that add value to your wardrobe.</li>\r\n</ul>\r\n",
        "<p>We would be introducing this feature in the future. Until then, StyleBuddy will assign you the best available stylist at the time of your booking.</p>\r\n",
        "<p>Our Client Support Team will reach out to you to initiate your service sessions. You will be asked to update a Client Information Form, which is required for the Stylist to prepare for your Service. You can also call or WhatsApp us on&nbsp;+91-00&nbsp;to inquire about&nbsp;your appointment. This service is available from 10 AM to 7 PM India time except on Sundays.</p>\r\n"
    ]
]


class ViewController: UIViewController, WKNavigationDelegate {
    private var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Create a WKWebView instance
        webView = WKWebView(frame: view.bounds)
        webView.navigationDelegate = self
        view.addSubview(webView)

        // Load the HTML content
        loadAccordionHTML()
    }

    private func loadAccordionHTML() {
        let titles = descriptionMiddle["ac_title"] as? [String] ?? []
        let descriptions = descriptionMiddle["ac_description"] as? [String] ?? []
        
        var accordion = ""
        for i in 1..<titles.count {
            accordion += """
            <details>
              <summary>\(titles[i])</summary>
              <p>\(descriptions[i])</p>
            </details>
            """
        }
        
        // Please update / stylize the html content as needed.
        let htmlString = "<div> \(accordion) </div>"
        webView.loadHTMLString(htmlString, baseURL: nil)
    }
}

附加参考资料：

iOS：如何通过 HTML 字符串 Swift 在 WkWebView 中显示手风琴

问题描述投票：0回答：1

1个回答

最新问题

iOS：如何通过 HTML 字符串 Swift 在 WkWebView 中显示手风琴

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1