快捷導(dǎo)航

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

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

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

前言

最近在學(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è)屬性用來確定 scrollTop 的值的，當(dāng) scroll-into-view 的值和 scroll-view 里面的元素的id的值相等時(shí)，scroll-view 會(huì)定位到該元素，scrollTop 的值就是滑動(dòng)到該元素的值。

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

點(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代碼如下：

<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)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: