html页面tableview,iOS与H5交互之用H5制作TableView(Swiper)

在H5交互中，经常会使用到TableView,但是TableView在H5中怎么实现呢？

这里有两种做法，使用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库(注:若不引人此库，则无法完成页面所显示的效果)

3.设置点击的按钮和按钮方法，和需要显示列表的位置

4.设置swiper样式

这里的slidesPerView指显示出现的个数，也可以设为高度height，按自己的需求来

var swiper = new Swiper('.swiper-container', {

paginationClickable: true,

slidesPerView: 3,

direction: 'vertical'});

5.设置点击按钮后HTML页面传给iOS端的方法

function GetData() {

window.WebViewJavascriptBridge.callHandler('GetData')

}

6.设置iOS端传回给HTML页面的方法

(1)返回的数据应当是JSON的字符串，按照相应的格式获取数据

(2)根据数据设置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('

' +

'' +

'

' + jsonObj[i].name + '

' +

'' +

'

'

)

}

})

})

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的数据转成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