swift 中详情页 使用 Flex 的布局

项目需求


根据上面的页面需求,我们可以知道使用原生来写布局效果并不是很好,因为其中牵扯着webview的自适应内容高度,这个在安卓端,用scrollview+webview就可以实现。但是在iOS端只能在wenviewdidload 后 获得webview的内容高度。但是这样做,我们不能找到一个合适的webview的预设值(高度)。在加载的时候,高度的改变就很突兀。所以我们干脆就全部使用html+css+js来写这个布局。

项目代码

html实现效果代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0",user-scalable=no>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Titletitle>
    <style>
   html{
     font-size: 100px;
     font-size: calc(1000vw/37.5);
     width: 100%;
    }
  body{
      margin: 0px;
      padding: 0px;
      font-family: "PingFang HK";
  }

.list_item{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction:column;/*布局内主轴垂直*/
    font-size: .15rem;
    padding: .15rem;

}
.list_item .top{
     display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction:row;/*布局内主轴水平*/
    justify-content: space-between;/*两端对齐,项目之间的间隔都相等*/
    align-items:center;
}

.list_item .top .top_left{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction:row;/*布局内主轴水平*/
    align-items:center;

}


.list_item .top .top_left .top_left_text{
    margin-left: .1rem;

}

.list_item .top .top_left img{
   width: .5rem;
   height: .5rem;
}



    style>


head>
<body>


    <video src="https://ojhu910up.qnssl.com/o_1bcepsdns1qa21r6ovq51tq7a2f7.mp4"
          onclick="playVideo()"
           controls = "controls"
           width="100%"
           height=auto
    >
        您的浏览器不支持 video 标签。
    video>



<div class="list_item">
    <div class="top">
        <div class="top_left">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=842607178,51016450&fm=27&gp=0.jpg">
            <span class="top_left_text">永远的灰色span>
        div>
        <div class="top_right">2017.09.30 10:30div>
    div>

    <div class="bottom">
              这里就是放内容的文本得我暗示法大是大非啊打发这里就是放内容的文本得我暗示法大是大非啊打发这里就是放内容的文
        本得我暗示法大是大非啊打发这里就是放内容的文本得我暗示法大是大非啊打发这里就是放内容的文本得我暗示法大是大非啊打
        发这里就是放内容的文本得我暗示法大是大非啊打发
    div>
div>


    <div class="list_item">
        <div class="top">
            <div class="top_left">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=842607178,51016450&fm=27&gp=0.jpg">
                <span class="top_left_text">永远的灰色span>
            div>
            <div class="top_right">2017.09.30 10:30div>
        div>

        <div class="bottom">
                  这里就是放内容的文本得我暗示法大是大非啊打发这里就是放内容的文本得我暗示法大是大非啊打发这里就是放内容的文
            本得我暗示法大是大非啊打发这里就是放内容的文本得我暗示法大是大非啊打发这里就是放内容的文本得我暗示法大是大非啊打
            发这里就是放内容的文本得我暗示法大是大非啊打发
        div>
    div>





    <div class="list_item">
        <div class="top">
            <div class="top_left">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=842607178,51016450&fm=27&gp=0.jpg">
                <span class="top_left_text">永远的灰色span>
            div>
            <div class="top_right">2017.09.30 10:30div>
        div>

        <div class="bottom">
                  这里就是放内容的文本得我暗示法大是大非啊打发这里就是放内容的文本得我暗示法大是大非啊打发这里就是放内容的文
            本得我暗示法大是大非啊打发这里就是放内容的文本得我暗示法大是大非啊打发这里就是放内容的文本得我暗示法大是大非啊打
            发这里就是放内容的文本得我暗示法大是大非啊打发
        div>
    div>



<script>
    function playVideo() {
//      alert('232323')
        document.getElementsByTagName('video')[0].play()

    }

script>

body>
html>
iOS实现效果代码
extension FieldDetailVC{
    fileprivate func setupUI(){

        self.rootLayout.addSubview(self.webView);
        let url = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3658903854,3510600132&fm=27&gp=0.jpg"

        let styleUrl = Bundle.main.path(forResource: "fieldDetail", ofType: "css");
        let styleCss  =  try! String(contentsOfFile: styleUrl!, encoding: String.Encoding.utf8);
        let style = "<style>\(styleCss)style>"

        let image_div = "<img src=\(url) alt= \"\" >"
        //仿数组拼接数据
       let body = image_div + self.addDivItem(iconImage: "http://2boss.oss-cn-hangzhou.aliyuncs.com/test/default.png", name: "永远的灰色", time: "2017.09.15 10:10", content: "阿萨德冷风机阿斯利康埃里克森京东方拉克丝接待来访就爱上了都快放假阿拉山口大姐夫wqqerqwerqwe") + self.addDivItem(iconImage: "http://2boss.oss-cn-hangzhou.aliyuncs.com/test/default.png", name: "永远的灰色", time: "2017.09.15 10:10", content: "阿萨德冷风机阿斯利康埃里克森京东方拉克丝接待来访就爱上了都快放假阿拉山口大姐夫wqqerqwerqwe")

        let html = self.getHtml(head: style, body: body);


        self.webView.loadHTMLString(html, baseURL: nil);


    }

    func getHtml(head:String,body:String)->String{

    let html = "<html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"><meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\(head)head><body>\(body)body>html>"

    return html;

    }

    func addDivItem(iconImage:String,name:String,time:String,content:String)->String{

        let item_div = " <div class=\"list_item\"><div class=\"top\"><span class=\"left\"><img src=\(iconImage) alt=\"\"><span class=\"name\">\(name)span>span><span class=\"right\">\(time)span>div><div class=\"bottom\">    \(content)div>div>div>"

        return item_div;
    }




}
extension BaseWebView:WKNavigationDelegate,WKUIDelegate{

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

        webView.evaluateJavaScript("document.body.scrollHeight") { (value, error) in

    //刷新webview的高度,达到自适应的效果。
          self.tg_height.equal(CGFloat(value as! CGFloat))
        }
//        debugPrint(webView)

    }




}

参考链接:Flex 布局教程

你可能感兴趣的:(H5,Swift)