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

已于 2023-02-08 09:41:52 修改
阅读量2.8k 收藏 15
点赞数 1
分类专栏： 前端 小程序 onPageScroll 文章标签： javascript css
于 2023-02-07 17:26:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zan_Z/article/details/128921185
版权
小程序 同时被 3 个专栏收录
28 篇文章 1 订阅
订阅专栏
前端
26 篇文章 0 订阅
订阅专栏
onPageScroll
4 篇文章 0 订阅
订阅专栏

目录

系列文章目录

前言

一、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;样式，否则不生效

代码如下：

<mp-vtabs
    vtabs="{{tagLists}}" 
    activeTab="{{activeTab}}" 
    bindtabclick="onTabCLick"
    bindchange="onChange"
    bindclickScrollTop="clickScrollTop"
    class="test"
    tab-bar-line-color="{{zt_color}}"
    tab-bar-active-text-color="{{zt_color}}"
    tab-bar-inactive-text-color	="#605d68"
    topHeight="{{topHeight}}"
    topScrollHeight="{{topScrollHeight}}"
    navCustomHeight="{{navBlockHeight}}"
  >
    <view style="background-color: #fff;">

      <block wx:for="{{tagLists}}" wx:key="index">
        <mp-vtabs-content tabIndex="{{index}}">
          <view class="p-right-content vtabs-content-item">
            <view class="vtabs_title" style="top:{{navBlockHeight}}px">
              <view class="sortBtn">
                <view class="fLtitle">{{tagLists[index].title}}</view>
                <view class="cutlayout" wx:if="{{item.goodsList.length>0}}">
                  <view bindtap="goodsSaleSort" data-oneindex="{{index}}" style="color: {{saleSort=='desc' && saleIndex==index ? zt_color:''}};">销量</view>
                  <view class="cutlayout" bindtap="goodsCostoSort" data-oneindex="{{index}}">
                    价格
                    <view class="iconCosto">
                      <mp-icon icon="moneypxtop" color="{{costoSort=='asc' && costoIndex==index ? zt_color:'#cccccc'}}" size="{{9}}" style="height:8px"></mp-icon>
					            <mp-icon icon="moneypxbtom" color="{{costoSort=='desc' && costoIndex==index ? zt_color:'#cccccc'}}" size="{{9}}"></mp-icon>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view style="height: 80px; margin-bottom: 5px;" wx:if="{{item.picurl}}">
              <image style="width: 100%; height: 100%;" src="{{item.picurl}}" mode="aspectFill"></image>
            </view>
            <spcell-block wx:if="{{item.goodsList.length>0}}" bind:openselect="openselect" skinStyle="{{skinStyle}}" theme_color="{{theme_color}}" splist="{{item.goodsList}}" shop_options="{{shop_options}}" selectlayout="{{selectlayout}}"></spcell-block>			
            <view class="No_products" wx:else>暂无商品</view>
            
            <!-- 二级分类开始 -->
            <block wx:for="{{item.secondList}}" wx:key="index2" wx:for-index="index2"  wx:for-item="item2">              
              <view class="vtabs_second" style="top:{{navBlockHeight}}px">
                <view class="sortBtn">
                  <view class="fLtitle">{{item2.title}}</view>
                  <view class="cutlayout" wx:if="{{item2.goodsList.length>0}}" >
                    <view bindtap="goodsSaleSort_second" data-oneindex="{{index}}" data-twoindex="{{index2}}" style="color: {{saleSort=='desc' && saleIndex==index2 ? zt_color:''}};">销量</view>
                    <view class="cutlayout" bindtap="goodsCostoSort_second" data-oneindex="{{index}}" data-twoindex="{{index2}}">
                      价格
                      <view class="iconCosto">
                        <mp-icon icon="moneypxtop" color="{{costoSort=='asc' && costoIndex==index2 ? zt_color:'#cccccc'}}" size="{{9}}" style="height:8px"></mp-icon>
                        <mp-icon icon="moneypxbtom" color="{{costoSort=='desc' && costoIndex==index2 ? zt_color:'#cccccc'}}" size="{{9}}"></mp-icon>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <spcell-block wx:if="{{item2.goodsList.length>0}}" bind:openselect="openselect" skinStyle="{{skinStyle}}" theme_color="{{theme_color}}" splist="{{item2.goodsList}}" shop_options="{{shop_options}}" selectlayout="{{selectlayout}}"></spcell-block>			            
              <view class="No_products" wx:else>暂无商品</view>
            </block>
           
          </view>
        </mp-vtabs-content>
      </block>
      <view class="height45"></view>
    </view>
  </mp-vtabs>

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;
}

总结

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

Zan^Z
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 - 商城项目 - vtabs选项卡
qq_25906119的博客
01-20 681
微信小程序 - vtabs 的使用
小程序vtabs组件：实现垂直选项卡/纵向选项卡
weixin_64812436的博客
12-05 2566
vtabs组件需与 <vtabs-content> 组件结合使用 (一)效果，左边可以点击，右边详细信息与左边对应；右边可以滚动，左边的分类信息也会与之对应 (二) 具体代码过程 1、下载组件：在项目目录下打开终端，输入npm install @miniprogram-component-plus/vtabs，npm install @miniprogram-component-plus/vtabs-content 2、在小程序的页面配置文件中，注册<vtabs>和
微信小程序原生开发——商品分类左右联动页面（类似于喜茶）
weixin_43976964的博客
01-28 6152
微信原生开发商品分类左右联合滚动 首先上图看一下效果： 大概的效果就是滑动右边，左边分类会跟着滚动。点击左侧分类，右侧商品也会跟着跳到对应的分类。 类似于喜茶、瑞幸小程序那种商品分类。 .wxml <view class="bottom_menu"> <!--左侧导航栏 --> <scroll-view scroll-y="true" class="scroll_left" show-s
微信小程序商城分类菜单带滚动
12-30
微信小程序商城分类菜单带滚动
Uniapp实现左侧导航和右侧scroll-view联动
最新发布
weixin_47249500的博客
06-04 1161
1、点击左侧分类列表，高亮显示当前分类项，右侧scroll-view滑动到分类对应的位置。2、滑动右侧的scroll-view，左侧的分类列表高亮显示当前商品所属的分类。
在小程序中使用图标
LANCE的博客
12-02 4157
因为最近在自学微信小程序，掌握了他的基础的使用，包括小程序的语法、小程序的自有组件、小程序的自有API及小程序的自定义组件。 在学玩以上的各方面的知识体系后,我就想着学了这么就的微信小程序,自己总要写出点什么东西来才对的起自己这段时间来的努力吧,当然在使用的时候就遇到一 "图标"这一问题.我们在写vue也好,react项目也好,都会有之间的 ...
小程序分类页面的实现
gua551100gua的博客
11-07 3579
然后跳转到分类页面的时候，分类页面通过拿到category.id，就能在分类页面知道 在金刚区选中的分类了，从而将该分类进行高亮显示。否则不显示加号，显示购物车图标。点击商品会跳转到详情页面，需要给一个跳转链接，这个商品会有不同的类别，跳转的时候，需要根据类别，做不同的逻辑处理。需要通过一个字段进行显示，而原有数据中没有这样的字段，所以需要手动给当前的数据添加这样的字段，即需要修改原数据的。选择之后，再添加到购物车。外面一个循环，里面再套一个循环，因为内外层的id是一样的，所以可以为第二层的id起个别名。
微信小程序滚动Tab实现左右可滑动切换
12-10
综上所述，实现微信小程序滚动Tab左右可滑动切换的核心在于合理利用`scroll-view`和`swiper`组件，结合数据绑定和事件处理，完成标题与内容的联动。同时，注意页面布局和适配，确保在各种屏幕尺寸下都能有良好的用户...
小程序分类左右联动改后文件
02-07
【小程序分类左右联动改后文件】这一主题主要涉及的是微信小程序开发中的一个功能实现，即通过左右联动的方式展示分类信息。这种交互设计常见于电商、资讯等类型的小程序，能够帮助用户更直观、便捷地浏览和筛选内容...
微信小程序 省市区三级联动选择
10-14
综上所述，微信小程序的省市区三级联动选择涉及到了UI设计、数据结构、事件处理、数据更新、页面状态管理等多个技术点，通过合理的设计和实现，可以为用户提供便捷的地址输入功能。在实际开发中，还需要根据项目需求...
微信小程序实现的picker多级联动功能示例
12-29
本文实例讲述了微信小程序实现的picker多级联动功能。分享给大家供大家参考，具体如下： wxml部分： {{fenlei_title}}
仿饿了么、京东，左右联动列表，仿商城联动View
07-28
仿饿了么、京东，左右联动列表，仿商城联动View。滑到一个类型商品后，左边列表自动选中。左边点击某个类型商品，右边列表自动滑动到该类型商品。
h5仿原生商品分类滑动
06-27
分类滑动就是指用户可以通过左右滑动屏幕来切换不同的商品分类，这种方式在手机小屏幕上尤其方便，避免了下拉菜单或分页可能导致的拥挤感。 2. **仿原生分类滑动**：原生应用通常能提供更为流畅和自然的滑动体验，...
微信小程序实现滑动/点击切换Tab
热门推荐
苏苏就是小苏苏的博客
12-01 1万+
👏 swiper+scroll-view实现滑动/点击切换Tab，以及scroll-left的使用~ 🥇文末分享源代码。记得点赞+关注+收藏！
Taro跨端开发探索13——商城小程序分类页面开发
小陈的博客
06-14 1197
昨天我们实现了引导用户在商城小程序上，从首页进入搜索页搜索然后进入商品列表页的功能。今天我们开发一下分类型筛选的功能商城小程序中分类搜索要实现的功能较为简单，我们还是先看一下京喜小程序的分类搜索页面，进行需求拆分 如上图所示，我们可以看到分类搜索注意的区域有三个，从上到下依次为这个地方的逻辑和昨天我们开发的搜索引导页面的功能差不多，也是在用户手指聚焦搜索框的时候，引导用户进入搜索页面这里我们可以看到该区域支持下拉加载，点击左侧的一级分类时，右侧会显示改一级分类下的字分类作为展示子分类的区域，点击子分类的时候
4 | 小程序实战之分类页面（点击菜单切换商品种类并且右侧菜单置顶 + 使用缓存技术）
NSX-Truth
08-15 7616
1. 效果 2. 分析接口数据 3. 获取分类页面的数据接口 https://api-hmugo-web.itheima.net/api/public/v1/categories 4. 调用接口 （1）为了方便演示，添加一个编译模式 （2）现在分类页面的index.js文件中创建三个空数组 index.js data: { // 左侧的菜单数据 leftMenuList: [], // 右侧的商品数据 rightContent: [] }, // 为了方便使用数据
小程序开发---uniapp---商城项目002---分类
初遇我ㄖ寸の热情呢？
07-09 1394
【代码】小程序开发---uniapp---商城项目002---分类。
商城小程序（3.分类页面）
Kiritoasu的博客
01-02 1666
商品分类页面的相关UI，功能
小程序 页面禁止左右滑动
06-07
要禁止小程序页面左右滑动，可以通过以下两种方法实现： 1. 使用 `scroll-x` 属性 在小程序页面的 `wxml` 文件中，可以添加 `scroll-x` 属性来禁止页面左右滑动。例如： ``` 这里是页面内容 ``` 设置 `scroll-x`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值