webView 加载图片

最新推荐文章于 2022-07-29 15:54:28 发布

Micah_A

最新推荐文章于 2022-07-29 15:54:28 发布

阅读量566

点赞数

分类专栏： iOS H5 文章标签： ios webview 图片

本文链接：https://blog.csdn.net/lvchenqiang_/article/details/74231139

版权

iOS 同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

在移动端的开发中，iOS往往没有安卓、或者web布局那么方便，尤其是在处理图片的自适应、富文本编辑的内容。这个时候，我们就要学会曲线救国了，在iOS中开发中，用一些css写布局，会有意想不到的效果。

项目需求:

列表展示，每行存在多张图片,要求保持图片原比例显示,显示不下的可以左右滑动,后端返回数据的时候只给了图片路径。

这个如果用iOS的原生代码写会比较麻烦，但是如果我们使用webView加载富文本的内容，就会简单很多。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding:0;
        }

        .list_item{
            width: 100%;
            /*overflow-x: auto;*/
        }
       .list_item_images{
           white-space: nowrap;
           overflow-y: hidden;
       }
        .list_item .list_item_images img{
            height: 150px;
        }
    </style>

</head>
<body>


<div class="list_item">


    <div class="list_item_images">
        <img src="http://img3.imgtn.bdimg.com/it/u=756514221,687352746&fm=27&gp=0.jpg">
        <img src="http://img3.imgtn.bdimg.com/it/u=2191587396,2708070289&fm=27&gp=0.jpg">
        <img src="http://img1.imgtn.bdimg.com/it/u=4156650981,245553380&fm=11&gp=0.jpg">
        <img src="http://img5.imgtn.bdimg.com/it/u=631869149,2205942342&fm=27&gp=0.jpg">
    </div>




</div>


<div class="list_item">


    <div class="list_item_images">
     <img src="http://img3.imgtn.bdimg.com/it/u=2777302327,1198835636&fm=11&gp=0.jpg">
     <img src="http://img1.imgtn.bdimg.com/it/u=2129575300,484344759&fm=27&gp=0.jpg">
     <img src="http://img2.imgtn.bdimg.com/it/u=3766732230,80363282&fm=27&gp=0.jpg">
    </div>




</div>





<div class="list_item">


    <div class="list_item_images">
        <img src="http://img1.imgtn.bdimg.com/it/u=2129575300,484344759&fm=27&gp=0.jpg">
        <img src="http://img2.imgtn.bdimg.com/it/u=3766732230,80363282&fm=27&gp=0.jpg">
        <img src="http://img3.imgtn.bdimg.com/it/u=2191587396,2708070289&fm=27&gp=0.jpg">
        <img src="http://img1.imgtn.bdimg.com/it/u=4156650981,245553380&fm=11&gp=0.jpg">
        <img src="http://img5.imgtn.bdimg.com/it/u=631869149,2205942342&fm=27&gp=0.jpg">
        <img src="http://img3.imgtn.bdimg.com/it/u=756514221,687352746&fm=27&gp=0.jpg">
        <img src="http://img.kutoo8.com/upload/image/87603011/dn2013072710011_960x540.jpg">
    </div>




</div>

</body>
</html>

但是这是html的代码，我们不能直接使用，所以我们把这些代码转成string 使用webview加载string即可。