前言

成都創(chuàng)新互聯(lián)為客戶提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站制作、程序、域名、空間一條龍服務(wù)，提供基于WEB的系統(tǒng)開發(fā). 服務(wù)項(xiàng)目涵蓋了網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站程序開發(fā)、WEB系統(tǒng)開發(fā)、微信二次開發(fā)、手機(jī)網(wǎng)站開發(fā)等網(wǎng)站方面業(yè)務(wù)。

最近在學(xué)習(xí)小程序，實(shí)現(xiàn)了左右聯(lián)動(dòng)的功能，記錄一下思緒，方便以后參考。

最終的界面如下, 點(diǎn)擊左邊任意一個(gè)項(xiàng)目，右邊會(huì)跳到相應(yīng)項(xiàng)目的起始位置，右邊滑動(dòng)，左則會(huì)跳到相應(yīng)的位置。

　

實(shí)現(xiàn)思路

在這里，右則每一項(xiàng)的高度都是固定的，方便定位當(dāng)前滑動(dòng)距離在哪一個(gè)大項(xiàng)（左則）里。右則的 scroll-view 使用了一項(xiàng)關(guān)鍵的屬性：scroll-into-view，這個(gè)屬性用來(lái)確定 scrollTop 的值的，當(dāng) scroll-into-view 的值和 scroll-view 里面的元素的id的值相等時(shí)，scroll-view 會(huì)定位到該元素，scrollTop 的值就是滑動(dòng)到該元素的值。

做這個(gè)功能的時(shí)候，遇到一個(gè)問(wèn)題，就是右則的小項(xiàng)種類不多的時(shí)候，例如某個(gè)類目只有1~2個(gè)，那么點(diǎn)擊左則的大項(xiàng)的時(shí)候，會(huì)出現(xiàn)點(diǎn)擊不到的現(xiàn)象。這里可以用點(diǎn)小技巧來(lái)解決：

點(diǎn)擊左則大項(xiàng)的時(shí)候，設(shè)置當(dāng)前點(diǎn)擊標(biāo)記為true，設(shè)置 classifySeleted 為當(dāng)前點(diǎn)擊的項(xiàng)目。 然后在滑動(dòng)觸發(fā)函數(shù)（onGoodsScroll）里面，判斷當(dāng)前觸發(fā)滑動(dòng)是否點(diǎn)擊產(chǎn)生的，如果是，則不設(shè)置 classifySeleted  的值，否則就計(jì)算 classifySeleted 的值并設(shè)置。

示例代碼：

wxml代碼如下：

  
   
    {{classify.typeName}}
   
  
  
   
    {{classify.typeName}}
    
     
     {{cake.name}}
     {{cake.introduce}}
     ￥{{cake.price}}
    
   
  
 

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前題目：微信小程序?qū)崿F(xiàn)左右聯(lián)動(dòng)的實(shí)戰(zhàn)記錄-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)URL：http://weahome.cn/article/ijjed.html