在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.設(shè)置點擊的按鈕和按鈕方法，和需要顯示列表的位置

<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.設(shè)置swiper樣式

這里的slidesPerView指顯示出現(xiàn)的個數(shù)，也可以設(shè)為高度height，按自己的需求來

var swiper = new Swiper('.swiper-container', {
                paginationClickable: true,
                slidesPerView: 3,
                direction: 'vertical'});

5.設(shè)置點擊按鈕后HTML頁面?zhèn)鹘oiOS端的方法

function GetData() {
                window.WebViewJavascriptBridge.callHandler('GetData')
            }

6.設(shè)置iOS端傳回給HTML頁面的方法

（1）返回的數(shù)據(jù)應(yīng)當是JSON的字符串，按照相應(yīng)的格式獲取數(shù)據(jù)
（2）根據(jù)數(shù)據(jù)設(shè)置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.設(shè)置Cell的點擊方法

function TouchCell(name) {
            alert('點擊了'+name)
        }

OC控制器中需要完成的工作

1.加載HTML頁面并設(shè)置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