阅读量:0
👨💻个人主页：@开发者-曼亿点
👨💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
👨💻 本文由 曼亿点 原创
👨💻 收录于专栏：微信小程序开发
⭐🅰⭐
— 
文章目录
⭐前言⭐
在这个数字化飞速发展的时代，购物方式也在不断变革与创新。微信小程序商城应运而生，为您打造一个全新的购物体验。
我们深知，您的时间宝贵，每一分每一秒都应花在有价值的事情上。因此，我们精心构建了这个便捷、高效的微信小程序商城，让您无需繁琐的下载和安装，轻轻一点，即可开启精彩的购物之旅。
在这里，您将发现丰富多样的商品，从时尚潮流的服饰到精致实用的家居用品，从美味可口的食品到高科技的电子产品，应有尽有，满足您的各种需求。
我们秉持着品质至上的原则，严格筛选每一款商品，确保您买到的都是优质、可靠的产品。同时，我们还提供贴心的客户服务，随时为您解答疑问，解决问题，让您购物无忧。
微信小程序商城，不仅是一个购物平台，更是您生活中的贴心伙伴。让我们一起，在这个数字商城中，探索更多美好！
一、产品分类功能的实现
欢迎来到微信小程序商城的百货分类页面，这是一个为您精心打造的购物导航图。
在这个快节奏的时代，我们深知您对便捷和高效的追求。因此，我们将百货商品进行了细致的分类，让您能够迅速找到您所需要的物品。
无论是追求时尚的您，想要在服饰鞋包分类中展现个性；还是注重生活品质的您，在家居百货中寻找温馨与舒适；亦或是热爱美食的您，在食品饮料分类中探索美味的奥秘。我们的百货分类都能精准地满足您的期待。
每一个分类背后，都有我们团队的精心挑选和严格把关，只为给您带来最优质、最具性价比的商品。让我们一起，在这丰富的百货分类中，发现生活的更多美好。
（1）category.wxml
<view> <view class="left-nav"> <van-sidebar active-key="{{ activeKey }}"> <block wx:for="{{ sliderData }}" wx:key="index"> <van-sidebar-item data-title="{{ item.text }}" bindtap="clickItemNav" title="{{ item.text }}" /> </block> </van-sidebar> </view> <view class="right-nav"> <van-grid column-num="3"> <van-grid-item use-slot wx:for="{{ categoryData }}" wx:key="index"> <view bindtap="clickItem" data-tag="{{ item.tag }}"> <image mode="widthFix" src="{{ item.image }}"></image> <text>{{ item.tag }}</text> </view> </van-grid-item> </van-grid> </view> </view> （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
<view class="details"> <image class="topimage" mode="widthFix" src="{{ goodsDetails.topimage }}"></image> <view class="content"> <view class="price"> ￥<text>{{ goodsDetails.price }}</text>.00 </view> <view class="title"> <text>{{ goodsDetails.title }}</text> </view> </view> <view class="introduce"> <image mode="widthFix" src="{{ goodsDetails.details }}"></image> </view> <view class="cart"> <van-goods-action> <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickKF" /> <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickCart" /> <van-goods-action-button text="加入购物车" type="warning" bind:click="onClickAddCart" /> <van-goods-action-button data-id="{{ goodsDetails.id }}" text="立即购买" bind:click="onClickBuy" /> </van-goods-action> </view> </view> (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" } } 运行结果的显示：
结束语🥇
以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
