- 功能要求:數(shù)據(jù)庫(kù)返回HTML字符串狱意,使用webView加載式散。切webView不占一整頁(yè)植袍。
- 實(shí)現(xiàn)方法:底層scrollView伪很,上邊放一個(gè)tableView、一個(gè)webView奋单。
效果如下###
Simulator Screen Shot Sep 9, 2016, 9.15.18 AM.png
Simulator Screen Shot Sep 9, 2016, 9.16.09 AM.png
上代碼###
// scrollView的布局
self.scrollView = [[UIScrollView alloc]init];
// self.scrollView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:self.scrollView];
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.topView.mas_bottom).offset(0);
make.left.right.equalTo(self.view).offset(0);
make.bottom.equalTo(self.view).offset(0);
}];
// tableView和webView布局
self.tableView = [[UITableView alloc]initWithFrame:CGRectZero style:UITableViewStylePlain];
self.tableView.delegate = self;
self.tableView.dataSource = self;
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
// self.tableView.backgroundColor = [UIColor cyanColor];
[self.scrollView addSubview:self.tableView];
[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.scrollView).offset(0);
make.left.right.equalTo(self.view).offset(0);
// make.bottom.equalTo(self.view).offset(0);
make.height.mas_equalTo(230);
}];
// self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(requestData)];
UILabel *label = [UILabel new];
// label.backgroundColor = [UIColor blueColor];
label.textColor = RGBCOLOR(255, 102, 1);
label.font = [UIFont systemFontOfSize:17];
[self.scrollView addSubview:label];
[label mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(self.scrollView).offset(0);
make.top.equalTo(self.tableView.mas_bottom).offset(10);
make.height.mas_equalTo(30);
}];
label.text = @"活動(dòng)詳情";
self.myWebView = [[UIWebView alloc]init];
// self.myWebView.backgroundColor = [UIColor redColor];
[self.scrollView addSubview:self.myWebView];
self.myWebView.delegate = self;
[self.myWebView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(self.view).offset(0);
make.top.equalTo(label.mas_bottom).offset(5);
make.height.mas_equalTo(k_height-320);
}];
加載的HTML字符串?dāng)?shù)據(jù)###
<p><strong>擬定行程:</strong></p><p><strong>第 1天</strong></p><p><strong>酒店管家長(zhǎng)水國(guó)際機(jī)場(chǎng)接機(jī)</strong></p><p><strong>15:00 抵達(dá)昆明柏聯(lián)酒店(少數(shù)民族歡迎儀式)</strong></p><p><strong>15:30 參觀整個(gè)酒店</strong></p><p><strong>16:30 中醫(yī)經(jīng)絡(luò)檢測(cè)</strong></p><p><strong>18:00 酒店柏聯(lián)軒餐廳晚餐:云南特色石鍋過橋米線</strong></p><p><strong>20:00 精油花瓣泡浴</strong></p><p><strong>21:00 柏聯(lián)特色療程(90分鐘)</strong></p><p><strong>23:00 就寢</strong></p><p><br/></p><p><strong>第 2 天</strong></p><p><strong>08:00 瑜伽課程</strong></p><p><strong>09:00 早餐</strong></p><p><strong>10:00 參觀茶博物館锉试,學(xué)習(xí)茶文化</strong></p><p><strong>12:00 柏聯(lián)特色養(yǎng)生定制午餐</strong></p><p><strong>14:00 午休</strong></p><p><strong>15:00 茶席會(huì),體驗(yàn)下午茶览濒;品嘗普洱茶呆盖,和茶藝師探討生活中的禪茶</strong></p><p><strong>18:00 柏聯(lián)米其林定制晚餐</strong></p><p><strong>20:00 精油花瓣泡浴</strong></p><p><strong>20:30 柏聯(lián)中醫(yī)療程(120分鐘)</strong></p><p><strong>23:00 就寢</strong></p><p><br/></p><p><strong>第 3天</strong></p><p><strong>8:00 太極課程</strong></p><p><strong>9:00 早餐</strong></p><p><strong>10:00 體驗(yàn)人文地理(可邑小鎮(zhèn)、 石林贷笛、九鄉(xiāng)应又、春城高爾夫,任選其一)<br/></strong></p><p><strong>18:00 柏聯(lián)米其林定制晚餐</strong></p><p><strong>20:00 園區(qū)漫步</strong></p><p><strong>20:30 25個(gè)天然溫泉泡池的露天園林式溫泉體驗(yàn)乏苦,觀看露天園林表演</strong></p><p><strong>22:00 就寢</strong></p><p><br/></p><p><strong>第 4天</strong></p><p><strong>08:00 瑜伽課程</strong></p><p><strong>09:00 早餐</strong></p><p><strong>10:00 花道體驗(yàn)</strong></p><p><strong>12:00 午餐</strong></p><p><strong>14:00 了解普洱茶知識(shí)以及沖泡普洱茶技巧 抄經(jīng)書</strong></p><p><strong>18:00 柏聯(lián)米其林定制晚餐</strong></p><p><strong>20:00 精油花瓣泡浴</strong></p><p><strong>20:30 柏聯(lián)中醫(yī)療程(150分鐘)</strong></p><p><strong>23:00 就寢</strong></p><p><br style="box-sizing: border-box;"/></p><p><strong>第5天</strong></p><p><strong>08:00 瑜伽課程</strong></p><p><strong>09:00 早餐</strong></p><p><strong>10:00 昆明市區(qū)一日游 株扛,觀看云南映象表演</strong></p><p><strong>23:00 就寢<br style="box-sizing: border-box;"/></strong></p><p><br style="box-sizing: border-box;"/></p><p><strong>第6天</strong></p><p><strong>08:00 太極課程</strong></p><p><strong>09:00 早餐</strong></p><p><strong>10:00 了解生活中的中醫(yī)</strong></p><p><strong>12:00 柏聯(lián)特色養(yǎng)生定制午餐</strong></p><p><strong>14:00 午休</strong></p><p><strong>15:00 廚藝探討</strong></p><p><strong>18:00 柏聯(lián)米其林定制晚餐</strong></p><p><strong>20:00 精油花瓣泡浴</strong></p><p><strong>20:30 柏聯(lián)特色療程(90分鐘)</strong></p><p><strong>23:00 就寢</strong></p><p><br/></p><p><strong>第7天</strong></p><p><strong>08:00 太極課程</strong></p><p><strong>09:00 早餐</strong></p><p><strong>10:30 中醫(yī)經(jīng)絡(luò)檢測(cè)</strong></p><p><strong>11:30 柏聯(lián)滇味養(yǎng)身定制午餐</strong></p><p><strong>12:45 歡送儀式送機(jī)</strong></p><p><strong>13:45 抵達(dá)長(zhǎng)水國(guó)際機(jī)場(chǎng),辦理登機(jī)手續(xù)</strong></p><p><br/></p><h3 style="box-sizing: border-box;margin-top: 0px;margin-bottom: 10px;line-height: 1;padding: 5px 0px 10px;border-bottom-width: 1px;border-bottom-style: dotted;border-bottom-color: rgb(213, 213, 213)"><strong><span style="color: rgb(0, 0, 0);">條款細(xì)則</span></strong></h3><p><strong>單人套餐費(fèi)用包含:</strong></p><p><strong>接送機(jī)服務(wù)(需預(yù)約)<br style="box-sizing: border-box;"/>經(jīng)絡(luò)檢測(cè)<br style="box-sizing: border-box;"/>行程中全部餐食安排(不含酒水)<br style="box-sizing: border-box;"/>行程中用車安排<br style="box-sizing: border-box;"/>行程中門票費(fèi)用<br style="box-sizing: border-box;"/>露天園林溫泉體驗(yàn)不限次數(shù)<br style="box-sizing: border-box;"/>溫馨開夜床服務(wù)及晚安小禮物<br style="box-sizing: border-box;"/>客房?jī)?nèi)迷你吧小食汇荐、軟飲<br style="box-sizing: border-box;"/>客房?jī)?nèi)時(shí)令鮮果盤<br style="box-sizing: border-box;"/>晨間瑜伽或太極課程(須預(yù)約)<br style="box-sizing: border-box;"/>高速寬帶洞就、wifi網(wǎng)絡(luò)<br style="box-sizing: border-box;"/>昆明柏聯(lián)酒店泳池別墅住宿<br style="box-sizing: border-box;"/>昆明柏聯(lián)SPA經(jīng)典療程<br style="box-sizing: border-box;"/>茶道學(xué)習(xí);花道學(xué)習(xí)掀淘;抄經(jīng)書</strong></p><p><br/></p><p><br/></p>
[self.myWebView loadHTMLString:webInfo baseURL:nil];
webView遵循代理旬蟋,重點(diǎn)來(lái)了###
-(void)webViewDidFinishLoad:(UIWebView *)webView{
[webView stringByEvaluatingJavaScriptFromString:
@"var script = document.createElement('script');"
"script.type = 'text/javascript';"
"script.text = \"function ResizeImages() { "
"var myimg,oldwidth;"
"var maxwidth = 300.0;" // UIWebView中顯示的圖片寬度
"var imageArr = document.images;"
"for(i=0;i <imageArr.length;i++){"
"var httpP = \"http://webapi.houno.cn\"+imageArr[i].getAttribute(\"src\");"
"imageArr[i].setAttribute(\"src\",httpP);"
"myimg = document.images[i];"
"if(myimg.width > maxwidth){"
"oldwidth = myimg.width;"
"myimg.width = maxwidth;"
"}"
"}"
"}\";"
"document.getElementsByTagName('head')[0].appendChild(script);"];
[webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
//字體大小
[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '80%'"];
//字體顏色
[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= 'gray'"];
// CGRect frame = webView.frame;
// CGSize fittingSize = [webView sizeThatFits:CGSizeZero];
// frame.size = fittingSize;
// webView.frame = frame;
//
// 文本高度
NSInteger height = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"] integerValue];
[self.myWebView mas_updateConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(height);
}];
// 設(shè)置偏離量
self.scrollView.contentSize = CGSizeMake(k_width, height + 260);
// 這個(gè)很重要,但是我也不知道什么情況革娄。如果不重新添加就不會(huì)達(dá)到效果倾贰。
[self.scrollView addSubview:self.myWebView];
}