小程序商品分类页面滑动左右联动

目录

系列文章目录

前言

一、vtabs是什么?

二、使用步骤

1.json引入

2.wxml中使用

3.js中代码

总结


前言

商品分类页面,左边分类及右边商品左右联动

因为微信小程序scroll-view没有h5锚点控制联动,并且需求是根据整个页面的滚动条来控制联动,所以使用了页面滚动事件onPageScroll来获取页面的滚动距离,并使用微信小程序组件vtabs和vtabs-content,vtabs获取到每个分类下面的商品模块的高度并根据位置累加

分类


一、vtabs是什么?

vtabs和vtabs-content是微信开发工具的组件,最初是使用scroll-view滑动等来控制左右联动,现在我已改为我所需要的模式。部分原始代码已注释。要使用的页面json需先引入

代码包放到下载地方:https://download.csdn.net/download/Zan_Z/87425550

二、使用步骤

1.json引入

代码如下(示例):

"mp-vtabs":"/components/weui/vtabs/index",
"mp-vtabs-content":"/components/weui/vtabs-content/index",

2.wxml中使用

spcell-block为右侧商品布局组件,使用粘性定位position: sticky;时,父级div不可有overflow: hidden;样式,否则不生效

代码如下:


    

      
        
          
            
              
                {{tagLists[index].title}}
                
                  销量
                  
                    价格
                    
                      
					            
                    
                  
                
              
            
            
              
            
            			
            暂无商品
            
            
                          
              
                
                  {{item2.title}}
                  
                    销量
                    
                      价格
                      
                        
                        
                      
                    
                  
                
              
              			            
              暂无商品
            
           
          
        
      
      
    
  

3.js中代码

var app=getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    skinStyle:"", //主题
    zt_color:"",

    tagLists:[], //商品列表
    activeTab:0,
    navBlockHeight:0, //标题粘性定位的位置 
    topScrollHeight:0,
    topHeight:0, //距离顶部的初始距离
    costoSort:"desc", //价格降序
    saleSort:"", //销量排序
    saleIndex:"",
  },
  customData:{
    noScroll:false, //左侧类目点击时使用
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    //此处代码是我项目中所使用的颜色主题,可忽略
    app.globalData.sync.LoginConfigSync.then(function (res) {
      that.setData({
        skinStyle:app.globalData.shop_options.theme,
        zt_color: app.globalData.theme_color[app.globalData.shop_options.theme],
      
      })
    })
  },
  //左侧分类点击时控制onPageScroll不再执行
  clickScrollTop(e){
    this.customData.noScroll=e.detail.noScroll
  },
  //监听屏幕滚动 
  onPageScroll: function (ev) {
    if(this.customData.noScroll){
      this.customData.noScroll=false
      return;
    }
    this.setData({
      topScrollHeight:ev.scrollTop+2
    })
    
  },
  //左侧分类及分类商品
  GetTagList: function () {
    var that = this;
     
    //此处应该是接口请求获取数据内容。数据布局如下,有二级分类
    let tag=[
        { title:"分类一", id:0, 
          goodsList:[  
            {title:"商品一", id:0,},
            {title:"商品二", id:1,}
          ],
          secondList:[  
            { title:"二级分类名一", id:0,
              goodsList:[  
                {title:"商品一", id:0,},
                {title:"商品二", id:1,}
              ],
            },
            { title:"二级分类名二", id:1,
                goodsList:[  
                {title:"商品一", id:0,},
                {title:"商品二", id:1,}
              ],
            }
          ], //二级分类
        },
        { title:"分类二", id:0, 
          goodsList:[  
            {title:"商品一", id:0,},
            {title:"商品二", id:1,}
          ],
          secondList:[  
            { title:"二级分类名一", id:0,
              goodsList:[  
                {title:"商品一", id:0,},
                {title:"商品二", id:1,}
              ],
            },
            { title:"二级分类名二", id:1,
                goodsList:[  
                {title:"商品一", id:0,},
                {title:"商品二", id:1,}
              ],
            }
          ], //二级分类
        }
     ]
     that.setData({
        tagLists:tag,
     })
    

    function csHeight(){
      wx.createSelectorQuery().select('.p-top').boundingClientRect(function (rect) {
        if(rect==null) return;
        that.setData({
          topHeight:0  //此处使用wx.createSelectorQuery()是为了延迟获取内容高度,并赋值为固定数值2,为了改变数据监听重新获取内容高度
        })
      }).exec();
        
      //此处是为了获取分类商品区域到顶部的其他内容的高度,并页面滑动时二级分类标题使用position: sticky;粘性定位到顶部的距离
      wx.createSelectorQuery().select('.stickyTop').boundingClientRect(function (rect) {
        if(rect==null) return;
        that.setData({
          navBlockHeight:rect.height-1
        })
      }).exec();
    }
  },
  // 指定排序的比较函数
  compareAsc(property){
    return function(obj1,obj2){
      var value1 = obj1[property];
      var value2 = obj2[property];
      return value1 - value2;     // 升序
    }
  },
  compareDesc(property){
    return function(obj1,obj2){
      var value1 = obj1[property];
      var value2 = obj2[property];
      return value2 - value1;     // 降序
    }
  },
   //前端排序
  //一级分类 销量 排序
  goodsSaleSort(e){
    if(this.data.costoSort){
      this.setData({
        costoSort:"",
        costoIndex:""
      })
    }
    let index=e.currentTarget.dataset.oneindex;
    let sortlist=this.data.tagLists[index].goodsList
    if(this.data.saleSort==''){
      sortlist.sort(this.compareDesc("sales"))
      this.setData({
        saleSort:"desc",
        saleIndex:index
      })
    }else{
      sortlist.sort(this.compareDesc("gt_id"))
      this.setData({
        saleSort:"",
        saleIndex:index
      })
    }
    this.setData({
      [`tagLists[${index}].goodsList`]:sortlist
    })
  },
  //一级分类 价格 排序
  goodsCostoSort(e){
    this.setData({
      saleSort:"",
      saleIndex:""
    })
    let index=e.currentTarget.dataset.oneindex;
    let List=this.data.tagLists
    let sortlist=List[index].goodsList
    if(this.data.costoSort=='desc'){
      sortlist.sort(this.compareAsc("costo"))
      this.setData({
        costoSort:"asc",
        costoIndex:index
      })
    }else{
      sortlist.sort(this.compareDesc("costo"))
      this.setData({
        costoSort:"desc",
        costoIndex:index
      })
    }
    this.setData({
      [`tagLists[${index}].goodsList`]:sortlist
    })
  },
  //二级 销量 排序
  goodsSaleSort_second(e){
    if(this.data.costoSort){
      this.setData({
        costoSort:"",
        costoIndex:""
      })
    }
    let index=e.currentTarget.dataset.oneindex;
    let index2=e.currentTarget.dataset.twoindex;
    let sortlist=this.data.tagLists[index].secondList[index2].goodsList
    if(this.data.saleSort==''){
      sortlist.sort(this.compareDesc("sales"))
      this.setData({
        saleSort:"desc",
        saleIndex:index2
      })
    }else{
      sortlist.sort(this.compareDesc("gt_id"))
      this.setData({
        saleSort:"",
        saleIndex:index2
      })
    }
    this.setData({
      [`tagLists[${index}].secondList[${index2}].goodsList`]:sortlist
    })
  },
  //二级分类 价格 排序
  goodsCostoSort_second(e){
    this.setData({
      saleSort:"",
      saleIndex:""
    })
    let index=e.currentTarget.dataset.oneindex;
    let index2=e.currentTarget.dataset.twoindex;
    let sortlist=this.data.tagLists[index].secondList[index2].goodsList
    if(this.data.costoSort=='desc'){
      sortlist.sort(this.compareAsc("costo"))
      this.setData({
        costoSort:"asc",
        costoIndex:index2
      })
    }else{
      sortlist.sort(this.compareDesc("costo"))
      this.setData({
        costoSort:"desc",
        costoIndex:index2
      })
    }
    this.setData({
      [`tagLists[${index}].secondList[${index2}].goodsList`]:sortlist
    })
  },
  onTabCLick(e) {
    const index = e.detail.index
    this.setData({activeTab: index})
  },
  onChange(e) {
    const index = e.detail.index
    this.setData({activeTab: index})
  },
  
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.GetTagList();
  },

  
})

4.wxss代码

.fLtitle{
  font-weight: bold;
  font-size: 14px;
}

.weui-vtabs{
  background-color: #eeeeee;
}

.weui-vtabs-bar__wrp {
  margin-bottom: 45px;
  height: calc(100vh - 250px)!important;
  position: fixed!important;
}

.weui-vtabs-content__wrp{
  width: 78%!important;
  margin-left: 22%;
  overflow: visible!important;
}

.vtabs_title, .vtabs_second{
  position: sticky;
  z-index: 98;
  background: #fff;
  padding: 10px 0;
}

.No_products{
  text-align: center;
  padding: 10px 0;
}
.itemList .sp-list:last-child{
  margin-bottom: 0px!important;
}



总结

本文介绍了如何使用小程序组件,使用页面滑动实现左右区域联动选择。

你可能感兴趣的:(前端,小程序,onPageScroll,javascript,css)