微信小程序实战篇-分类页面制作

一、项目背景与目标

在微信小程序开发中，分类页面是一个常见且重要的功能模块。它能够帮助用户快速定位和浏览不同类别的商品或信息，提升用户体验和操作效率。今天，我们将深入探讨如何制作一个实用的微信小程序分类页面，先来看一下最终实现的效果图。

（一）效果图展示与分析

通过效果图，我们可以看到分类页面的整体布局清晰明了。左侧是一级目录，以列表形式展示各个主要分类；右侧是与左侧一级目录对应的二级目录，以更详细的分类或具体产品项呈现。这种布局方式符合用户常见的分类浏览习惯，方便用户快速找到所需内容。

二、数据结构设计

（一）数组嵌套数组的结构

根据分类页面的功能需求，我们采用数组嵌套数组的数据结构来组织数据。外层数组用于存储一级目录数据，每个一级目录对象包含以下属性：

  1. cate_id：用于唯一标识每个一级目录，方便在后续的操作中进行识别和处理。
  2. cate_name：一级目录的名称，如 “护肤”“彩妆”“香水 / 香氛”“个人护理” 等，直接展示给用户，帮助他们快速了解分类内容。
  3. ishaveChild：一个布尔值，用于判断该一级目录是否包含二级目录。如果为 true，表示有二级目录；如果为 false，则表示没有二级目录，直接显示提示信息。
  4. children：嵌套的数组，用于存储二级目录的数据。二级目录对象包含以下属性：
    • child_id：二级目录项的唯一标识。
    • name：二级目录项的名称，如 “洁面皂”“卸妆”“气垫 bb” 等。
    • image：二级目录项对应的图片链接，用于在页面上展示相关图片，增强视觉效果和吸引力。

（二）数据示例与解析

以下是一个简化的数据示例，帮助你更好地理解数据结构：

收起

javascript

复制

[
{
cate_id: 1,
cate_name: "护肤",
ishaveChild: true,
children: [
{
child_id: 1,
name: '洁面皂',
image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg"
},
{
child_id: 2,
name: '卸妆',
image: "http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg"
}
]
},
{
cate_id: 2,
cate_name: "彩妆",
ishaveChild: true,
children: [
{
child_id: 1,
name: '气垫 bb',
image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381301.jpg"
},
{
child_id: 2,
name: '修容/高光',
image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381411.jpg"
}
]
},
{
cate_id: 3,
cate_name: "香水/香氛",
ishaveChild: true,
children: [
{
child_id: 1,
name: '淡香水 EDT',
image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815978910.jpg"
},
{
child_id: 2,
name: '浓香水 EDP',
image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159789883.jpg"
}
]
},
{
cate_id: 4,
cate_name: "个人护理",
ishaveChild: false,
children: []
}
]

在这个示例中，“护肤”“彩妆”“香水 / 香氛” 一级目录都包含二级目录项，而 “个人护理” 一级目录没有二级目录，其 “children” 数组为空。

比文云官网，专为企业提供小程序、网站、系统搭建服务，无论是模板搭建还是代码定制，通通都能满足，找服务来比文云官网。

三、代码实现详解

（一）classify.js 文件

  1. Page 函数与数据定义
    • 在 classify.js 文件中，首先使用 “Page” 函数定义了一个页面。在 “data” 对象中，我们初始化了分类页面所需的数据：

收起

javascript

复制

Page({
data: {
cateItems: [
// 一级目录数据数组，包含多个一级目录对象
],
curNav: 1,
curIndex: 0
}
})

  • “cateItems” 数组存储了完整的分类数据结构，如上述数据示例所示。“curNav” 用于控制左侧一级目录中当前被点亮（选中）的按钮，初始值为 1，表示默认选中第一个一级目录。“curIndex” 用于根据用户点击的一级目录，确定在右侧显示哪个二级目录的数据，初始值为 0。

  1. 事件处理函数 - switchRightTab
    • 定义了 “switchRightTab” 函数作为分类 tab 事件的处理函数。当用户点击左侧一级目录中的某个项时，会触发该函数。函数内部通过 “e.target.dataset.id” 获取点击项的 id，通过 “parseInt (e.target.dataset.index)” 获取点击项在数组中的下标值。然后，使用 “this.setData” 方法更新 “curNav” 和 “curIndex” 的值，从而实现切换右侧二级目录显示内容和点亮左侧相应按钮的效果。

（二）classify.wxml 文件

  1. 页面结构搭建
    • 在 classify.wxml 文件中，构建了分类页面的结构。整体使用一个 “<view class="container">” 作为主盒子，将页面分为左侧栏和右侧栏两部分。
    • 左侧栏：通过 “<block wx:for="{{cateItems}}">” 循环遍历 “cateItems” 数组，生成左侧一级目录列表。每个一级目录项使用 “<view class="nav_left_items {{curNav == item.cate_id? 'active' : ''}} " bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view>” 来展示。这里使用了条件判断类名的方式，根据 “curNav” 的值与当前一级目录项的 “cate_id” 是否相等，来决定是否添加 “active” 类名，从而实现点亮选中项的效果。同时，绑定了 “switchRightTab” 点击事件，并传递了数据下标和 id。
    • 右侧栏：首先通过 “wx:if="{{cateItems [curIndex].ishaveChild}}” 判断当前选中的一级目录是否有二级目录。如果有，则使用 “<block wx:for="{{cateItems[curIndex].children}}">” 循环遍历二级目录数据，生成右侧二级目录列表项，每个项包含图片和文字，并使用 “<navigator url="../../detail/detail}}">” 实现点击跳转到详情页面的功能。如果没有二级目录，则显示 “<view class="nodata_text" wx:else>该分类暂无数据</view>” 提示信息。

（三）classify.wxss 文件

  1. 样式定义与布局调整
    • 在 classify.wxss 文件中，定义了各种样式来美化分类页面。
    • 整体页面背景色设置为 “#f5f5f5”，主盒子 “container” 设置了相对定位、宽度、高度、背景色和文字颜色等样式，使其在页面中呈现出清晰的布局。
    • 左侧栏 “nav_left” 设置为行内块级元素，宽度为 25%，背景色为灰色，文字居中显示。左侧栏列表项 “nav_left_items” 设置了高度、行高、上下 padding、边框和文字大小等样式，实现了每个项的美观布局。当项被选中时（添加 “active” 类名），背景色变为白色，文字颜色变为 “#f0145a”。
    • 右侧栏 “nav_right” 使用绝对定位，宽度为 75%，高度占满，设置了内边距和背景色。右侧栏列表项 “nav_right_items” 浮动向左，宽度为 33.33%，设置了高度、文字居中、图片宽高和文字溢出处理等样式。图片设置了固定宽高，文字设置为块级元素，溢出部分显示为省略号，确保在有限空间内展示完整信息。

（四）知识小课堂

  1. wx:for 列表渲染
    • “wx:for” 是微信小程序用于循环数组并展示列表型数据的指令。默认情况下，数组当前项的下标变量名为 “index”，数组当前项的变量名为 “item”。例如：

收起

xml

复制

<view wx:for="{{items}}">{{index}} : {{item.message}}</view>

  • 也可以自定义变量名，使用 “wx:for - item” 指定数组当前元素的变量名，使用 “wx:for - index” 指定数组当前下标的变量名，如：

收起

xml

复制

<view wx:for="{{array}}" wx:for - index="idx" wx:for - item="itemName">{{idx}} : {{itemName.message}}</view>

  1. wx:if 条件渲染
    • “wx:if” 用于条件渲染，根据判断语句决定是否渲染某个 view 控件。通常与 “wx:elif” 和 “wx:else” 配合使用，实现更复杂的条件判断。例如：

收起

xml

复制

<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>

  • 与 “hidden” 指令的区别在于，“wx:if” 是当满足条件时才会渲染 view，而 “hidden” 是 view 一定会被渲染，只是控制其显示与隐藏。一般来说，如果需要频繁切换显示状态，使用 “hidden” 更好，因为它的切换消耗较低；如果在运行时条件不大可能改变，则使用 “wx:if” 较好，因为它的初始渲染消耗较低。

通过以上详细的步骤，我们完成了微信小程序分类页面的制作。希望这个教程能够帮助你更好地理解和掌握微信小程序开发中的分类页面制作技术，为你的小程序开发项目增添更多实用功能。如果在学习过程中有任何疑问或需要进一步的帮助，请随时查阅相关资料或向社区寻求支持。祝你开发顺利！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/59736.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

嵌入式硬件杂谈（二）-芯片输入接入0.1uf电容的本质（退耦电容）

嵌入式硬件杂谈（二）-芯片输入接入0.1uf电容的本质（退耦电容）

引言&#xff1a;对于嵌入式硬件这个庞大的知识体系而言&#xff0c;太多离散的知识点很容易疏漏&#xff0c;因此对于这些容易忘记甚至不明白的知识点做成一个梳理&#xff0c;供大家参考以及学习&#xff0c;本文主要针对芯片输入接入0.1uf电容的本质的知识点的进行学习。 目…
阅读更多...
数据结构（单向链表——c语言实现）

数据结构（单向链表——c语言实现）

链式存储的优缺点&#xff1a; 优点&#xff1a; 1、动态分配内存&#xff1a; 链式存储不需要在数据插入之前分配固定大小的数组或内存块&#xff0c;因此它更适合存储动态变化的数据 2、高效的插入和删除操作&#xff1a; 在链表中插入或删除元素只需要调整相邻节点的指…
阅读更多...
基于Spring Boot的电子商务平台架构

基于Spring Boot的电子商务平台架构

2 相关技术 2.1 SpringBoot框架介绍 Spring Boot是一种不需要代码生成的一种框架&#xff0c;并且可以不需要配置任何的XML文件就可以&#xff0c;因为Spring Boot里面自带了很多接口&#xff0c;只需要配置不同的接口就会自动的应用并且识别需要的依赖&#xff0c;在配置方面非…
阅读更多...
Level DB --- Block

Level DB --- Block

class Block class Block是Level DB里面的重要数据结构&#xff0c;该数据结构用来承载已经存储到文件中的数据。已经被存储的数据当需要再次加载、应用&#xff08;例如搜索&#xff09;&#xff0c;这时首先要把数据加载、初始化到class Block里面。 数据的组织形式&#x…
阅读更多...
记录大学Linux运维上机考试题目和流程

记录大学Linux运维上机考试题目和流程

备注&#xff1a;今年的Linux操作系统考试已经全部结束&#xff0c;仅作为一个记录和留念 前提&#xff1a;配置环回网卡和环境和nat网卡 1、搭建dns服务器 2、Apache和http服务 3、搭建postfix邮件服务器实现邮件发送 4、搭建vsftpdFTP服务器实现文件上传 题目如下&…
阅读更多...
前端面试笔试（四）

前端面试笔试（四）

目录 一、数据结构算法等综合篇 1.线性探查法解决哈希冲突 2.请求分页系统中文件区和对换区 3.RADIUS认证协议&#xff0c;运行在哪个网络协议上 二、代码输出篇 1.res[1,2,100].map(parseInt) 如果我们想要输出为[1,2,100]&#xff0c;可以&#xff1a; 还可以换map里…
阅读更多...
NVR录像机汇聚管理EasyNVR多品牌NVR管理工具视频汇聚技术在智慧安防监控中的应用与优势

NVR录像机汇聚管理EasyNVR多品牌NVR管理工具视频汇聚技术在智慧安防监控中的应用与优势

随着信息技术的快速发展和数字化时代的到来&#xff0c;安防监控领域也在不断进行技术创新和突破。NVR管理平台EasyNVR作为视频汇聚技术的领先者&#xff0c;凭借其强大的视频处理、汇聚与融合能力&#xff0c;展现出了在安防监控领域巨大的应用潜力和价值。本文将详细介绍Easy…
阅读更多...
layui 输入框带清空图标、分词搜索、关键词高亮

layui 输入框带清空图标、分词搜索、关键词高亮

https://andi.cn/page/621858.html
阅读更多...
C/C++运行库

C/C++运行库

文章目录 入口函数glibc入口函数_start__libc_start_mainMSVC入口函数堆初始化IO初始化 glibc C运行库glibc启动文件gcc补充C全局构造与析构 运行库对于多线程的改进线程局部存储 入口函数 使用C语言编写的一个hello world程序在用户看来的确非常简单&#xff0c;源代码仅需要…
阅读更多...
学习使用LVGL，依赖官方网址

学习使用LVGL，依赖官方网址

LVGL Basics — LVGL documentation LVGL基础知识 LVGL是一个开源的图形库&#xff0c;提供创建嵌入式GUI的一切 LVGL数据流 您为每个物理显示面板 创建一个显示器 (lv_display) &#xff0c;在其上创建屏幕小部件&#xff0c;将小部件添加到这些屏幕上。要处理触摸、鼠标、…
阅读更多...
计算机网络HTTP——针对实习面试

计算机网络HTTP——针对实习面试

目录 计算机网络HTTP什么是HTTP&#xff1f;HTTP和HTTPS有什么区别&#xff1f;分别说明HTTP/1.0、HTTP/2.0、HTTP/3.0请说明访问网页的全过程请说明HTTP常见的状态码Cookie和Session有什么区别&#xff1f;HTTP请求方式有哪些&#xff1f;请解释GET和POST的区别&#xff1f;HT…
阅读更多...
大数据-226 离线数仓 - Flume 优化配置 自定义拦截器 拦截原理 了 拦截器实现 Java

大数据-226 离线数仓 - Flume 优化配置 自定义拦截器 拦截原理 了 拦截器实现 Java

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…
阅读更多...
无人机动力系统测试-实测数据与CFD模拟仿真数据关联对比分析

无人机动力系统测试-实测数据与CFD模拟仿真数据关联对比分析

我们经常被问到这样的问题&#xff1a;“我们计划运行 CFD 仿真&#xff0c;我们还需要对电机和螺旋桨进行实验测试吗&#xff1f;我们可能有偏见&#xff0c;但我们的答案始终是肯定的&#xff0c;而且有充分的理由。我们自己执行了大量的 CFD 仿真&#xff0c;但我们承认&…
阅读更多...
验证双随机矩阵(doubly stochastic matrix) 满足C(P)=C(P^T)

验证双随机矩阵(doubly stochastic matrix) 满足C(P)=C(P^T)

验证双随机矩阵(doubly stochastic matrix) 满足C( P P P)C(P T ^T T) 双随机矩阵&#xff1a; 在数学中&#xff0c;一个双随机矩阵&#xff08;doubly stochastic matrix&#xff09;是一个满足以下条件的矩阵&#xff1a; 非负矩阵&#xff1a;矩阵中的每个元素都是非负的…
阅读更多...
Chrome 浏览器开启打印模式

Chrome 浏览器开启打印模式

打开开发者工具ctrl shift p输入print 找到 Emulate CSS print media type
阅读更多...
Vite初始化Vue3+Typescrpt项目

Vite初始化Vue3+Typescrpt项目

初始化项目 安装 Vite 首先&#xff0c;确保你的 Node.js 版本 > 12.0.0。然后在命令行中运行以下命令来创建一个 Vite Vue 3 TypeScript 的项目模板&#xff1a; npm init vitelatest进入项目目录 创建完成后&#xff0c;进入项目目录&#xff1a; cd vue3-demo启动…
阅读更多...
24 年第十届数维杯国际数模竞赛赛题浅析

24 年第十届数维杯国际数模竞赛赛题浅析

本次万众瞩目的数维杯国际大学生数学建模赛题已正式出炉&#xff0c;无论是赛题难度还是认可度&#xff0c;该比赛都是数模届的独一档&#xff0c;含金量极高&#xff0c;可以用于综测加分、保研、简历添彩等各方面。考虑到大家解题实属不易&#xff0c;为了帮助大家取得好成绩…
阅读更多...
自动语音识别（ASR）与文本转语音（TTS）技术的应用与发展

自动语音识别（ASR）与文本转语音（TTS）技术的应用与发展

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
CentOS8 启动错误，enter emergency mode ，开机直接进入紧急救援模式，报错 Failed to mount /home 解决方法

CentOS8 启动错误，enter emergency mode ，开机直接进入紧急救援模式，报错 Failed to mount /home 解决方法

先看现场问题截图&#xff1a; 1.根据提示 按 ctrld 输入 root 密码&#xff0c;进入系统。 2. 在紧急模式下运行&#xff1a;journalctl -xe &#xff0c;查看相关日志&#xff0c;找到关键点&#xff1a; Failed to mount /home 3.接着执行修复命令&#xff1a; xfs_repa…
阅读更多...
Java项目实战II基于微信小程序的课堂助手（开发文档+数据库+源码）

Java项目实战II基于微信小程序的课堂助手（开发文档+数据库+源码）

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 在数字化教…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023