在H5交互中，經(jīng)常會使用到TableView,但是TableView在H5中怎么實現(xiàn)呢内贮？
這里有兩種做法产园，使用jQuery和Swiper，本文寫的是Swiper做法夜郁，想了解jQuery做法什燕，請點擊這里。
廢話不多說拂酣，說明怎么做之前先看下方效果圖：
2018-04-09 10_01_36.gif
交互方式
本文所使用的H5的交互方式是使用第三方庫WebViewJavascriptBridge秋冰，具體的使用方式可以參考小編之前寫的iOS與H5交互之WebViewJavascriptBridge。
如何制作H5頁面的TableView
HTML頁面中需要完成的工作
1.加入WebViewJavascriptBridge必須加入的一段代碼
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
2.引入H5的Swiper庫（注:若不引人此庫婶熬，則無法完成頁面所顯示的效果）
<link rel="stylesheet" href="swiper.min.css">
<script src="swiper.min.js"></script>
3.設置點擊的按鈕和按鈕方法剑勾，和需要顯示列表的位置
<input type="button" id="buttonID" value="加載數(shù)據(jù)" onclick="GetData()" style="margin-top: 20px;" />
<!-- Swiper -->
<div class="swiper-container" style="float: left; margin-top: 30px;">
<div class="swiper-wrapper">
</div>
</div>
4.設置swiper樣式
這里的slidesPerView指顯示出現(xiàn)的個數(shù)，也可以設為高度height赵颅，按自己的需求來
var swiper = new Swiper('.swiper-container', {
paginationClickable: true,
slidesPerView: 3,
direction: 'vertical'});
5.設置點擊按鈕后HTML頁面?zhèn)鹘oiOS端的方法
function GetData() {
window.WebViewJavascriptBridge.callHandler('GetData')
}
6.設置iOS端傳回給HTML頁面的方法
（1）返回的數(shù)據(jù)應當是JSON的字符串虽另，按照相應的格式獲取數(shù)據(jù)
（2）根據(jù)數(shù)據(jù)設置Cell的格式
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('GetDataList', function(data, responseCallback) {
var jsonObj = JSON.parse(data);
for(var i = 0; i < jsonObj.length; i++) {
swiper.appendSlide('<div class="swiper-slide" onclick="TouchCell(\'' + jsonObj[i].name + '\')" style="border-top:1px solid #dddddd;">' +
'<span class="inline" style="text-align: left">' +
'<div style="font-size:2.66667rem;color:#221f1f;" class="name">' + jsonObj[i].name + '</div>' +
'</span>' +
'</div>'
)
}
})
})
7.設置Cell的點擊方法
function TouchCell(name) {
alert('點擊了'+name)
}
OC控制器中需要完成的工作
1.加載HTML頁面并設置WebViewJavascriptBridge
#import "WebViewJavascriptBridge.h"
...
@property (nonatomic, strong) WebViewJavascriptBridge *bridge;
...
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"H5TableViewDemo" ofType:@"html"]]]];
self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
[self.bridge registerHandler:@"GetData" handler:^(id data, WVJBResponseCallback responseCallback) {
}];
2.將要傳給HTML的數(shù)據(jù)轉(zhuǎn)成JSON字符串
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:arr options:NSJSONWritingPrettyPrinted error:nil];
NSString *str = [[NSString alloc]initWithData:jsonData encoding:NSUTF8StringEncoding];
3.將數(shù)據(jù)發(fā)送給HTML
[self.bridge callHandler:@"GetDataList" data:str];
當上述所有步驟都完成之后，大功告成饺谬。即可出現(xiàn)上面顯示的效果捂刺。
希望這篇文章對各位看官有所幫助，Demo下載地址：Demo
