【系】微信小程序云开发实战坚果商城-前端之分类实现

第 2-3 课：前端之分类实现

目录

• 开篇
  • 【系】微信小程序云开发实战坚果商城-开篇
• 基础篇
  • 【系】微信小程序云开发实战坚果商城-弹性盒子
  • 【系】微信小程序云开发实战坚果商城-ES6 简单入门
  • 【系】微信小程序云开发实战坚果商城-官方案例先运行
• 前端篇
  • 【系】微信小程序云开发实战坚果商城-商城项目搭建
  • 【系】微信小程序云开发实战坚果商城-所有目录…

所在路径 client/pages/category/category

1 分类基本实现

category.js data数据如下，目前我们是没有调后台的数据，默认给出默认值方便页面的展示

 data: {
    menuCategories: [{
        category_name: '坚果炒货',
        category_type: 1
      },
      {
        category_name: '休闲零食',
        category_type: 2
      },
      {
        category_name: '饼干蛋糕',
        category_type: 3
      },
      {
        category_name: '蜜饯果干',
        category_type: 4
      },
      {
        category_name: '肉干肉脯',
        category_type: 5
      },
    ],
    menuSelect: 1,
    menuNmae: '',
    products: [{
        _id: "5cf526aaa87a1a18b6624ae6",
        product_description: "",
        product_img: "cloud://release-prod.7265-release-prod/product/product-nux@1.png",
        product_name: "花生 300g",
        product_price: 0.1,
        product_sell_price: 0.1,
        product_stock: 100
      },
      {
        _id: "5cf526aaa87a1a18b6624ae8",
        product_description: "",
        product_img: "cloud://release-prod.7265-release-prod/product/product-nux@2.png",
        product_name: "夏威夷果 120g",
        product_price: 0.1,
        product_sell_price: 0.1,
        product_stock: 100
      },
      {
        _id: "5cf526aaa87a1a18b6624aea",
        product_description: "",
        product_img: "cloud://release-prod.7265-release-prod/product/product-nux@3.png",
        product_name: "杏仁 120g",
        product_price: 0.1,
        product_sell_price: 0.1,
        product_stock: 100
      },
      {
        _id: "5cf526aaa87a1a18b6624aec",
        product_description: "",
        product_img: "cloud://release-prod.7265-release-prod/product/product-nux@4.png",
        product_name: "黑桃 180g",
        product_price: 0.1,
        product_sell_price: 0.1,
        product_stock: 100
      }
    ]
  },

category.wxml

<!--pages/category/category.wxml-->
<view class='container'>
  <!--  分类左边选择区域 -->
  <scroll-view class='left-container' scroll-y="true">
    <block wx:for="{{menuCategories}}" wx:key="key">
      <view class="categoryBar {{ menuSelect==item.category_type?'active':''}}" data-id='{{item.category_type}}' data-index='{{index}}' bind:tap="menu">
        <text >{{item.category_name}}</text>
      </view>
    </block>  
  </scroll-view>
  <!-- 分类右边选择区域 -->
   <scroll-view class='right-container' scroll-y="true">
    <!--主题宣传图  -->
    <view class='introduce-image'>
      <image src='../../images/temp/category.png'></image>
    </view>
    <view class='category-name'>
      <text>{{menuNmae}}</text>
    </view>
    <view class='product-container'>
      <block wx:for="{{products}}" wx:key="key">
        <category-comp  product="{{item}}" bind:productDetails="productDetails"  >      </category-comp>
      </block>   
    </view>
  </scroll-view>
</view>

category.wxss

/* pages/category/category.wxss */
.container{
  display: inline-flex;
  width: 100%;
  height: 100%;
  background-color: white;
  align-items:flex-start;
  flex-direction:row;
}
.left-container{
  width:146rpx;
  height: 100%;
  background:rgba(248,248,248,1);
}
.categoryBar{
  display: inline-flex;
  width:100%;
  height:100rpx;
  justify-content: center;
  align-items: center;
  color:#7A7A7A;
}
.categoryBar text{
  font-size:24rpx;
  font-weight:500;
  line-height:40rpx;
}
.active{
  color:#000000;
  background:#fff;
  border-left:6rpx solid #FF6200;
}
.active text{
  color: #FF6200;
}
/* 隐藏滚动条 */
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
/* 右边 */
.right-containerr{
  width: 100rpx;
  min-height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.introduce-image{
  margin: 20rpx 16rpx;
}
.introduce-image image{
  width:590rpx;
  height:270rpx;
  background:rgba(255,255,255,1);
  border-radius:10rpx;
}
.category-name{
  font-size:30rpx;
  font-weight:400;
  color:#686868;
  text-align: center;
}
oduct-container{
  display: flex;
  flex-wrap:wrap;
  margin: 10rpx 16rpx;
}

category.json

{
  "navigationBarTitleText": "分类",
  "usingComponents": {
    "category-comp": "/components/product-category/index"
  }
}

2 分类组件实现

商品信息我们任然封装成组件 product-category/index：

index.js 在上章我们把商品组件公共的数据封装成 Behavior ，在这里就可以直接复用

// components/category/index.js
let productBehavior = require('../behaviors/product-behavior.js')
Component({
  /**
   * 组件的属性列表
   */

  properties: {
    
  },
  behaviors: [productBehavior],
  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
	

  }
})

index.wxml

<!--components/category/index.wxml-->
<view class='container' >
  <view class='product-img' >
    <image src='{{product.product_img}}'></image>
  </view>
  <view class='product-name'>
    <text>{{product.product_name}}</text>
  </view>
</view>

index.wxss

/* components/category/index.wxss */
.container{
  display: inline-flex;
  flex-flow: column;
  align-items: center;
  width:180rpx;
  margin-top: 20rpx;
  margin-left: 18rpx;
}
.product-img image{
  width:120rpx;
  height:120rpx;
}
.product-name{
  width: 150rpx;
  font-size:22rpx;
  font-weight:400;
  color:#838383;
  text-align: center;
}

完成效果如下：

部署不成功、图片无法显示、数据库无法获取，快速部署坚果商城，欢迎微信搜索「山间木匠」，后台回复关键字「坚果商城」获取最新PDF

源码地址

在搭建项目前，根据自己需要下载本系列文章的源代码

本项目源码地址：https://gitee.com/mtcarpenter/nux-shop