まずレンダリング、ブログを書いて最初に見............
1.最初はwxmlページです
<！ - ナビゲーションカテゴリー - >
<ビュークラス= 'nav_fl'>
<ビューWXのための：= "{{goodlist}}" データ・インデックス= "{{索引}}" データID = "B {{索引}}" bindtap = 'タップ'> {{}} item.name
<テキストクラス= '{{インデックス== navActive "navactive"： ""}}'>···</テキスト>
</ビュー>
</ビュー>
<ビュースタイル= 'クリア：両方;'> </ビュー>
<！ - スクロールセクション - >
'：{{高}} RPX高さ;' <クラス= 'scrollView' スクロール-Y = "true" をスクロールにビュー= "{{toView}}" スタイル=ビュースクロール bindscroll> =「スクロール」スクロールでアニメーション=「真」
<ビューWX：のためのインデックス= "indexOut" ID = "B {{indexOut}}"： "{{goodlist}}" WX =ため>
<ビュークラス= 'listImg'>
<画像スタイル= '幅：100％;高さ：290rpx;' SRC = '{{item.img}}'> </画像>
<テキスト>販売：200 </テキスト>
</ビュー>
<ビュークラス= 'リスト名'> {{item.title}} </ビュー>
<ビュークラス= 'listId'> {{item.desc}} </ビュー>
<ビュークラス= 'listImg'>
<画像スタイル= '幅：100％;高さ：290rpx;' SRC = '{{item.img}}'> </画像>
<テキスト>在庫：300 </テキスト>
</ビュー>
<ビュークラス= 'リスト名'> {{item.title}} </ビュー>
<ビュークラス= 'listId'> {{item.desc}} </ビュー>
<ビュークラス= 'listImg'>
<画像スタイル= '幅：100％;高さ：290rpx;' SRC = '{{item.img}}'> </画像>
<テキスト>予約：100 </テキスト>
</ビュー>
<ビュークラス= 'リスト名'> {{item.title}} </ビュー>
<ビュークラス= 'listId'> {{item.desc}} </ビュー>
</ビュー>
</スクロールビュー>
自分の国境千万人の絵の部分
非常にシンプルなインタフェースを記述するためにここに2.cssことはあなた自身の造園カザフスタンを書くことができます
.nav_fl {
幅：100％;
高さ：30px;
表示：フレックス。
-コンテンツが正当化：スペースの間;
}
.navactive {
幅：60PX;
高さ：1ピクセル。
オレンジ色;
}
3.これは、今後の重要なjsのです
//ページ/スクロール/ scroll.js
ページ（{
/ **
*初期データページ
* /
データ：{
goodlist：[{名： "水果"、タイトル： "水果"、DESC： "AA"、IMG： "/images/photo13.jpg"}、{名： "早餐"、タイトル： "早餐" DESC " AA "IMG： "/images/photo13.jpg"}、{名： "午餐"、タイトル： "午餐"、DESC： "AA"、IMG： "/images/photo13.jpg"}、{名前："晚餐」、タイトル： "晚餐"、DESC： "AA"、IMG： "/images/photo13.jpg"}]
}、
/ **
*ライフサイクル機能 - ページのロードのために聞きます
* /
onLoad：機能（オプション）{
この= VAR。
//設定高さ製品一覧
wx.getSystemInfo（{
成功：機能（RES）{
that.setData（{
//高さ：1140
高さ：res.windowHeight * 2-60、
}）
}、
}）;
}、
タップ：関数（E）{
console.log（E）;
ID = e.currentTarget.dataset.idました。
VAR指数= e.currentTarget.dataset.index。
this.setData（{
toView：ID、
navActive：インデックス
}）;
}、
//最初のスライドが聴取位置に対応する高さに達したときに、高さの頂部から得ます。
//商品のリストを取得し、非常にコレクションを作ります
それぞれのスライドナビゲーション手がかりに対応する//ページの位置
スクロール：関数（E）{
console.log（E）;
この= VAR。
VaRの高さ= 0;
VAR番号= 0
hightArr = []でした。
ため（VAR i = 0; iはthat.data.goodlist.length <; iは++）{// goodlistは、本明細書の商品の対応するセットを指し
//要素の位置を取得します。
wx.createSelectorQuery（）。（ '＃のB' + i）を選択.boundingClientRect（関数（RECT）{
数= rect.height +数。
hightArr.push（番号）
that.setData（{
hightArr：hightArr
}）
。}）のexec（）;
console.log（that.data.hightArr）。
}。
console.log（e.detail.scrollTop）。
VAR scrollTopスプライト= e.detail.scrollTop。
VAR scrollArr = that.data.hightArr。
{（; iはscrollArr.lengthを<I ++がVAR I = 0）のための
IF（scrollTopスプライト> = 0 && scrollTopスプライト<scrollArr [0]）{
console.log（「第一ああ」）。
もし（0！= this.data.lastActive）{
this.setData（{
navActive：0、
lastActive：0
}）
}
}そうであれば（scrollTopスプライト> = scrollArr [I - 1] && scrollTopスプライト<= scrollArr [I]）{
console.log（+ I +「番目の」「これは最初のものです」）。
もし（私！= this.data.lastActive）{
this.setData（{
navActive：私は、
lastActive：私は
}）
}
}
}
}、
/ **
*ライフサイクル機能 - ページのレンダリングが完了し、初めて聞きます
* /
onReady：関数（）{
}、
/ **
*ライフサイクル機能 - ページの表示モニター
* /
onShow：関数（）{
}、
/ **
*ライフサイクル機能 - モニタページを隠します
* /
onHide：関数（）{
}、
/ **
*ライフサイクル機能 - モニタページのアンロード
* /
ONUNLOAD：関数（）{
}、
/ **
*ページに関連するイベントハンドラ - ドロップダウン・モニター・ユーザーのアクション
* /
onPullDownRefresh：関数（）{
}、
/ **
*ページをプルするイベントハンドラをボトミング
* /
onReachBottom：関数（）{
}、
/ **
*ユーザー右上、[共有]をクリックします
* /
onShareAppMessage：関数（）{
}
}）