快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)左右聯(lián)動的實戰(zhàn)記錄

更新時間：2018年07月05日 09:36:06 作者：halolzh

聯(lián)動菜單是大家在開發(fā)小程序經(jīng)常會遇到的一個功能，下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)左右聯(lián)動的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

最終的界面如下, 點擊左邊任意一個項目，右邊會跳到相應(yīng)項目的起始位置，右邊滑動，左則會跳到相應(yīng)的位置。

實現(xiàn)思路

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

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

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

示例代碼：

wxml代碼如下：

<view class="content-container">
  <scroll-view class="classify-container" scroll-y="true">
   <view class="classify {{classifySeleted==classify.typeId?'active':''}}" wx:for="{{cakeTypes}}" wx:for-item="classify" wx:key="id" data-id="{{classify.typeId}}" bindtap="tapClassify">
    <view class="name">{{classify.typeName}}</view>
   </view>
  </scroll-view>
  <scroll-view class="goods-container" scroll-y="true" scroll-into-view="{{'inToView' + typeIndex}}" bindscroll="onGoodsScroll" scroll-top="{{scrollTop}}">
   <view wx:for="{{cakeTypes}}" wx:for-item="classify" wx:key="id">
    <view class="title" id="{{'inToView'+classify.typeId}}">{{classify.typeName}}</view>
    <view class="goods" wx:for="{{classify.productIds}}" wx:for-item="cake" wx:key="id">
     <image class="pic" src="{{cake.imgSrc}}" data-src="{{cake.imgSrc}}" data-list="{{cake.imgSrc}}" bindtap="tapImg"></image>
     <view class="name ellipsis">{{cake.name}}</view>
     <view class="sold">{{cake.introduce}}</view>
     <view class="price">￥{{cake.price}}</view>
    </view>
   </view>
  </scroll-view>
 </view>

js代碼如下：

onGoodsScroll: function (e) {

 var scrollTop = e.detail.scrollTop;
 var h = 0;
 var classifySeleted = this.data.classifySeleted;
 var titleHeight = Math.ceil(70 * this.data.percent);
 var itemHeight = Math.ceil(180 * this.data.percent);

 this.data.cakeTypes.forEach(function (classify, i) {
  console.log("h:" + h + " scrollTop:" + scrollTop);
  var _h = titleHeight + classify.productIds.length * itemHeight; 
  if (scrollTop >= h - 10) {
  classifySeleted = classify.typeId;
  }
  h += _h;
 });

 if (this.data.isTap) {
  this.setData ({
  isTap: false
  })
 } else {
  this.setData({
   classifySeleted: classifySeleted
  }); 
 } 
 },

 tapClassify: function (e) {
 var id = e.target.dataset.id;
 this.setData({
  isTap: true,
  classifySeleted: id,
  typeIndex: id
 });
 },

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: