実現タブの小型マイクロチャネルローリングプログラム
1.目的：タブのローリングバージョン、およびサイフォン効果の実現を解決するために。
2.プログラム：上記試験の結果を達成するために、彼自身のデモを書きます。そのコードは、ここで最初の文では、参照です。具体的な言及は以下のとおりである：重慶大学図書アプレットを使用しました。
3.効果：
A）エフェクト初期化：
B）最終結果：
4 。インプリメンテーション：
次のようにプロジェクトが構成されています。
次のようにWXMLコードは次のとおりです。
<Viewクラス= "HV">スペーサ高さ、サイフォン効果試験1 </ビュー>
<ビューid = "BLOCK0"> </ビュー>
<！ - ナビゲーションカテゴリー - >
<scrolltab tabdata = "{{大学}}" scrollTopスプライト= "{{scrollTopスプライト}}" scrollH = "{{scrollH}}" bindtabtap = "tabtapopt" />
<Viewクラス= "HV">スペーサ高さ、サイフォン効果試験A </ビュー>
<Viewクラス= "HV">スペーサ高さ、サイホン効果試験B </ビュー>
<Viewクラス= "HV">スペーサ高さ、サイホン効果試験C </ビュー>
<Viewクラス= "HV">スペーサ高さ、サイホン効果試験D </ビュー>
次のようにJSコードは次のとおりです。
//index.js
ページ（{
データ：{
大学：[{
名前： 'カテゴリーA'、
ID：-1
}、
{
名前： 'カテゴリーのB'、
ID：0
}、
{
名前： 'カテゴリーC'、
ID：1
}、
{
名前： 'カテゴリーのD'、
ID：2
}、
{
名前： 'カテゴリーE'、
ID：3
}、
{
名前： 'カテゴリーF'、
ID：4
}、
{
名前： 'カテゴリーG'、
ID：5
}、
{
名前：「分類H」
ID：6
}、
{
名前： 'カテゴリーのI'、
ID：7
}、
{
名前： '分類J'、
ID：8
}、
{
名前： '分類K'、
ID：9
}、
{
名前： '分類L'、
ID：10
}、
{
名前： '分類M'、
ID：11
}、
{
名前： '分類N'、
ID：12
}、
{
名前： '分類O'、
ID：13
}、
{
名前： '分類P'、
ID：14
}、
]、
scrollTopスプライト：0、
scrollH：0、
}、
onLoad：関数（）{
この= VAR。
constのクエリ= wx.createSelectorQuery（）
query.select（ '＃のBLOCK0'）。boundingClientRect（）
query.selectViewport（）。scrollOffset（）
query.exec（関数（RES）{
that.setData（{
scrollH：RES [0] .top、
}）
}）
}、
//モニタ画面のスクロール
onPageScroll：関数（E）{
this.setData（{
// scrollTopスプライト：のparseInt（（e.scrollTop）* wx.getSystemInfoSync（）pixelRatio。）、
scrollTopスプライト：のparseInt（e.scrollTop）
}）
}、
//操作は、データを取得します
tabtapopt（E）{
この= VAR。
大学= that.data.college。
collegeCur = e.detailました。
IF（collegeCur == -2）{
wx.showToast（{
タイトル：「すべて」、
}）
}他{
VAR名= "";
colleges.forEach（関数（値、指数）{
IF（collegeCur == value.id）{
名前= value.name。
}
}）
wx.showToast（{
タイトル：名前、
}）
}
}、
}）
次のようにJSONファイルは、次のとおりです。
{
"usingComponents"：{
"scrolltab"： "../../コンポーネント/ scrolltab /インデックス"
}
}
WXSSファイルを次のように
/**index.wxss**/
.Hv {
幅：100vw。
高さ：310px;
}
/ *スクロールタブ* /
:: - webkitの、スクロールバー{
幅：0;
高さ：0;
色：透明;
}
次のアドレスでgithubの：https://github.com/weiyunhelong/WxScrollTabは、ダウンロードして使用することを歓迎します！