👨‍💻个人主页：@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏：微信小程序开发

⭐🅰⭐

—

文章目录

• • ⭐🅰⭐
  • ⭐前言⭐
  • 一、产品分类功能的实现
  • • （1）category.wxml
    • （2）category.wxss
    • （3）category.js
    • （4）category.json
  • 二、产品的详细介绍以及是否添加购物车
  • • (1)details.wxml
    • (2)details.wxss
    • (3)details.js
    • (4)details.json
    • • 结束语🥇

⭐前言⭐

  在这个数字化飞速发展的时代，购物方式也在不断变革与创新。微信小程序商城应运而生，为您打造一个全新的购物体验。
  我们深知，您的时间宝贵，每一分每一秒都应花在有价值的事情上。因此，我们精心构建了这个便捷、高效的微信小程序商城，让您无需繁琐的下载和安装，轻轻一点，即可开启精彩的购物之旅。
  在这里，您将发现丰富多样的商品，从时尚潮流的服饰到精致实用的家居用品，从美味可口的食品到高科技的电子产品，应有尽有，满足您的各种需求。
  我们秉持着品质至上的原则，严格筛选每一款商品，确保您买到的都是优质、可靠的产品。同时，我们还提供贴心的客户服务，随时为您解答疑问，解决问题，让您购物无忧。
  微信小程序商城，不仅是一个购物平台，更是您生活中的贴心伙伴。让我们一起，在这个数字商城中，探索更多美好！

一、产品分类功能的实现

  欢迎来到微信小程序商城的百货分类页面，这是一个为您精心打造的购物导航图。
  在这个快节奏的时代，我们深知您对便捷和高效的追求。因此，我们将百货商品进行了细致的分类，让您能够迅速找到您所需要的物品。
  无论是追求时尚的您，想要在服饰鞋包分类中展现个性；还是注重生活品质的您，在家居百货中寻找温馨与舒适；亦或是热爱美食的您，在食品饮料分类中探索美味的奥秘。我们的百货分类都能精准地满足您的期待。
  每一个分类背后，都有我们团队的精心挑选和严格把关，只为给您带来最优质、最具性价比的商品。让我们一起，在这丰富的百货分类中，发现生活的更多美好。

（1）category.wxml

              { activeKey }}">             { sliderData }}" wx:key="index">                 { item.text }}" bindtap="clickItemNav" title="{{ item.text }}" />                                                      { categoryData }}" wx:key="index">                 { item.tag }}">                     { item.image }}">                     {{ item.tag }}                                              

（2）category.wxss

定义一个for循环访问数组：

.left-nav{     float: left;     width: 25%; } .right-nav{     float: right;     width: 75%; }  .right-nav image{     width: 70px; }      .right-nav text{     margin-top: 10px;     font-size: 13px;     color: #333;     text-align: center;     display: block; } 

（3）category.js

import { getCategory,getSearch } from "../../api/index.js"  Page({      /**      * 页面的初始数据      */     data: {         activeKey:0,         categoryData:[],         sliderData:[             {                 "id":0,                 "text":"热门推荐"             },             {                 "id":1,                 "text":"手机数码"             },             {                 "id":2,                 "text":"家用电器"             },             {                 "id":3,                 "text":"电脑办公"             },             {                 "id":4,                 "text":"玩具乐器"             },             {                 "id":5,                 "text":"家具家装"             },             {                 "id":6,                 "text":"男装"             },             {                 "id":7,                 "text":"男鞋"             },             {                 "id":8,                 "text":"女装"             },             {                 "id":9,                 "text":"女鞋"             },             {                 "id":10,                 "text":"美妆护肤"             },             {                 "id":11,                 "text":"户外运动"             }         ],         currentTag:"热门推荐"     },      /**      * 生命周期函数--监听页面加载      */     onLoad(options) {         this.http(this.data.currentTag);     },     clickItemNav(e){         this.http(e.currentTarget.dataset.title)     },     http(tag){         getCategory({tag}).then(res =>{             if(res.data.status === 200){                 this.setData({                     categoryData:res.data.data                 })             }else{                 wx.showToast({                   title: '暂无数据',                   icon:"success"                 })             }         })     },     clickItem(e){         getSearch({search:e.currentTarget.dataset.tag}).then(res =>{             if(!res.data.msg){                 // 序列化                 let goods = JSON.stringify(res.data.data)                 wx.navigateTo({                     url: '/pages/goods/goods?goodsData=' + goods,                 })             }else{                 wx.showToast({                   title: res.data.msg,                 })             }         })     } })  

（4）category.json

{     "usingComponents": {         "van-sidebar": "@vant/weapp/sidebar/index",         "van-sidebar-item": "@vant/weapp/sidebar-item/index",         "van-grid": "@vant/weapp/grid/index",         "van-grid-item": "@vant/weapp/grid-item/index"     } }  

运行结果的显示：

二、产品的详细介绍以及是否添加购物车

  在这里，“添加购物车”是您与心仪商品之间的约定。它是您购物决策中的一个贴心伙伴，让您能够轻松地收集那些让您眼前一亮的宝贝。
想象一下，购物车就像是您的私人宝库，您可以将各种喜爱的百货商品放入其中，慢慢积攒幸福的可能。无论是一件时尚的衣物，还是一款实用的家居用品，它们都在等待着与您一同回家。
  添加购物车，为您的购物之旅增添了一份从容与自由，让您可以尽情探索更多精彩，不错过任何一个美好。

(1)details.wxml

     { goodsDetails.topimage }}">                           ￥{{ goodsDetails.price }}.00                               {{ goodsDetails.title }}                            { goodsDetails.details }}">                                                                       { goodsDetails.id }}" text="立即购买" bind:click="onClickBuy" />                

(2)details.wxss

.details{     background: #fff; }  .details .topimage{     width: 100%; }  .details .content{     margin: 10px; }  .details .content .price {     color: #f2270c; }  .details .content .price text{     color: #f2270c;     display: inline-block;     font-family: JDZH-Regular;     font-size: 20px;     line-height: 30px; }  .details .content .title{     font-size: 15px;     font-weight: 700; }  .details .introduce image{     width: 100%; }  

(3)details.js

const { getGoodsDetails,addGoodsCart } = require("../../api/index.js")  Page({      /**      * 页面的初始数据      */     data: {         goodsDetails:{}     },      /**      * 生命周期函数--监听页面加载      */     onLoad(options) {         // 提示用户在获取数据         wx.showLoading({           title: '等待数据加载...',         })         getGoodsDetails({id:options.id}).then(res =>{             wx.hideLoading()             if(res.data.status === 200){                 this.setData({                     goodsDetails:res.data.data[0]                 })             }else{                 wx.showToast({                   title: '数据获取失败',                   icon:"success"                 })             }         })     },     /**      * 客服      */     onClickKF(){},     /**      * 购物车      */     onClickCart(){         wx.switchTab({           url: '/pages/cart/cart',         })     },     /**      * 加入购物车      */     onClickAddCart(){         addGoodsCart({             title:this.data.goodsDetails.title,             price:this.data.goodsDetails.price,             image:this.data.goodsDetails.topimage,             currentID:this.data.goodsDetails.id         }).then(res =>{             if(res.data.status === 200){                 wx.showToast({                   title: res.data.msg,                 })             }else{                 wx.showToast({                   title: res.data.msg,                 })             }         })     },     /**      * 立即购买      */     onClickBuy(e){         wx.navigateTo({           url: '/pages/buy/buy?id='+e.currentTarget.dataset.id,         })     } })  

(4)details.json

{     "usingComponents": {         "van-goods-action": "@vant/weapp/goods-action/index",         "van-goods-action-icon": "@vant/weapp/goods-action-icon/index",         "van-goods-action-button": "@vant/weapp/goods-action-button/index"     } }  

运行结果的显示：

结束语🥇

以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖