189 8069 5689

uni-app商品分类页面怎么实现

这篇文章主要介绍“uni-app商品分类页面怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“uni-app商品分类页面怎么实现”文章能帮助大家解决问题。

在文登等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站制作、成都网站建设 网站设计制作按需定制,公司网站建设,企业网站建设,品牌网站建设,成都营销网站建设,成都外贸网站制作,文登网站建设费用合理。

一、渲染右侧二级和三级分类

1.1 动态渲染二级分类页面

  • 在data节点定义数据cateList2

data() {
      return {
        //当前设备可用高度
        windowHeight: '',
        // 分类页数据
        cateList: [],
        // active 索引判断
        active: 0,
        // 二级分类数据
        cateList2: [],
      };
    },

  • 请求数据时在函数getCateList为其赋值（默认为第一个数据，动态数据变化在active

async getCateList() { // async 异步不能使用箭头函数
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/categories')
        // 判断是否赋值成功
        if (res.meta.status != 200) return uni.$showMsg()
        // 一级分类赋值 
        this.cateList = res.message
        // 二级分类赋值
        this.cateList2 = this.cateList[0].children
      }
    }

  • 在active激活项函数activeTap也对其进行动态数据绑定

methods: {
      // 触击事件绑定
      activeTap(options) {
        // 传参方法一：
        // this.active = options.target.dataset.active
        // 传参方法二
        this.active = options
        // 动态修改二级列表
        this.cateList2 = this.cateList[options].children
      },

效果：

uni-app商品分类页面怎么实现

二、渲染二级分类UI结构

  • 结构


      
        
          
        {{'/ ' + item.cat_name + ' /'}}           
        
        
          
            
              
            
          
        
        
      

  • 样式

.cate-level2-title {
    font-weight: 700;
    padding: 2px;
    font-size: 14px;
  }

效果：

uni-app商品分类页面怎么实现

三、渲染三级分类UI结构

注意：在样式image组件的属性mode尽量不要使用，样式会很难调整

  • 结构


      
        
          
          {{'/ ' + item.cat_name + ' /'}} 
          
          
            
            
              
              
              
              {{prd.cat_name}}
            
          
        
      

  • 样式

.scroll-view-right {

    background-color: #fff;

    .cate-level2-title {
      font-weight: 700;
      padding: 2px;
      font-size: 14px;
      text-align: center;
    }

  }

  .cate-level2 {
    padding: 10rpx;
    padding-bottom: 20rpx;
  }

  // 三级分类样式
  .cate-level3-list {
    display: flex;
    // 允许自动换行
    flex-wrap: wrap;

    .cate-level3-list-item {
      // 整体三分之一
      width: 33.33%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      justify-content: space-around;
      align-items: center;

      image {
        width: 160rpx;
        height: 160rpx;
        margin-bottom: 5rpx;
      }

      text {
        font-size: 25rpx;
      }
    }

  }

效果：

uni-app商品分类页面怎么实现

四、切换一级分类重置滚动条位置

  • 在data节点定义数据scrollTop

注意：对scrollTop 赋值前后值不变情况下会没有效果，如果默认值为0，函数动态赋值也为0，那么组件就会默认为0，视为没有变化，这里解决方法是在0，1变化（1像素默认其为顶部，一点点偏差用户看不出来的????）

data() {
      return {
        //当前设备可用高度
        windowHeight: '',
        // 分类页数据
        cateList: [],
        // active 索引判断
        active: 0,
        // 二级分类数据
        cateList2: [],
        // 滚动条位置 
        scrollTop: 1 
      };
    },

  • 为scroll-view动态绑定scroll-top属性值


 

  • 切换一级分类，动态设置scrollTop

// 触击事件绑定
 activeTap(options) {
   // 传参方法一：
   // this.active = options.target.dataset.active
   // 传参方法二
   this.active = options
   // 动态修改二级列表
   this.cateList2 = this.cateList[options].children
   // 重置滚动条位置 动态变化
   this.scrollTop = this.scrollTop === 0 ? 1 : 0
 },

uni-app商品分类页面怎么实现

五、点击三级分类跳转到商品页面

  • 绑定事件函数

  • 定义函数跳转页面，并传参数 商品id

gotoGoodsList: prd => {
    uni.navigateTo({
      url: '/subpackages/goods_list/goods_list?cat_id=' + prd.cat_id
    })

效果：

uni-app商品分类页面怎么实现

六、分支的提交和合并

  • git status  注释：查看当前文件状态

  • git add .  注释： 提交所有文件到暂存区

  • git commit -m "完成分类页面的开发" 注释：提交到本地仓库

  • git push -u origin cate 注释：提交到远程仓库的cate分支

  • git branch 注释：查看当前分支

  • git checkout master 注释：切换到主分支

  • git merge cate 注释：合并cate分支

  • git push 注释：上传主分支到远程仓库

  • git branch -d cate 注释：本地cate分支

关于“uni-app商品分类页面怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。


当前标题：uni-app商品分类页面怎么实现
URL链接：http://cdxtjz.cn/article/jicchs.html

其他资讯