前言
最近在學習小程式，實現了左右聯動的功能，記錄一下思緒，方便以後參考。
最終的介面如下, 點選左邊任意乙個專案，右邊會跳程式設計客棧到相應專案的起始位置，右邊滑動，左則會跳到相應的位置。
實現思路
在這裡，右則每一項的高度都是固定的，方便定位當前滑動距離在哪乙個大項（左則）裡。右則的 scroll-view 使用了一項關鍵的屬性：scroll-into-view，這個屬性用來確定 scrolltop 的值的，當 scroll-into-view 的值和 scroll-view 裡面的元素的id的值www.cppcns.com相等時，scroll-view 會定位到該元素，scrolltop 的值就是滑動到該元素的值。
做這個功能的時候，遇到乙個問題，就是右則的小項種類不多的時候，例如某個類目只有1~2個，那麼點選左則的大項的時候，會出現點選不到的現象。這裡可以用點小技巧來解決：
點選左則大項的時候，設定當前點選標記為true，設定 classifyseleted 為當前點選的專案。 然後在滑動觸發函式（ongoodsscroll）裡面，判斷當前觸發滑動是否點選產生的，如果是，則不設定 classifyseleted 的值，否則就計算 classifyseleted 的值並設定。
示例**：
wxml**如下：}}
}}
￥}js**如下：
ongoodsscroll: function (e)
h += _h;
});if (this.data.istap) )程式設計客棧
} else );
} },
tapclassify: function (e) );
},總結
本文標題: 微信小程式實現左右聯動的實戰記錄
本文位址:
小程式scroll view實現左右聯動
wxml js data scroll function e 通過繫結事件scroll,每次單擊獲取對應元素的id,再將其繫結到intoindex上,此處是將intoindex接下來顯示的內容要跳轉到的位置,即id content 處,由於官方規定id不能以數字開頭,所以intoindex前面加上了...
微信小程式實現列表左右滑動
1 我們可以把列表的元素放在scroll view控制項中，並且讓scroll view實現橫向滑動 2 把列表內容項的寬度佔滿手機寬度，利用rpx特性 自適應螢幕 預設iphon6就是750rpx，只要設定大於等於750rpx就可以。3 監聽滑動後列表操作事件，即可 細節點 第一步，wxml中在s...
微信小程式實戰入門
一 簡介 參考 二 工程 參考 quickstart basic file.html 工具設計介面可調整機型 顯示百分比 資料連線方式。三 發布 個人上線了乙個木材材積計算器 兩天做的，有web前後端經驗很容易入手，有增加 共計 記錄功能 審核很快，一天審核結束 後來發現已經之前有公司做了，尷尬，而...