iOSとH 5が交互にH 5で輪番を作る

H 5インタラクションではスライドキャストがよく使われますが、スライドキャストはH 5でどのように実現されますか?くだらないことは言わないで、どうすればいいかを説明する前に下の効果図を見てください.
インタラクション方式
本明細書で使用するH 5のインタラクションは、サードパーティ製ライブラリWebViewJavascriptBridgeを使用することであり、具体的な使用方法は、前に書いたiOSとH 5がインタラクションするWebViewJavascriptBridgeを参照することができる.
H 5ページのスライドショーの作成方法
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.クリックするボタンとボタンの設定方法H 5のswiperライブラリを導入し(注:このライブラリを人に引かなければページに表示される効果を完成できない)、輪番を表示する位置を設定する

       
        
        
...
// :class       ，        
        

        

        
    

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[i].name+'
'
                     +'
'+jsonObj[i].index+'
'
                     +'![](' + jsonObj[i].index + )'
                     +''+'

')
}
})
})
5.セルのクリック を する

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