微信小程式：選單滑動

seducer發表於2017-07-19
微信小程式

先演示一下效果如下：
scroll

1.左邊選擇類別，右邊選單滑動到對應位置
該功能只需要用微信小程式的元件：scroll-view 中 scroll-into-view屬性即可，詳細請看官方文件。

2.透過右邊拖動，左邊類別進行對應變換
該功能透過右方元素設定固定高度height，計算該類別所在的高度。然後透過scroll-view 中 bindscroll屬性，監測當前顯示類別進行切換。

wx.getSystemInfo({
      success: function (res) {
        self.setData({
          height: res.windowHeight,
          unitPx: res.windowWidth / 750 // 計算1rpx等於多少px
        });
      }
    });

透過wx.getSystemInfo獲取該手機的螢幕高度、寬度等。

.menu-container .menu-right .menu-detail-header {
  background: #ec6654;
  padding: 20rpx 5rpx;
  color: #fff;
  height:50rpx;
  line-height:50rpx;
}

.menu-container .menu-right .menu-detail-list {
  background-color: #fff;
  padding: 10rpx 5rpx;
  border-bottom: 1px solid #f8f8f8;
  position: relative;
  overflow: hidden;
  height:120rpx;
}
<!-- 右邊 -->
<scroll-view class="menu-right" style="height: 100%;" scroll-into-view="{{toView}}" scroll-y bindscroll="scroll">
    <view id="{{item.value}}" wx:for="{{menu_list}}">
      <view class="menu-detail-header">{{item.header}}</view>
      <view wx:for="{{item.food}}" class="menu-detail-list">
        <view class="menu-detail">
          <view>
            <image class="menu-detail-img" src="{{item.img}}"></image>
          </view>
          <view class="menu-detail-content">
            <view class="menu-detail-title">{{item.title}}</view>
            <view class="menu-detail-intro">{{item.intro}}</view>
            <view class="menu-detail-cost"><text class="text-red">{{item.cost}}</text>積分 </view>
          </view>
        </view>
      </view>
    </view> 
  </scroll-view>
scroll: function (e) {
    console.log(e.detail.scrollTop);
    var heights = this.data.listsHeight;
    var tempValue, tempId;
    for (var i in heights) {
      if (e.detail.scrollTop >= heights[i].height){
        tempValue = heights[i].value;
        tempId = heights[i].id;
      }
    }
    this.setData({
      curIndex: tempId,
      toViewLeft: tempValue
    });
  }

完整程式碼請移步github:
xcx-mall

此專案還包括了購物車模組，實現不久可能有很多需要改善。

以上便是該效果的實現方法，由於目前小程式不能動態獲取DOM的高度。只想到這樣的實現方法，如果有更好的方法，希望能分享。謝謝。

相關文章