小程序二级分类页面布局

小程序二级分类页面布局

// pages/category/category.js
const app = getApp();
const db = wx.cloud.database();
 
Page({

  /**
   * 页面的初始数据
   */
  data: {
    "bnrUrl": [{
      "url": "a.jpg",
      "productId":"3d23c0a05f0feeb70001495a19048f6a",
      "Type":"category"
    }/*, {
      "url": "b.jpg",
      "productId":"94f505805f12a2e10022158f304c89d4",
      "Type":"category"
    }, {
      "url": "c.jpg",
      "productId":"b58263a25f2831330054be4e05c42cd4",
      "Type":"photo"
    }, {
      "url": "d.jpg",
      "productId":"9170e7955f618cc8000e70343fc18e43",
      "Type":"richArticle"
    }
  */],
    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:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this._init()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

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

  },

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

  },

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

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  _init:function(){
    var that=this;
    db.collection('banner')
    .where({
      rmk: '1'
    }).get({
      success(e) {
        that.setData({
          bnrUrl:e.data
        })
      }
    })
	db.collection('category')
    .where({
      rmk: '1'
    }).get({
      success(e) {
          let menuCategories = res.result.data.data
      let menuSelect =  menuCategories[0].category_type
      let menuNmae = menuCategories[0].category_name
      this.setData({
        menuCategories,
        menuSelect,
        menuNmae       
      })
      this._getCateGory(menuSelect)
      }
    }) 
    
  },
  // 菜单切换
  menu: function (event){
    let index = category.getDataSet(event, "index")
    let menuCategories = this.data.menuCategories
    let menuSelect = menuCategories[index].category_type
    let menuNmae = menuCategories[index].category_name
    this._getCateGory(menuSelect)
    this.setData({
      menuSelect,
      menuNmae
    })
  },
  // 跳转商品详情
  toDetails:function(e){
    var type= e.currentTarget.dataset.type;
    var productId= e.currentTarget.dataset.productid;
    if("category"==type){
      wx.navigateTo({
        url: '/pages/product/product?product_id=' + productId,
      }) 
    }else{
      wx.navigateTo({
        url: '/pages/details/' +type + '/' +type + '?scene=' +productId,
      })
    }
   
  },// 跳转商品详情
  productDetails:function(e){
    wx.navigateTo({
      url: '/pages/product/product?product_id=' + e.detail.productId,
    }) 
  },
  _getCateGory:function(type){
   
	db.collection('Product')
    .where({
      rmk: '1'
    }).get({
      success(e) {
       this.setData({
        products: data.result.data.data
      }) 
      }
    }) 
  },
   //触底加载
   bottom() {
    var that = this;
    wx.showLoading({
      title: '加载中',
    })
    this._init()
  }
})

<!-- 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' >
			<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true' >
				<block wx:for="{{bnrUrl}}" wx:for-index="index">
					<swiper-item >
						<view class='item-content' data-Type="{{item.Type}}" data-productId="{{item.productId}}" bindtap="toDetails">
							<image src='{{item.url}}' class='u-img-slide' mode='aspectFill'> 
							</image>
							<text class='tags'>{{item.title}}</text>
							<view class='title'>12122222222222</view>

						</view>
					</swiper-item>
				</block>
			</swiper>
		</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>

/* 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;
}
 
.introduce-image .tags{ 
display: inline-block;
padding: 0 20rpx 180rpx 20rpx; 
height: 28rpx;
border-radius: 48rpx;
font-family: 'PingFangSC-Medium';
font-size: 24rpx; 
letter-spacing: 0;
line-height: 48rpx;
text-align: center;
z-index: 9998;
}
.introduce-image .title{
font-size: 72rpx;
color: #eb3939;
margin-bottom: 184rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 9999;
}

{
  "navigationBarTitleText": "福利",
  "usingComponents": {
    "category-comp": "/components/product-category/index"
  }
}

/components/product-category/index

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

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