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

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。

相关文章

java程序远程debug原理与配置全过程

java程序远程debug原理与配置全过程

《java程序远程debug原理与配置全过程》文章介绍了Java远程调试的JPDA体系,包含JVMTI监控JVM、JDWP传输调试命令、JDI提供调试接口,通过-Xdebug、-Xrunjdwp参数配... 目录背景组成模块间联系IBM对三个模块的详细介绍编程使用总结背景日常工作中，每个程序员都会遇到bu
阅读更多...
Python sys模块的使用及说明

Python sys模块的使用及说明

《Pythonsys模块的使用及说明》Pythonsys模块是核心工具,用于解释器交互与运行时控制,涵盖命令行参数处理、路径修改、强制退出、I/O重定向、系统信息获取等功能,适用于脚本开发与调试,需... 目录python sys 模块详解常用功能与代码示例获取命令行参数修改模块搜索路径强制退出程序标准输入
阅读更多...
Python pickle模块的使用指南

Python pickle模块的使用指南

《Pythonpickle模块的使用指南》Pythonpickle模块用于对象序列化与反序列化,支持dump/load方法及自定义类,需注意安全风险,建议在受控环境中使用,适用于模型持久化、缓存及跨... 目录python pickle 模块详解基本序列化与反序列化直接序列化为字节流自定义对象的序列化安全注
阅读更多...
uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面：本文主要介绍uni-app小程序项目中实... 目录方式一：使用<canvas>实现图片压缩（推荐，兼容性好）示例代码（小程序平台）：方式二：使用uni
阅读更多...
python pymodbus模块的具体使用

python pymodbus模块的具体使用

《pythonpymodbus模块的具体使用》pymodbus是一个Python实现的Modbus协议库,支持TCP和RTU通信模式,支持读写线圈、离散输入、保持寄存器等数据类型,具有一定的参考价值... 目录一、详解1、 基础概念2、核心功能3、安装与设置4、使用示例5、 高级特性6、注意事项二、代码示例
阅读更多...
python获取指定名字的程序的文件路径的两种方法

python获取指定名字的程序的文件路径的两种方法

《python获取指定名字的程序的文件路径的两种方法》本文主要介绍了python获取指定名字的程序的文件路径的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 最近在做项目，需要用到给定一个程序名字就可以自动获取到这个程序在Windows系统下的绝对路径，以下
阅读更多...
Python中logging模块用法示例总结

Python中logging模块用法示例总结

《Python中logging模块用法示例总结》在Python中logging模块是一个强大的日志记录工具,它允许用户将程序运行期间产生的日志信息输出到控制台或者写入到文件中,：本文主要介绍Pyt... 目录前言一. 基本使用1. 五种日志等级2.  设置报告等级3. 自定义格式4. C语言风格的格式化方法
阅读更多...
Python 基于http.server模块实现简单http服务的代码举例

Python 基于http.server模块实现简单http服务的代码举例

《Python基于http.server模块实现简单http服务的代码举例》Pythonhttp.server模块通过继承BaseHTTPRequestHandler处理HTTP请求,使用Threa... 目录测试环境代码实现相关介绍模块简介类及相关函数简介参考链接测试环境win11专业版python
阅读更多...
Nginx添加内置模块过程

Nginx添加内置模块过程

《Nginx添加内置模块过程》文章指导如何检查并添加Nginx的with-http_gzip_static模块：确认该模块未默认安装后,需下载同版本源码重新编译,备份替换原有二进制文件,最后重启服务验... 目录1、查看Nginx已编辑的模块2、Nginx官网查看内置模块3、停止Nginx服务4、Nginx
阅读更多...
基于Python编写自动化邮件发送程序(进阶版)

基于Python编写自动化邮件发送程序(进阶版)

《基于Python编写自动化邮件发送程序(进阶版)》在数字化时代,自动化邮件发送功能已成为企业和个人提升工作效率的重要工具,本文将使用Python编写一个简单的自动化邮件发送程序,希望对大家有所帮助... 目录理解SMTP协议基础配置开发环境构建邮件发送函数核心逻辑实现完整发送流程添加附件支持功能实现htm
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2