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

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。

相关文章

Pandas使用AdaBoost进行分类的实现

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost？使用 AdaBoost 的步骤安装必要的库步骤一：数据准备步骤二：模型
阅读更多...
Python的time模块一些常用功能(各种与时间相关的函数)

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,：本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指
阅读更多...
Python正则表达式语法及re模块中的常用函数详解

Python正则表达式语法及re模块中的常用函数详解

《Python正则表达式语法及re模块中的常用函数详解》这篇文章主要给大家介绍了关于Python正则表达式语法及re模块中常用函数的相关资料,正则表达式是一种强大的字符串处理工具,可以用于匹配、切分、... 目录概念、作用和步骤语法re模块中的常用函数总结 概念、作用和步骤概念： 本身也是一个字符串，其中
阅读更多...
Python中的getopt模块用法小结

Python中的getopt模块用法小结

《Python中的getopt模块用法小结》getopt.getopt()函数是Python中用于解析命令行参数的标准库函数,该函数可以从命令行中提取选项和参数,并对它们进行处理,本文详细介绍了Pyt... 目录getopt模块介绍getopt.getopt函数的介绍getopt模块的常用用法getopt模
阅读更多...
将Java程序打包成EXE文件的实现方式

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》：本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4
阅读更多...
Java程序进程起来了但是不打印日志的原因分析

Java程序进程起来了但是不打印日志的原因分析

《Java程序进程起来了但是不打印日志的原因分析》：本文主要介绍Java程序进程起来了但是不打印日志的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java程序进程起来了但是不打印日志的原因1、日志配置问题2、日志文件权限问题3、日志文件路径问题4、程序
阅读更多...
python logging模块详解及其日志定时清理方式

python logging模块详解及其日志定时清理方式

《pythonlogging模块详解及其日志定时清理方式》：本文主要介绍pythonlogging模块详解及其日志定时清理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录python logging模块及日志定时清理1.创建logger对象2.logging.basicCo
阅读更多...
Qt spdlog日志模块的使用详解

Qt spdlog日志模块的使用详解

《Qtspdlog日志模块的使用详解》在Qt应用程序开发中,良好的日志系统至关重要,本文将介绍如何使用spdlog1.5.0创建满足以下要求的日志系统,感兴趣的朋友一起看看吧... 目录版本摘要例子logmanager.cpp文件main.cpp文件版本spdlog版本：1.5.0采用1.5.0版本主要
阅读更多...
SpringBoot实现微信小程序支付功能

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作（一）微信支付商户平台配置（二）Spring Boot项目搭建（三）配置文件
阅读更多...
Python使用date模块进行日期处理的终极指南

Python使用date模块进行日期处理的终极指南

《Python使用date模块进行日期处理的终极指南》在处理与时间相关的数据时,Python的date模块是开发者最趁手的工具之一,本文将用通俗的语言,结合真实案例,带您掌握date模块的六大核心功能... 目录引言一、date模块的核心功能1.1 日期表示1.2 日期计算1.3 日期比较二、六大常用方法详
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2