はじめに：コードは、マイクロチャネルはほとんど差uniappネイティブコードで実現、コードの構文はuniappのscrollviewのswiperとネイティブコードを達成実装と比較することができますアプレット。
参考文献：
アプレット>>マイクロチャネルAPI https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
距離取得要素/トップアセンブリ>> https://www.jianshu.com/p/fe72cff2b808
簡単なデモ>>達成swiper https://blog.csdn.net/weixin_41599291/article/details/93650074を
達成するための機能：
左に対応するスクロール右は、強調表示されます。
かどうかは、クリック、左、右のサイドショー対応するデータ、トップを繰り返し、
レンダリング：
コード：
<テンプレート>
<ビュー>
<ビュースタイル= "テキスト整列：センター;">搜索栏</ビュー>
<ビュークラス= 'productNav'>
<ビュークラス= '左'>
<ビュー：クラス= "POSI == +インデックス'ID' '選択'： '正常'、」タップ@ = 'switchNav（ "ID" +指数、指数）' V- ためのデータリストで（項目、指数）= ""キー= "インデックス"> { {item.name}} </ビュー>
</ビュー>
<ビュークラス=「右」>
<スクロールビュースクロールY =「真」クラス=「スクロール」@スクロール=「スクロール」：スクロールにビュー= "POSI"：スクロール・トップ= "scrollTopスプライト">
<ビュー：ID = V- "item.id" のため "データリストで（項目、インデックス）" =：キー= "インデックス">
<ビュークラス= "タイトル"> {{item.name}} </ビュー>を
<ビューV- ためにためitem.name、{} {} {} {}サブアイテム</表示>：キー= "I" = "item.numに（サブアイテム、I）">
</ビュー>
</スクロール表示>
< / [表示]>
</ビュー>
</ビュー>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
データ（）{
リターン{
ポジ： '' 、
scrollTopスプライト： 0 、
データ：[ 'あなたのためのお勧め'、 'コンピュータ'、「電話''美「]、// アナログデータ
のDataList：[]、// サイクリックデータ
dataEleHeight：[] //配列データの各要素の高さを取得し
ほん：[] // の各要素の上面から計算
scrollHeight：500 // スクロール領域の高
}
}
のonLoad（）{
// 要求データに対応した初期化データ
のための（I = 0せ; I < 本 .data.length; I ++ ）{
せRAND =のparseInt（Math.random（）* 100,10 ）;
せNUM = []
のため（LET J = 0; J <RAND; J ++ ）{
num.push（J）。
}
OBJ LET = {
ID： 'ID' + I、
名前：この.DATA [I]、
NUM：NUM
}
IF（I == 0 ）{
この .posi = obj.id
}
この.dataList.push（OBJ）
}
}、
時計： {
dataEleHeight（ヴァル）{
IF（== val.length この.dataList.length）{
// 判定は、いくつかの要素の第一、及び前の高さに素子高さ
せてトップ= 0 用のIせ（で、この
.dataEleHeight）{
IF式（I> = 0 && I < 本.dataEleHeight.length）{
場合（I = 0！）{
トップ + = この .dataEleHeight [I-1 ] .height
}
この.topList.push（上部）
}
}
}
はconsole.log（この.topList）
}
}、
{）（搭載
つまりせ = この
ため（I = 0せ; iが< この .dataList.length; I ++ ）{
// 要素のプロパティを取得し、好ましくはヌル取得避けるために、レンダリング後に実行される
）uni.createSelectorQueryを（で（この）.Select（ '＃' + この .dataList [I] .ID ）.boundingClientRect（関数（RECT）{
LET OBJ = {
ID：that.dataList [I] .ID、
高さ：rect.height
}
that.dataEleHeight.push（OBJ）;
}）Execの（）;.
}
}、
方法：{
スクロール（E）{
LETインデックス =本 .posi.substring（2）
// 判断e.detail.scrollTop在哪个范围、就高亮显示哪个分类
ため（Iせにおける 本）.topList {
場合（I < 本 .topList.length - 1 && この .topList [I] <= E .detail.scrollTop && e.detail.scrollTop < 本 .topList [のparseInt（I）+ 1 ]）{
この .posi = この.dataList [I] .ID
ブレーク。
}
もし（I == 本 .topList.length - 1 ）{
この .posi = この.dataList [I] .ID
}
}
この .scrollTop = e.detail.scrollTop // メニューデータは、同じ問題が繰り返され、右クリックを解く
}、
switchNav：機能（E、インデックス）{
IF（この！= .posi E）{
この .posi = E
} 他{
// 非常に始まる位置ターゲットにするよう繰り返しクリック
この .scrollTop = この.topList [インデックス];
}
}
}
}
</ SCRIPT>
<スタイル>
.productNav {
表示：フレックス。
フレックス - 方向：行。
フォント -family： "微軟雅黒"
}
.LEFT {
幅： 25％ 。
フォント - サイズ：30rpx。
背景 - 色：＃f4f4f4;
}
.LEFTビュー{
テキスト - 整列：センター;
高さ：90rpx。
行 - 高さ：90rpx。
}
.selected {
背景 - 色：#FFF。
国境 - 左：2ピクセル固体＃E54847。
フォント -重量：太字;
色：＃E54847。
}
.normal {
背景 - 色：＃f4f4f4。
国境 - 下：1pxの固体＃1 f2f2f2;
}
.RIGHT {
幅： 75％ 。
マージン： 0 ;
}
.scroll {
高さ：500pxなど。
テキスト - 整列：センター;
}
.TITLE {
背景：＃E54847。
色：白;
}
</スタイル>
クレーターは：（I LETのthis.topList中）のために 、私は デジタル演算処理を実行する際に、文字列に属する転送する必要がありますint型