美文网首页微信小程序
微信小程序实现类似外卖平台右侧商品滑动时,左侧分类导航栏的相应分

微信小程序实现类似外卖平台右侧商品滑动时,左侧分类导航栏的相应分

作者: 糖圆二胖 | 来源:发表于2019-03-20 22:46 被阅读0次

    左侧导航栏与右侧商品列表相互联动,类似喜茶这种联动效果


    image.png

    实现思路:
    1.使用组件scroll-view的属性scroll-into-view(值应为某子元素id,id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素),实现点击左侧导航分类,右侧滑动到相应商品(这个比较简单,调动API即可实现)
    2.使用组件scroll-view的bindscroll事件(滚动时触发)获取右侧商品列表父元素scroll-view卷上去的高度e.detail.scrollTop,使用wx.createSelectorQuery()boundingClientRect方法(添加节点的布局位置的查询请求)获取右侧商品列表里每一块子元素节点的高度(height)和距离父元素上边界距离(上边界坐标top),右侧列表滚动时,遍历右侧商品列表项,当父元素卷上去的高度>=子元素上边界坐标,并且<=子元素上边界坐标加子元素的高度时,获取当前区域的商品分类id,赋值给左侧选中项id

    具体代码:

      <!--  wxml -->
    <view class="cotent">
      <!-- 左侧tab菜单栏 -->
      <scroll-view class="leftTabBox clearFix" scroll-with-animation="true" enable-back-to-top="true" scroll-y="true" style="height:100%">
        <block wx:for="{{leftClassesMenuList}}" wx:key="{{item.id}}">
          <button formType="submit" class="{{selectedLeftMenuItem == item.id?'leftTab-selectedItem':'leftTab-items'}}" bindtap="{{selectedLeftMenuItem == item.id?'':'selectClassesClick'}}" hover-class='none' data-index="{{index}}" data-id="{{item.id}}">
            <view class="leftTab-nameBox">{{item.name}}</view>
          </button>
        </block>
      </scroll-view>
      <!-- 右侧商品列表 -->
      <scroll-view class="bigWrap productList clearFix" scroll-with-animation="true" enable-back-to-top="true" scroll-y="true" scroll-top="{{scrollTop}}" style="height:100%" bindscrolltolower="loadMore" scroll-into-view="{{toView}}" scroll-with-animation="true" bindscroll="scrollProductList">
        <view wx:for="{{productList}}" id="{{'productItem'+item.cateId}}" wx:key="{{index}}">
          <view class="classesTitle">{{item.cateName}}</view>
          <view class="product-item clearFix" data-item="{{goodsItem}}" bindtap='showGoodsDetail'> 
            <image class="product-image" src="{{goodsItem.goodsImgUrl}}" mode="aspectFit" /> 
            <view class="product-content">
              <view class="product-title">{{goodsItem.goodsName}}</view>
              <text class="product-price">¥{{goodsItem.goodsPayprice}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    
      <!--  js -->
    var that;
    Page({
      data:{
        // 左侧菜单列表
        leftClassesMenuList: [],
        // 左侧菜单选中item
        selectedLeftMenuItem: "",
        // 商品列表
        productList: [],
        //把右侧第几个商品分类滚动到顶部
        toView:"",
      },
      onload: function(options) {
        that = this;
      },
      // 获取右侧商品列表
      getProductList: function() {
        let currentUrl;
        let currentParams;
        //  util文件里封装了get请求
        util.getRequest(currentUrl, currentParams, res => {
          let dataSource = res.data.data.goods;//右侧商品列表
          let leftClassesMenuList = res.data.data.categoryList;//左侧分类列表
          that.setData({
            productList: dataSource,
            leftClassesMenuList: leftClassesMenuList,
            selectedLeftMenuItem: leftClassesMenuList[0] ? leftClassesMenuList[0].id:'',//默认左侧第一个选中
            toView: leftClassesMenuList[0] ? 'productItem' + leftClassesMenuList[0].id:''
          })
          // 给右侧商品列表循环赋值列表项的上边界坐标和高度
          that.data.productList.forEach(item => {
            // 添加节点的布局位置的查询请求
            wx.createSelectorQuery().select('#productItem' + item.cateId).boundingClientRect(rect => {
              item.offsetTop = rect.top;
              item.height = rect.height;
            }).exec()
          })
          console.log(that.data.productList, "that.data.productList")
        }) 
      },
      // 左侧菜单栏切换事件
      selectClassesClick: function(e) {
        let dataset = e.currentTarget.dataset;
        let id = dataset.id;
        that.setData({
          selectedLeftMenuItem: id,
          toView: 'productItem' + id //不能数字开头,所以开头加了productItem
        });
      },
      // 监听右边商品列表滑动
      scrollProductList(e){
        console.log(e)
        that.data.productList.forEach(item => {
          if (e.detail.scrollTop >= (item.offsetTop - 55) && e.detail.scrollTop <= (item.offsetTop - 55 + item.height)){
            that.setData({
              selectedLeftMenuItem: item.cateId
            }) 
          }
        })
      },
    })
    

    相关文章

      网友评论

        本文标题:微信小程序实现类似外卖平台右侧商品滑动时,左侧分类导航栏的相应分

        本文链接:https://www.haomeiwen.com/subject/oesxvqtx.html