webView 加载图片

来源：互联网发布：天下三捏脸数据女bx 编辑：程序博客网时间：2024/06/04 01:23

在移动端的开发中，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即可。

阅读全文

0 0