黑马优购小程序之分类模块

2024-05-12 10:48
文章标签 模块 程序 黑马 分类 优购

本文主要是介绍黑马优购小程序之分类模块，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

      • 1.1 目标效果图
      • 1.2 网络请求和数据解析
        • 1.2.1 数据解析
        • 1.2.2 构建网络请求，处理数据
      • 1.3 绘制UI
        • 1.3.1 引入自定义组件
        • 1.3.2 页面左右分割
        • 1.3.3 左侧菜单列表
        • 1.3.4 右侧商品子类别
      • 1.3 点击菜单切换商品内容
        • 1.3.1 选中菜单添加`active`样式
        • 1.3.2 动态切换右侧商品内容
        • 1.4 缓存
        • 1.4.1 更新UI代码抽取
        • 1.4.2 本地存储数据
        • 1.4.2 缓存设计实现
      • 1.5 切换菜单，右侧列表回顶部
        • 1.5.1 声明`scrollToTop`属性
        • 1.5.2 处理菜单点击事件
        • 1.5.3 添加`scrollTop`属性
      • 1.6 小结

1.1 目标效果图

首先，看下本节要实现的效果图：
在这里插入图片描述
由图分析：

  • 上方是一个搜索
  • 左侧是分类滑动scroll-view
  • 右侧是类别详情内容，也是一个scroll-view

1.2 网络请求和数据解析

1.2.1 数据解析

该接口数据返回格式为：

{"message":[{"cat_id":1,"cat_name":"大家电","cat_pid":0,"cat_level":0,"cat_deleted":false,"cat_icon":"/full/none.jpg","children":[{"cat_id":3,"cat_name":"电视","cat_pid":1,"cat_level":1,"cat_deleted":false,"cat_icon":"/full/none.jpg","children":[{"cat_id":5,"cat_name":"曲面电视","cat_pid":3,"cat_level":2,"cat_deleted":false,"cat_icon":"https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"},{"cat_id":6,"cat_name":"海信","cat_pid":3,"cat_level":2,"cat_deleted":false,"cat_icon":"https://api-hmugo-web.itheima.net/full/5e38cf9e6e7c46a17fe1c597a883ae627977b296.jpg"}]}]}]
}

此处message中为三套循环，第一层为左侧分类列表，第二层为分类中小类，第三层为详细产品。

1.2.2 构建网络请求，处理数据

在category/index.js中，声明所需数据：

  /*** 页面的初始数据*/data: {// 左侧菜单数组leftMenuList: [],// 右侧商品数组rightContent: []},// 定义变量接受server返回整体数据Cates: [],

引入之前设计的request

import { request } from "../../request/index.js"

发送网络请求并处理数据：

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getCates();},/* 加载分类数据*/getCates() {request({url: "https://api-hmugo-web.itheima.net/api/public/v1/categories"}).then(result => {console.log(result)this.Cates = result.data.message;// 构造左侧大菜单数据let leftMenuList = this.Cates.map(v => v.cat_name);// 构造右侧商品数据let rightContent = this.Cates[0].children;this.setData({leftMenuList,rightContent})})},

1.3 绘制UI

1.3.1 引入自定义组件

分类页面头部是一个搜索框，这个组件在上一节中已经做了处理，那在这里直接引用即可。

在category/index.json中，引入组件：

{"usingComponents": {"SearchInput":"../../components/SearchInput/SearchInput"},"navigationBarTitleText": "商品分类"
}

在category/index.wxml中，使用组件：

<view class="cates"><SearchInput></SearchInput>
</view>

效果如下：
在这里插入图片描述

1.3.2 页面左右分割

首先，将页面左右分开布局，
在category/index.wxml中，编写布局

    <view class="cates_container"><!-- 左侧菜单 --><scroll-view class="left_menu" scroll-y></scroll-view><!-- 右侧商品内容 --><scroll-view class="right_content" scroll-y></scroll-view></view>

在category/index.less文件中，编写样式文件：

page {height: 100%;
}.cates {height: 100%;.cates_container {/* 在less中使用calc时要注意 */height : ~'calc(100vh - 90rpx)';display: flex;.left_menu {flex: 2;background-color: hotpink;}.right_content {flex: 5;background-color: gold;}}
}

效果如下：
在这里插入图片描述

1.3.3 左侧菜单列表

左侧菜单，需要对leftMenuList进行循环，并先完成简单样式。
在category/index.wxml中，编写菜单遍历代码：

<!-- 左侧菜单 -->
<scroll-view class="left_menu" scroll-y><view class="menu_item" wx:for="{{leftMenuList}}" wx:key="*this">{{item}}</view>
</scroll-view>

在category/index.less文件中，编写样式代码：

.cates {height: 100%;.cates_container {/* 在less中使用calc时要注意 */height : ~'calc(100vh - 90rpx)';display: flex;.left_menu {flex: 2;.menu_item {height         : 80rpx;justify-content: center;align-items    : center;font-size      : 30rpx;display        : flex;}}}}

效果如下：
在这里插入图片描述

1.3.4 右侧商品子类别

这里，主要两个循环，第一层为子分类标题，第二层为子分类列表内容。

在category/index.wxml中，编写UI，代码如下：

<!-- 右侧商品内容 -->
<scroll-view class="right_content" scroll-y><view class="goods_group" wx:for="{{rightContent}}" wx:for-index="cate_index" wx:key="cat_id" wx:for-item="cate_item"><!-- 商品标题 --><view class="goods_title"><text class="delimiter">/</text><text class="title">{{cate_item.cat_name}}</text><text class="delimiter">/</text></view><!-- 商品分类 --><view class="goods_list"><navigator wx:for="{{cate_item.children}}" wx:for-item="good_item" wx:for-index="good_index" wx:key="cat_id"><image mode="widthFix" src="{{good_item.cat_icon}}" /><view class="goods_name">{{good_item.cat_name}}</view></navigator></view></view>
</scroll-view>

在catrgory/index.less中编写样式，如下：

.right_content {flex: 5;.goods_group {.goods_title {height         : 80rpx;display        : flex;justify-content: center;align-items    : center;.delimiter {color  : #ccc;padding: 0 10rpx;}.title {}}}.goods_list {display  : flex;flex-wrap: wrap;navigator {width     : 33.33%;text-align: center;image {width: 50%;}.goods_name {padding-bottom: 8rpx;}}}}

实现效果如下：
在这里插入图片描述

1.3 点击菜单切换商品内容

接下来，需要实现，点击左侧菜单，出现选中样式，并且，右侧商品内容同步更新。

1.3.1 选中菜单添加active样式

首先需要在点击左侧菜单时，样式更新。

在categry/index.less中，编写选中样式文件：

.left_menu {flex: 2;.menu_item {height         : 80rpx;justify-content: center;align-items    : center;font-size      : 30rpx;display        : flex;}.active{color: var(--themeColor);border-left: 5rpx solid currentColor;}
}

在category/index.js中，记录当前索引值：

  data: {// 左侧菜单数组leftMenuList: [],// 右侧商品数组rightContent: [],// 选择菜单索引currentIndex: 0},

在category/index.wxml中，判断索引，添加样式：

<!-- 左侧菜单 --><scroll-view class="left_menu" scroll-y><view class="menu_item {{currentIndex===index?'active':''}}" wx:for="{{leftMenuList}}" wx:key="*this">{{item}}</view></scroll-view>

此时，仅有第一个是选中样式，当点击菜单是没有效果的，因为还没设置点击事件，接下来添加一下吧。

在category/index.wxml中，给左侧菜单添加点击事件，并把当前索引传入。

<!-- 左侧菜单 -->
<scroll-view class="left_menu" scroll-y><view class="menu_item {{currentIndex===index?'active':''}}" wx:for="{{leftMenuList}}" wx:key="*this" bind:tap="handItemTab" data-index="{{index}}">{{item}}</view>
</scroll-view>

在category/index.js中，添加处理函数，并更新currentIndex：

// 菜单点击事件
handItemTab(e){console.log(e);// 获取索引const {index} = e.currentTarget.dataset;this.setData({currentIndex: index})
},

这样，即完成菜单点击效果的切换。

1.3.2 动态切换右侧商品内容

根据点击菜单，更新右侧商品内容，只需要通过index获取商品数据即可

// 菜单点击事件
handItemTab(e){console.log(e);// 获取索引const {index} = e.currentTarget.dataset;// 更新右侧商品数据let rightContent = this.Cates[index].children;this.setData({currentIndex: index,rightContent})
},

如上，就完成了右侧内容的动态切换。

1.4 缓存

以商品分类接口为例，其返回数据较多，在网络不好的情况较慢，无论是在用户体验还是技术角度都是不好的，实际项目中，需要对这种变化频率不高、数据量较大的接口增加缓存。

实现方案如下：

  • 检查本地有无缓存，如果没有，网络请求数据，并缓存到本地
  • 如果有，检查是否过期。如过期，网络请求，并缓存到本地
  • 如果未过期，直接使用数据即可
1.4.1 更新UI代码抽取

将更新UI代码操作，抽取独立方法，如下：

/* 更新UI */
updateUI() {// 构造左侧大菜单数据let leftMenuList = this.Cates.map(v => v.cat_name);// 构造右侧商品数据let rightContent = this.Cates[0].children;this.setData({leftMenuList,rightContent})
},
1.4.2 本地存储数据

在网络请求后，调用小程序API存储数据：

/* 加载分类数据*/
getCates(){request({url: "https://api-hmugo-web.itheima.net/api/public/v1/categories"}).then(result => {console.log(result)this.Cates = result.data.message;// 本地存储数据wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });this.updateUI();})
},
1.4.2 缓存设计实现

在页面onLoad方法中，根据思路，假如本地缓存判断相关代码，详细如下：

/*** 生命周期函数--监听页面加载*/
onLoad: function (options) {// 获取本地存储数据const localCates = wx.getStorageSync("cates");if (!localCates) {// 本地没有，网络请求this.getCates();} else {// 本地有数据，判断是否过期 此处为60秒if (Date.now() - localCates.time > 1000 * 10 * 6) {// 数据过期this.getCates();} else {// 本地数据有效this.Cates = localCates.data;this.updateUI();}}
},

如上，完成后可自行测试，绝对生效了~

1.5 切换菜单，右侧列表回顶部

现在分类页面还存在一个问题，当选中一个菜单，右边内容向下滚动后，再次点菜单按钮，右侧内容显示没有回顶部，效果如下：
在这里插入图片描述
接下来，修复一下这个问题，其实也很简单，scroll-view提供了一个属性scrollTop，在切换左侧菜单的时候，将其属性设置为0即可。

1.5.1 声明scrollToTop属性

在category/index.js中的Page data中，声明属性，如下：

// 右侧内容的滚动条
scrollToTop: 0
1.5.2 处理菜单点击事件

在点击事件中，对当前点击菜单进行判断：

 // 菜单点击事件handItemTab(e) {console.log(e);// 获取索引const { index } = e.currentTarget.dataset;// 如果重复点击标签，不做操作if(index==this.data.currentIndex){return;}// 更新右侧商品数据let rightContent = this.Cates[index].children;this.setData({currentIndex: index,rightContent,scrollToTop: 0})},
1.5.3 添加scrollTop属性

在category/index.wxml中给scroll-view添加属性

<!-- 右侧商品内容 -->
<scroll-view class="right_content" scroll-y scroll-top="{{scrollToTop}}">
....
</scroll-view>

1.6 小结

本节初步完成了分类页面的展示，关键点如下：

  • 左菜单右内容UI布局
  • scroll-view使用及注意事项
  • 缓存处理

这篇关于黑马优购小程序之分类模块的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/982418。

相关文章

多模块的springboot项目发布指定模块的脚本方式

多模块的springboot项目发布指定模块的脚本方式

《多模块的springboot项目发布指定模块的脚本方式》该文章主要介绍了如何在多模块的SpringBoot项目中发布指定模块的脚本,作者原先的脚本会清理并编译所有模块,导致发布时间过长,通过简化脚本... 目录多模块的springboot项目发布指定模块的脚本1、不计成本地全部发布2、指定模块发布总结多模
阅读更多...
Python中构建终端应用界面利器Blessed模块的使用

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置：简单、快速、无障碍二、基本功能：从彩色文本到动态交互1. 显示基本内容2. 创建链
阅读更多...
Node.js 中 http 模块的深度剖析与实战应用小结

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器：基石搭建（一
阅读更多...
python中的与时间相关的模块应用场景分析

python中的与时间相关的模块应用场景分析

《python中的与时间相关的模块应用场景分析》本文介绍了Python中与时间相关的几个重要模块：`time`、`datetime`、`calendar`、`timeit`、`pytz`和`dateu... 目录1. time 模块2. datetime 模块3. calendar 模块4. timeit
阅读更多...
Python模块导入的几种方法实现

Python模块导入的几种方法实现

《Python模块导入的几种方法实现》本文主要介绍了Python模块导入的几种方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录一、什么是模块？二、模块导入的基本方法1. 使用import整个模块2.使用from ... i
阅读更多...
基于人工智能的图像分类系统

基于人工智能的图像分类系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 1. 引言 图像分类是计算机视觉中的一个重要任务，目标是自动识别图像中的对象类别。通过卷积神经网络（CNN）等深度学习技术，我们可以构建高效的图像分类系统，广泛应用于自动驾驶、医疗影像诊断、监控分析等领域。本文将介绍如何构建一个基于人工智能的图像分类系统，包括环境
阅读更多...
python: 多模块(.py)中全局变量的导入

python: 多模块(.py)中全局变量的导入

文章目录 global关键字可变类型和不可变类型数据的内存地址单模块(单个py文件)的全局变量示例总结 多模块(多个py文件)的全局变量from x import x导入全局变量示例 import x导入全局变量示例 总结 global关键字 global 的作用范围是模块(.py)级别： 当你在一个模块（文件）中使用 global 声明变量时，这个变量只在该模块的全局命名空
阅读更多...
认识、理解、分类——acm之搜索

认识、理解、分类——acm之搜索

普通搜索方法有两种：1、广度优先搜索；2、深度优先搜索； 更多搜索方法： 3、双向广度优先搜索； 4、启发式搜索（包括A*算法等）； 搜索通常会用到的知识点：状态压缩（位压缩，利用hash思想压缩）。
阅读更多...
深入探索协同过滤：从原理到推荐模块案例

深入探索协同过滤：从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤（UserCF）2. 基于物品的协同过滤（ItemCF）3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代，推荐系统成为连接用户与内容的桥梁。本文聚焦于
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2