在H5交互中,经常会使用到TableView,但是TableView在H5中怎么实现呢?
这里有两种做法,使用jQuery和Swiper,本文写的是jQuery做法,想了解Swiper做法,请点击这里。
废话不多说,说明怎么做之前先看下方效果图:
交互方式
本文所使用的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的jQuery库(注:若不引人此库,则无法完成页面所显示的效果),并设置显示TableView位置的Id
获取数据
3.设置点击按钮后HTML页面传给iOS端的方法
function GetData() {
window.WebViewJavascriptBridge.callHandler('GetData')
}
4.设置iOS端传回给HTML页面的方法
(1)收到返回数据时先清空原来的TableView效果(此处要注明之前设置的id)
(2)返回的数据应当是JSON的字符串,按照相应的格式获取数据
(3)根据数据设置Cell的格式,并给Cell添加点击方法(此处仍要注明之前设置的id)
setupWebViewJavascriptBridge(function(bridge) {
//注册JS的方法给OC
bridge.registerHandler('GetDataList', function(data, responseCallback) {
//清空原来的TableView效果(此处要注明之前设置的id)
$("#tableview").html('');
//返回的数据应当是JSON的字符串,按照相应的格式获取数据
var jsonObj = JSON.parse(data);
for(var i = 0;i
//根据数据设置Cell的格式,并给Cell添加点击方法(此处仍要注明之前设置的id)
$("#tableview").append('
+''
+'
+'
+''
+ '
)
}
})
5.设置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的数据转成JSON字符串
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:arr options:NSJSONWritingPrettyPrinted error:nil];
NSString *str = [[NSString alloc]initWithData:jsonData encoding:NSUTF8StringEncoding];
3.将数据发送给HTML
[self.bridge callHandler:@"GetDataList" data:str];
当上述所有步骤都完成之后,大功告成。即可出现上面显示的效果。
希望这篇文章对各位看官有所帮助,Demo下载地址:Demo,对支持小编的看官们表示感谢。