iOS与H5交互之用H5制作轮播

在H5交互中，经常会使用到滑动轮播,但是滑动轮播在H5中怎么实现呢？废话不多说，说明怎么做之前先看下方效果图：

交互方式

本文所使用的H5的交互方式是使用第三方库WebViewJavascriptBridge，具体的使用方式可以参考小编之前写的iOS与H5交互之WebViewJavascriptBridge。

如何制作H5页面的滑动轮播

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>
        <input type="button" id="buttonID" value="加载数据" onclick="GetData()" style="margin-top: 20px;"/>
...
//注:class的名字是固定的，必须按照这个命名
        <div class="swiper-container" style="float: left; margin-top: 30px;">
        <div class="swiper-wrapper">
        </div>
    </div>

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

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

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

（1）返回的数据应当是JSON的字符串，按照相应的格式获取数据
（2）根据数据设置Cell的格式，并给Cell添加点击方法(此处仍要注明之前设置的id)

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)
            }
        setupWebViewJavascriptBridge(function(bridge){
            bridge.registerHandler('GetDataList', function(data, responseCallback) {
                var jsonObj = JSON.parse(data);
                for(var i = 0;i<jsonObj.length;i++){
//注:class的名字是固定的，必须按照这个命名
                    swiper.appendSlide('<div class="swiper-slide"  onclick="TouchCell(\'' + jsonObj[i].name + '\')">'
                     +'<span id="line">'
                     +'<div style="font-size:2.66667rem;color:#221f1f;" class="tcjl_name">'+jsonObj[i].name+'</div>'
                     +'<div style="font-size:2.333333rem;color:#999999;" class="tcjl_code">'+jsonObj[i].index+'</div>'
                     +'![](' + jsonObj[i].index + )'
                     +'</span>'+'</div>')
                }
            })
        })

5.设置Cell的点击方法

function TouchCell(name) {
            alert('点击了'+name)
        }

6.设置轮播的样式，属性

body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 420px;
        margin: 20px auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

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

1.加载HTML页面并设置`WebViewJavascriptBridge`

#import "WebViewJavascriptBridge.h"
...
@property (nonatomic, strong) WebViewJavascriptBridge *bridge;
...
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"轮播Demo" 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