微信小程序代码的知识点梳理

一、WXML 结构知识点

1. 头部区域（.head）

功能：包含 Logo、搜索框和用户图标。

知识点：

Flex 布局：使用 display: flex 实现水平对齐。

相对/绝对定位：搜索框内的图标通过 position: absolute 定位。

动态绑定：导航栏标题通过 wx:for 动态渲染。

2. 导航栏（.navBar）

功能：点击切换导航项。

知识点：

动态类名绑定：class="{{current == index ? 'active' : ''}}" 根据 current 状态动态绑定类名。

事件绑定：bindtap="toggle" 绑定点击事件，通过 data-index 传递索引值。

3. 商品列表（.goods）

功能：动态渲染商品数据并跳转详情页。

知识点：

数据绑定：wx:for 遍历 goods 数组，绑定商品信息（图片、标题、价格等）。

事件传递：bind:tap="detail" 绑定点击事件，通过 data-id 传递商品 ID。

组件化开发：商品列表的 HTML 结构可以封装为自定义组件以提高复用性。

二、WXSS 样式知识点

1. 布局与定位

知识点：

Flex 布局：通过 display: flex 实现水平分布（如 .head_top）。

相对/绝对定位：搜索图标通过 position: absolute 定位在输入框内。

单位使用：使用 rpx 适配不同屏幕尺寸（如 height: 60rpx）。

2. 样式问题

待优化点：

.active 类未定义：导航栏的高亮样式未实现，需补充 .active 的 CSS。

搜索框样式：padding-left 可能导致输入框内边距不足，需调整。

图片尺寸控制：.mi 图片的 width 和 height 固定，可能不适应不同分辨率。

三、JS 逻辑知识点

1. 数据初始化

知识点：

数据结构：goods 数组存储商品信息（ID、图片、标题、价格等）。

动态导航：navTitle 数组和 current 状态控制导航栏选中项。

2. 方法实现

知识点：

事件处理：toggle 方法更新 current 状态，detail 方法跳转详情页。

触底加载：onReachBottom 方法在滚动到底部时加载更多商品。

分页逻辑：onReachBottom 中通过 goods.length 控制是否加载新数据。

六、总结

核心功能：实现了导航栏切换、商品列表渲染和详情页跳转。

待优化点：样式交互、数据加载逻辑、代码可维护性。

扩展方向：添加筛选功能、优化分页逻辑、增强 UI 交互。