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

一、项目背景与目标

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

（一）效果图展示与分析

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

二、数据结构设计

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

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

  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.xdnf.cn/news/16690.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

借助Excel实现Word表格快速排序

借助Excel实现Word表格快速排序

实例需求&#xff1a;Word中的表格如下图所示&#xff0c;为了强化记忆&#xff0c;希望能够将表格内容随机排序&#xff0c;表格第一列仍然按照顺序编号&#xff0c;即编号不跟随表格行内容调整。 乱序之后的效果如下图所示&#xff08;每次运行代码的结果都不一定相同&#x…
阅读更多...
系统架构设计师：系统架构设计基础知识

系统架构设计师：系统架构设计基础知识

从第一个程序被划分成模块开始&#xff0c;软件系统就有了架构。 现在&#xff0c;有效的软件架构及其明确的描述和设计&#xff0c;已经成为软件工程领域中重要的主题。 由于不同人对Software Architecture (简称SA) 的翻译不尽相同&#xff0c;企业界喜欢叫”软件架构“&am…
阅读更多...
T6识别好莱坞明星

T6识别好莱坞明星

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 导入基础的包 from tensorflow import keras from tensorflow.keras import layers,models import os, PIL, pathlib import matplotlib.pyplot as pl…
阅读更多...
MybatisPlus的基础使用

MybatisPlus的基础使用

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1、基础crud增加insert()方法&#xff1a; 删除修改查询 2、分页查询配置分页拦截器使用分页查询功能开启MP日志在yml配置文件中配置日志查看日志 3、条件查询条…
阅读更多...
基于stm32的智能变频电冰箱系统

基于stm32的智能变频电冰箱系统

基于stm32的智能变频电冰箱系统 持续更新&#xff0c;欢迎关注!!! 基于stm32的智能变频电冰箱系统 随着集成电路技术的发展&#xff0c;单片微型计算机的功能也不断增强&#xff0c;许多高性能的新型机种不断涌现出来。单片机以其功能强、体积小、可靠性高、造价低和开发周期短…
阅读更多...
【提高篇】3.3 GPIO（三，工作模式详解 上）

【提高篇】3.3 GPIO（三，工作模式详解 上）

目录 一，工作模式介绍 二，输入浮空 三，输入上拉 一，工作模式介绍 GPIO有八种工作模式，参考下面列表，我们先有一个简单的认识。 二，输入浮空 在输入浮空模式下，上拉/下拉电阻为断开状态，施密特触发器打开，输出被禁止。输入浮空模式下，IO口的电平完全是由外部电路…
阅读更多...
代码训练营 day66|Floyd 算法、A * 算法、最短路算法总结

代码训练营 day66|Floyd 算法、A * 算法、最短路算法总结

前言 这里记录一下陈菜菜的刷题记录&#xff0c;主要应对25秋招、春招 个人背景 211CS本CUHK计算机相关硕&#xff0c;一年车企软件开发经验 代码能力&#xff1a;有待提高 常用语言&#xff1a;C 系列文章目录 第66天 &#xff1a;第十一章&#xff1a;图论part11 文章目录…
阅读更多...
Vue中template模板报错

Vue中template模板报错

直接<v出现如下模板&#xff0c;出现如下错误 注意两个地方&#xff1a; 1.template里面加一个div标签 2.要写name值 如下图
阅读更多...
五、函数封装及调用、参数及返回值、作用域、匿名函数、立即执行函数

五、函数封装及调用、参数及返回值、作用域、匿名函数、立即执行函数

1. 函数基本使用 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style&…
阅读更多...
前端flutter

前端flutter

在一个风和日丽的午后&#xff0c;本以为又是一个普通的摸鱼日子&#xff0c;却突然被领导拉去谈话&#xff0c;意思就是公司后面要基于现有小程序和H5项目&#xff0c;转化到APP上去&#xff1b;无奈的是目前部门的研发小组并没有能够开发APP的人&#xff0c;既然这事找到我了…
阅读更多...
在uniapp中使用canvas封装组件遇到的坑，数据被后面设备覆盖，导致数据和前面的设备一样

在uniapp中使用canvas封装组件遇到的坑，数据被后面设备覆盖，导致数据和前面的设备一样

在uniapp开发中使用canvas封装了一个叫cirlceTemp的组件(温度圆环图表) 封装的HTML代码 <template><view class"progress-box" :style"{ width: ${progressWidth}rpx, height: ${progressHeight}rpx }"><canvas class"progress-bg&qu…
阅读更多...
linux病毒编写+vim shell编程

linux病毒编写+vim shell编程

学习视频来自B站UP主泷羽sec&#xff0c;如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 请一定遵循《网络空间安全法》&#xff01;&#xff01;&#xff01; Linux目录介绍 /bin 二进制可执行文件&#xff08;kali里面是工具一些文件&#xff09;/etc 系统的管理和配置文…
阅读更多...
【小程序】dialog组件

【小程序】dialog组件

这个比较简单 我就直接上代码了 只需要传入title即可&#xff0c; 内容部分设置slot 代码 dialog.ttml <view class"dialog-wrapper" hidden"{{!visible}}"><view class"mask" /><view class"dialog"><view …
阅读更多...
【玩具蛇——DFS】

【玩具蛇——DFS】

题目 代码 #include <bits/stdc.h> using namespace std; int g[5][5]; int dx[] {0, 0, -1, 1}, dy[] {-1, 1, 0, 0}; int ans; void dfs(int x, int y, int t) {g[x][y] t;if (t > 16){ans;g[x][y] 0;return;}for (int i 0; i < 4; i){int nx x dx[i], n…
阅读更多...
aar打包以及混淆问题

aar打包以及混淆问题

我们做sdk&#xff0c;经常要打成aar包。 如何打aar包&#xff1f; 1、首先module必须是library 2、build.gradle写的应用aar和module&#xff0c;要改成compileOnly&#xff0c;这样打包的时候就不会报错&#xff0c;因为aar不允许包含其他aar 3、 4、 aar包如何混淆 bui…
阅读更多...
hhdb数据库介绍(9-14)

hhdb数据库介绍(9-14)

SQL语法支持 DML语句 在关系集群数据库中&#xff0c;DML语句的逻辑将变的更为复杂。计算节点将DML语句分为两大类&#xff1a;单库DML语句与跨库DML语句。 单库DML语句&#xff0c;指SQL语句只需在一个节点上运行&#xff0c;即可计算出正确结果。假设分片表customer分片字…
阅读更多...
IDEA旗舰版编辑器器快速⼊门（笔记）

IDEA旗舰版编辑器器快速⼊门（笔记）

简介&#xff1a;javaweb开发必备软件之IDEA期间版介绍 DEA编辑器器版本介绍 官⽹网&#xff1a;https://www.jetbrains.com/地址&#xff1a;https://www.jetbrains.com/idea/download/#sectionmac DEA 分社区版(Community) 和 旗舰版(Ultimate)&#xff0c;我们做JavaWeb开…
阅读更多...
HTML5实现剪刀石头布小游戏(附源码)

HTML5实现剪刀石头布小游戏(附源码)

文章目录 1.设计来源1.1 主界面1.2 皮肤风格1.2 游戏中界面 2.效果和源码源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/143798520 HTM…
阅读更多...
DAY65||Bellman_ford 队列优化算法（又名SPFA）|bellman_ford之判断负权回路|bellman_ford之单源有限最短路

DAY65||Bellman_ford 队列优化算法（又名SPFA）|bellman_ford之判断负权回路|bellman_ford之单源有限最短路

Bellman_ford 队列优化算法&#xff08;又名SPFA&#xff09; 94. 城市间货物运输 I 思路 大家可以发现 Bellman_ford 算法每次松弛 都是对所有边进行松弛。 但真正有效的松弛&#xff0c;是基于已经计算过的节点在做的松弛。 给大家举一个例子&#xff1a; 本图中&#xff…
阅读更多...
关于adb shell登录开发板后terminal显示不完整

关于adb shell登录开发板后terminal显示不完整

现象 今天有个同事跟我说&#xff0c;adb shell 登录开发板后&#xff0c;终端显示不完整&#xff0c;超出边界后就会出现奇怪的问题&#xff0c;比如字符覆盖显示等。如下图所示。 正常情况下应该如下图所示&#xff1a; 很明显&#xff0c;第一张图的显示区域只有完整区域…
阅读更多...
最新文章

Copyright @ 2022~2023