カルーセルスクロール地図写真+ビデオswiperアプレット

コードは、テーマにまっすぐに行った
wxml：

（クリックしてここに）折り畳まれたり展開

1. <ビュークラス= "test_box">
3.   <swiperインジケータドット= "{{indicatorDots}}"
4.   自動再生= "{{自動再生}}" 間隔= "{{間隔}}" 期間= "{{期間}}">
5.   <swiper項目>
6.   <ビュークラス= 'CENG'>
7.       <画像SRC = "{{mdc_videofenmian}}" 隠れ= "{{xiaoshi}}" />
8.       <ビュークラス= 'BTN'> <画像SRC = "/ IMG / play.png" 隠れ= "{{xiaoshi}}" bindtap = "bindPlay" /> </ビュー>
9.       <ビデオSRC = "{{mdc_videoは}}" objectFit = "カバー" bindtouchmove = "mdc_move1は" = "：100％;高さ：幅100％" ID = "mdcVideo" スタイルを制御する隠し= "{{mdc_show}}">
10.         <カバービュークラス= 'mdc_return' bindtap = 'returnquanping'>退出全屏</カバービュー>
11.       </ビデオ>
12.   </ビュー>
13.     </ swiper項目>
14.   <ブロックWXのための：= "{{imgUrls}}">
15.     
16.     <swiper項目>
17.       <画像SRC = "{{アイテム}}" />
18.     </ swiper項目>
19.   </ブロック>
20. </ swiper>
22. </ビュー>

wxss：

（クリックしてここに）折り畳まれたり展開

1. //ページ/テスト/ test.js
2. ページ（{
4.   / **
5.    *初期データページ
6.    * /
7.   データ：{
8. // swiper写真の循環経路アドレス
9.     imgUrls：[
10.      「/img/01.jpg」
11.       「/img/02.jpg」
12.       '/img/03.jpg'
13.    
14.     ]、
15.     indicatorDots：偽、
16.     自動再生：偽、
17.     期間：5000、
18.     期間：1000、
19.     //ビデオパス
20.     mdc_video： 'HTTPS：//cloud.video.taobao.com/play/u/576446681/p/1/e/6/t/1/50140370746.mp4'、
21.     //カバーアートのビデオを置き換えます
22.      mdc_videofenmian： '/ IMG / f2.png'、
23.     カバーアート//ビデオ・ディスプレイ・パラメータが消えます
24.     xiaoshi：偽、
25.     //ビデオ・ディスプレイは、パラメータを消えます
26.     mdc_show：真、
27.   }、
29.   / **
30.    *ライフサイクル機能 - ページのロードのために聞きます
31.    * /
32.   onLoad：機能（オプション）{
33.   
34.   }、
36.   / **
37.    *ライフサイクル機能 - ページのレンダリングが完了し、初めて聞きます
38.    * /
39.   onReady：機能（RES）{
40.     
41.   }、
43.   / **
44.    *ライフサイクル機能 - ページの表示モニター
45.    * /
46.   onShow：関数（）{
47.   
48.   }、
50.   / **
51.    *ライフサイクル機能 - モニタページを隠します
52.    * /
53.   onHide：関数（）{
54.   
55.   }、
57.   / **
58.    *ライフサイクル機能 - モニタページのアンロード
59.    * /
60.   ONUNLOAD：関数（）{
61.   
62.   }、
64.   / **
65.    *ページに関連したイベントハンドラ - ドロップダウン・モニター・ユーザーのアクション
66.    * /
67.   onPullDownRefresh：関数（）{
68.   
69.   }、
71.   / **
72.    *ページをプルするイベントハンドラをボトミング
73.    * /
74.   onReachBottom：関数（）{
75.   
76.   }、
78.   / **
79.    *ユーザー右上、[共有]をクリックします
80.    * /
81.   onShareAppMessage：関数（）{
82.   
83.   }、
84.   //カバーはJSでのプロパティでビデオのパラメータを取得するために適切なアクションをクリックすると 
85.   //キー：再生するには、次のビデオに画像をクリックしますが、一時停止ビデオの再生後に直接（ビデオを誘発する）プログラムの成果は完璧なソリューションでの再生映像の前に150msの遅延であります
86.   bindPlay：関数（E）{
87.     この= VAR。
88.    that.videoContext = wx.createVideoContext（ 'mdcVideo'）。
89.   // that.videoContext.play（）
90.    that.videoContext.pause（）;
91.    setTimeout（関数（）{
93.      that.videoContext.play（）
94.    }、150）。
95.     that.setData（{ 
96.       xiaoshi：真、
97.       mdc_show：偽
98.     }）
99.      
100.   }、
101. //アンドリュースシステムは、これは、ハンドオーバswiperの証拠として有し、距離xビデオtouchemoveスライドを検出することができます。
102. // Xを検出するためのiOSシステムは、カバー・ビューのクリックイベントを切り替えるために、ビデオtouchemoveスライド未満であります
103.   mdc_move1：関数（E）{
104.     この= VAR。
105.     console.log（E）
106.     console.log（e.touches [0] .pageX）
107.     that.videoContext = wx.createVideoContext（ 'mdcVideo'）。
108.     IF（e.touches [0] .clientX> 20）{
109.       console.log（5555555555555555）
110.       // that.videoContext.pause（）;
111.       that.setData（{
112.       xiaoshi：偽、
113.       mdc_show：真、
114.      }）
115.     }
116.   }、
117.   returnquanping：関数（E）{
118.     この= VAR。
119.     that.setData（{
120.       xiaoshi：偽、
121.       mdc_show：真、
122.     }）
123.   }
124. }）

参考記事： http://blog.chinaunix.net/uid-30029642-id-5787093.html