微信小程序开发，实现商品分类商品列表（二）

微信小程序开发，实现商品分类（一）： https://blog.csdn.net/jky_yihuangxing/article/details/141568915

1. 前言导读

在前集文章中，我们通过使用scroll-view 实现了左侧边栏的商品分类，今天我们来实现点击左侧边栏的分类，对应右边的商品列表数据

2. 官方文档指南

1. scroll-view: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

功能描述
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

• 横向滚动需打开 enable-flex 以兼容 WebView，如

<scroll-view scroll-x enable-flex style="flex-direction: row;"/>

• 滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确
• 使用 worklet 函数需要开启开发者工具 “将 JS 编译成 ES5” 或 “编译 worklet 函数” 选项。

通用属性

属性	类型	默认	必填	说明
scroll-x	boolean	false	否	允许横向滚动
scroll-y	boolean	false	否	允许纵向滚动
upper-threshold	number/string	50	否	距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold	number/string	50	否	距底部/右边多远时，触发 scrolltolower 事件
scroll-top	number/string		否	设置竖向滚动条位置
scroll-left	number/string		否	设置横向滚动条位置
scroll-into-view	string		否	值为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	boolean	false	否	在设置滚动条位置时使用动画过渡

详情请看官方文档 | 详情请看官方文档 | 详情请看官方文档 | 详情请看官方文档 | 详情请看官方文档

3.右侧整体布局分析

分析右边商品布局整体是一个可以滑动的列表（当数据超过一屏时，可滑动），因此，最外层应该用scroll-view来包裹，跟左侧栏分类一样

4. 代码实现过程

1.编写布局文件cate.wxml

<view class="category-container">
		<navigation-bar title="购物商城" back="{{false}}" color="#ffffff" background="#f3514f"></navigation-bar>
		<view class="category-content-container">
				<!-- 左边的滚动视图区域 -->
				<scroll-view class="category-left-scroll" scroll-y type="list">
						<view class="left-view-item  {{activeIndex===index? 'active' : ''}}" active wx:for="{{categoryList}}" wx:key="category_id" bind:tap="selectCategory" data-currentIndex="{{index}}">
								{{item.category_name}}
						</view>
				</scroll-view>
				<!-- 右边边的滚动视图区域 -->
				<scroll-view class="category-right-scroll" scroll-y type="list">
						<view>
								<view class="search-container" bind:tap="searchOnClick">🔍 商品搜索</view>
								<view class="category-right-container">
										<view class="category-item" wx:for="{{productList}}" wx:key="objectId" bind:tap="startDetailsOnClick" data-item="{{item}}">
												<image src="{{item.product_img}}" mode="" />
												<text>{{item.product_title}}</text>
										</view>
								</view>
						</view>
				</scroll-view>
		</view>
</view>

• 这里使用了系统默认的navigation-bar组件，所以需要在cate.json文件中注册

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  }
}

2. 编写样式文件cate.wxcss

.category-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.category-content-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.category-left-scroll {
  flex: 1;
  overflow: scroll;
  background-color: #f5f5f5;
}

.left-view-item {
  height: 88rpx;
  color: #333333;
  line-height: 88rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  text-align: center;
  border-left: 6rpx solid #ffffff;
  font-size: 26rpx;
}

.active {
  border-left: 6rpx solid #f3514f;
  color: #f3514f;
  background-color: #ffffff;
}

.category-right-scroll {
  overflow: scroll;
  flex: 4;
}

.search-container {
  display: flex;
  background-color: #f5f5f5;
  margin: 20rpx;
  height: 60rpx;
  padding-left: 10rpx;
  line-height: 60rpx;
  color: #999999;
  font-size: 23rpx;
  border-radius: 10rpx;
}

.category-right-container {
  display: grid;
  margin-top: 20rpx;
  grid-template-columns: auto auto auto;
}

.category-right-container .category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

.category-right-container .category-item image {
  width: 168rpx;
  height: 168rpx;
}

.category-right-container .category-item text {
  width: 168rpx;
  margin-top: 10rpx;
  color: #333333;
  font-size: 26rpx;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

}

3. 编写具体代码实现cate.js

• 首先在data 里面定义一个空数组 productList: []，categoryList: []
• 然后定义一个点击左侧栏切换的时候，加载对应的商品列表数据的方法,取名叫selectCategoryList

// pages/cate/cate.js
import http from "../../net/http"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    categoryList: [], //左侧商品分类列表
    productList: [], //右侧商品数据
    activeIndex: 0 //默认选中下标 
  },


  /**点击左侧分类 */
  selectCategory(event) {
    const currentIndex = event.currentTarget.dataset.currentindex
    console.log(event)
    this.setData({
      activeIndex: currentIndex
    })
    //切换时加载数据
    this.getPoroductListData(this.data.categoryList[currentIndex].category_name)

  },

  /**
   * 跳转到详情
   * @param  position 
   */
  startDetailsOnClick(event) {

    let itemInfo = event.currentTarget.dataset.item
    console.log(JSON.stringify(itemInfo))
    wx.navigateTo({
      url: '/pages/details/details?item=' + JSON.stringify(itemInfo)
    })

  },


  /**
   * 跳转到搜索页面
   */
  searchOnClick() {
    wx.navigateTo({
      url: '/pages/search/search',
    })
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({})
    this.getCategoryList()

  },

  /**
   * 获取商品分类
   */
  getCategoryList() {
    http.get('/queryCategoryInfo', null, {
      isLoading: false
    }).then(res => {
      if (res.data.code == 200) {

        this.setData({
          categoryList: res.data.data.list
        })

        //获取对应的商品列表
        if (res.data.data.list.length > 0) {
          this.getPoroductListData(res.data.data.list[0].category_name)
        }
      }

    })
  },

  /**
   * 获取商品列表
   */

  getPoroductListData(category_name) {
    const prams = {
      category: category_name
    }
    http.get('/queryProductList', prams, {
      isLoading: true
    }).then(res => {
      if (res.data.code == 200) {
        this.setData({
          productList: res.data.data.list
        })
      }
    })

  },
})

• 数据为后台接口数据，请自行模拟数据即可~

5. 运行效果图