devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序作品实例_微信小程序案例

作者：盐析白兔 | 2024-05-06 05:29:37

赞

踩

微信小程序案例

目录

简介

作品详情

作品代码

一、主页界面

1、WXML文件:

2、WXSS文件:

3、JS文件

4、JSON文件:

5、补充 

二、购物车界面

 1、WXML文件

 3、JS文件

 4、JSON文件

三、分类界面和个人中心界面

简介

        这是我在学习完微信小程序后，写的一个小案例，是一个关于女性商品的，数据也是自己通过数组写的死数据。这是学习完vue之后才学习的，感觉和vue很像，导致我自己的懒癌犯了，学不进去了，就大致了解之后就上手了，因为写的比较简单，部分我感觉重复的功能也没有写。所有整体来说写的还是比较顺利。

作品详情

        这个作品我写了四个页面，分别是首页、分类、购物车、个人中心。其中主页和个人中心页面的功能，相对其它两个页面来说更多一点。

        在作品中我使用了一个插件库Lin UI，但是我感觉功能一般，所有大家可以使用其他的

微信小程序插件库

作品代码

一、主页界面

1、WXML文件:
  1. <!--pages/home/home.wxml-->
  2. <!--轮播图-->
  3. <view class="swiper-container">
  4.   <swiper indicator-dots="{{true}}" autoplay interval="3000" duration="1500" circular class="swiper">
  5.     <swiper-item class="lun">
  6.       <image mode="scaleToFill" src="/images/carousel/carousel-1 .jpg"></image>
  7.     </swiper-item>
  8.     <swiper-item class="lun">
  9.       <image mode="scaleToFill" src="/images/carousel/carousel-2.jpg"></image>
  10.     </swiper-item>
  11.     <swiper-item class="lun">
  12.       <image mode="scaleToFill" src="/images/carousel/carousel-3.jpg"></image>
  13.     </swiper-item>
  14.   </swiper>
  15. </view>
  16. <view class="brand-title">
  17.   <text>品牌推荐</text>
  18. </view>
  19. <view class="container">
  20. <!--循环遍历数组grids1中的品牌数据展示到界面上-->
  21.   <view wx:for="{{grids1}}" wx:key="idx" wx:for-index="idx" wx:for-item="item" class="container-grid">
  22.     <view class="sort-grid">
  23.       <image mode="widthFix" src="{{item.src}}"></image>
  24.       <view class="">{{item.text}}</view>
  25.     </view>
  26.   </view>
  27. </view>
  28. <!--商品推荐-->
  29. <view class="">
  30.   <image src="/images/fashion/fashion.png" mode="scaleToFill" class="fashion" />
  31.   <view class="fashion-brand">
  32. <!--循环遍历数组grids2中的商品数据展示到界面上-->
  33.     <view wx:for="{{grids2}}" wx:key="idx" wx:for-item="item" class="brand-holder">
  34.       <image mode="widthFix" src="{{item.src1}}" class="holder-src1"></image>
  35.       <view class="brand-logo-holder">
  36.         <image mode="widthFix" src="{{item.src2}}" class="holder-src2"></image>
  37.       </view>
  38.       <view class="siding">
  39.         <text>2023新款优雅打揽千鸟格舒适显瘦百搭女装</text>
  40.         <text style="font-size: 30rpx; padding-top: 10rpx; color: rgb(241, 6, 124); font-weight: 700;">{{item.text2}}</text>
  41.       </view>
  42.       <view class="brand-price">
  43.         <l-price unit="￥" value="666" class="price" color="#000"></l-price>
  44.         <button plain="{{falsh}}" class="holder-button" style="width: 110rpx;height: 30rpx; line-height: 10rpx;" bindtap="buy" data-id="{{item.idx}}">
  45.           <view style="font-size: 10rpx;">加入购物车</view>
  46.         </button>
  47.       </view>
  48.     </view>
  49.   </view>
  50. </view>
2、WXSS文件:
  1. /* pages/home/home.wxss */
  2.  
  3. .lun image {
  4.   width: 750rpx;
  5.   height: 300rpx;
  6. }
  7.  
  8. .swiper-container {
  9.   margin-bottom: 14rpx;
  10. }
  11.  
  12.  
  13. .brand-title {
  14.   font-size: 40rpx;
  15.   font-weight: 600;
  16.   margin: 25rpx 20rpx;
  17. }
  18.  
  19. .brand-title text {
  20.   display: block;
  21.   text-align: center;
  22. }
  23.  
  24. .container {
  25.   width: 95%;
  26.   display: flex;
  27.   margin: auto;
  28.   flex-wrap: wrap;
  29.   justify-content: space-around;
  30.   border-left: 1rpx solid #dddddd;
  31.   border-top: 1rpx solid #dddddd;
  32. }
  33.  
  34. .container-grid {
  35.   width: 33%;
  36.   border-bottom: 1rpx solid #dddddd;
  37.   border-right: 1rpx solid #dddddd;
  38. }
  39.  
  40. .sort-grid {
  41.  
  42.   text-align: center;
  43.   margin-top: 25rpx;
  44.   margin-bottom: 25rpx;
  45.   font-size: 16rpx;
  46. }
  47.  
  48. .sort-grid image {
  49.   width: 50%;
  50. }
  51.  
  52. .fashion {
  53.   width: 760rpx;
  54.   height: 100rpx;
  55. }
  56.  
  57. .fashion-brand {
  58.   display: flex;
  59.   flex-wrap: wrap;
  60.   margin: 40rpx;
  61.   justify-content: space-around;
  62.   font-size: 10rpx;
  63.   text-align: center;
  64. }
  65.  
  66. .brand-holder {
  67.   margin: 20rpx;
  68.   position: relative;
  69.   width: 230rpx;
  70.   height: 420rpx;
  71.   border: 1px solid #dddddd;
  72. }
  73.  
  74. .holder-src1 {
  75.   width: 230rpx;
  76. }
  77.  
  78. .brand-logo-holder {
  79.   width: 52rpx;
  80.   height: 28rpx;
  81.   position: absolute;
  82.   background-color: #fff;
  83.   border: 1px solid #dddddd;
  84.   top: 50%;
  85.   left: 50%;
  86.   transform: translate(-50%, -50%);
  87. }
  88.  
  89. .holder-src2 {
  90.   position: absolute;
  91.   width: 60rpx;
  92.   /* height: 20rpx; */
  93.   top: 50%;
  94.   left: 50%;
  95.   transform: translate(-50%, -50%);
  96. }
  97.  
  98. .siding text {
  99.   display: block;
  100.   margin: auto;
  101.   width: 200rpx;
  102.   font-size: 20rpx;
  103.   color: #818181;
  104. }
  105.  
  106. .siding text {
  107.   display: block;
  108.   margin: auto;
  109.   width: 200rpx;
  110.   font-size: 20rpx;
  111.   color: #818181;
  112. }
  113.  
  114. .holder-button {
  115.   color: #ec0973;
  116.   width: 60rpx;
  117.   height: 18rpx;
  118.   line-height: 2rpx;
  119.   padding: 10rpx 10rpx;
  120.   border: 1rpx solid #ec0973;
  121. }
  122.  
  123. .brand-price {
  124.   display: flex;
  125.   margin-top: 10%;
  126.   margin-left: 5%;
  127.   line-height: -1rpx;
  128. }
  129.  
  130. .brand-holder:hover {
  131.   border: 1rpx solid #ec0973;
  132. }
  133.  
  134. .brand-holder:hover .holder-button {
  135.   color: #fff;
  136.   background-color: #ec0973;
  137. }
3、JS文件
  1. // pages/home/home.js
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     grids1: [{
  9.         src: "/images/sort/sort-1.png",
  10.         text: "恩裳",
  11.         idx: 0
  12.       },
  13.       {
  14.         src: "/images/sort/sort-2.png",
  15.         text: "音儿",
  16.         idx: 1
  17.       },
  18.       {
  19.         src: "/images/sort/sort-3.png",
  20.         text: "波司登",
  21.         idx: 2
  22.       }, {
  23.         src: "/images/sort/sort-4.png",
  24.         text: "诗篇",
  25.         idx: 3
  26.       }, {
  27.         src: "/images/sort/sort-5.png",
  28.         text: "哥弟",
  29.         idx: 4
  30.       }, {
  31.         src: "/images/sort/sort-6.png",
  32.         text: "富挺",
  33.         idx: 5
  34.       }, {
  35.         src: "/images/sort/sort-7.png",
  36.         text: "罗蒙",
  37.         idx: 6
  38.       }, {
  39.         src: "/images/sort/sort-8.png",
  40.         text: "米皇",
  41.         idx: 7
  42.       }, {
  43.         src: "/images/sort/sort-9.png",
  44.         text: "天美意",
  45.         idx: 8
  46.       }
  47.     ],
  48.     grids2: [{
  49.       src1: "/images/fashion/fashion-1.png",
  50.       src2: "/images/fashion/fashion-icon-1.png",
  51.       text1: "对白女装疯抢专场",
  52.       text2: "三折封顶",
  53.       idx: 0
  54.     }, {
  55.       src1: "/images/fashion/fashion-2.png",
  56.       src2: "/images/fashion/fashion-icon-2.png",
  57.       text1: "对白女装疯抢专场",
  58.       text2: "三折封顶",
  59.       idx: 1
  60.     }, {
  61.       src1: "/images/fashion/fashion-3.png",
  62.       src2: "/images/fashion/fashion-icon-3.png",
  63.       text1: "对白女装疯抢专场",
  64.       text2: "三折封顶",
  65.       idx: 2
  66.     }, {
  67.       src1: "/images/fashion/fashion-4.png",
  68.       src2: "/images/fashion/fashion-icon-4.png",
  69.       text1: "对白女装疯抢专场",
  70.       text2: "三折封顶",
  71.       idx: 3
  72.     }, {
  73.       src1: "/images/fashion/fashion-5.png",
  74.       src2: "/images/fashion/fashion-icon-5.png",
  75.       text1: "对白女装疯抢专场",
  76.       text2: "三折封顶",
  77.       idx: 4
  78.     }, {
  79.       src1: "/images/fashion/fashion-6.png",
  80.       src2: "/images/fashion/fashion-icon-6.png",
  81.       text1: "对白女装疯抢专场",
  82.       text2: "三折封顶",
  83.       idx: 5
  84.     }, {
  85.       src1: "/images/fashion/fashion-7.png",
  86.       src2: "/images/fashion/fashion-icon-7.png",
  87.       text1: "对白女装疯抢专场",
  88.       text2: "三折封顶",
  89.       idx: 6
  90.     }, {
  91.       src1: "/images/fashion/fashion-8.png",
  92.       src2: "/images/fashion/fashion-icon-8.png",
  93.       text1: "对白女装疯抢专场",
  94.       text2: "三折封顶",
  95.       idx: 7
  96.     }, {
  97.       src1: "/images/fashion/fashion-9.png",
  98.       src2: "/images/fashion/fashion-icon-9.png",
  99.       text1: "对白女装疯抢专场",
  100.       text2: "三折封顶",
  101.       idx: 8
  102.     }, {
  103.       src1: "/images/fashion/fashion-10.png",
  104.       src2: "/images/fashion/fashion-icon-10.png",
  105.       text1: "对白女装疯抢专场",
  106.       text2: "三折封顶",
  107.       idx: 9
  108.     }, {
  109.       src1: "/images/fashion/fashion-11.png",
  110.       src2: "/images/fashion/fashion-icon-11.png",
  111.       text1: "对白女装疯抢专场",
  112.       text2: "三折封顶",
  113.       idx: 10
  114.     }, {
  115.       src1: "/images/fashion/fashion-12.png",
  116.       src2: "/images/fashion/fashion-icon-12.png",
  117.       text1: "对白女装疯抢专场",
  118.       text2: "三折封顶",
  119.       idx: 11
  120.     }],
  121.     cart: []
  122.   },
  123.   // 点击事件
  124.  
  125.   buy(event) {
  126.     const grids2 = this.data.grids2;
  127.     let id = event.currentTarget.dataset.id;
  128.     var app = getApp();
  129.     const cartData = app.globalData.cartData;
  130.     let nums = 0;
  131.     for (let i = 0; i < grids2.length; i++) {
  132.       // 在循环过程中操作每个数组项
  133.       const item = grids2[i];
  134.  
  135.       if (cartData.length != 0 && id == grids2[i].idx) {
  136.       
  137.         for (let i = 0; i < cartData.length; i++) {
  138.           console.log("id:" + id, cartData[i].id);
  139.           if (id == cartData[i].id) {
  140.       //购物车里面有数据，且选中的商品在购物车中，商品数加一
  141.             cartData[i].nums += 1;
  142.             break;
  143.           }
  144.           if (id != cartData[i].id && i == cartData.length - 1) {
  145.             //购物车里面有数据，且选中的商品不在购物车中，添加商品
  146.             cartData.push({
  147.               id: id,
  148.               isChecked: false,
  149.               nums: nums + 1,
  150.               item
  151.             })
  152.             break;
  153.           }
  154.         }
  155.       } else {
  156.         if (id == grids2[i].idx) {
  157.           cartData.push({
  158.             id: id,
  159.             isChecked: false,
  160.             nums: nums + 1,
  161.             item
  162.           }); // 向全局数组中添加新的项
  163.         }
  164.       }
  165.     }
  166.     console.log(cartData);
  167.   },
  168.  
  169.   /**
  170.    * 生命周期函数--监听页面加载
  171.    */
  172.   onLoad(options) {
  173.  
  174.   },
  175.  
  176.   /**
  177.    * 生命周期函数--监听页面初次渲染完成
  178.    */
  179.   onReady() {
  180.  
  181.   },
  182.  
  183.   /**
  184.    * 生命周期函数--监听页面显示
  185.    */
  186.   onShow() {
  187.  
  188.   },
  189.  
  190.   /**
  191.    * 生命周期函数--监听页面隐藏
  192.    */
  193.   onHide() {
  194.  
  195.   },
  196.  
  197.   /**
  198.    * 生命周期函数--监听页面卸载
  199.    */
  200.   onUnload() {
  201.  
  202.   },
  203.  
  204.   /**
  205.    * 页面相关事件处理函数--监听用户下拉动作
  206.    */
  207.   onPullDownRefresh() {
  208.  
  209.   },
  210.  
  211.   /**
  212.    * 页面上拉触底事件的处理函数
  213.    */
  214.   onReachBottom() {
  215.  
  216.   },
  217.  
  218.   /**
  219.    * 用户点击右上角分享
  220.    */
  221.   onShareAppMessage() {
  222.  
  223.   }
  224. })
4、JSON文件:
  1. //注册需要用的的组件
  2. {
  3.   "usingComponents": {
  4.  
  5.     "l-button": "/miniprogram_npm/lin-ui/button/index",
  6.     "l-icon": "/miniprogram_npm/lin-ui/icon/index",
  7.     "l-price": "/miniprogram_npm/lin-ui/price/index",
  8.     "l-grid": "/miniprogram_npm/lin-ui/grid/index",
  9.     "l-grid-item": "/miniprogram_npm/lin-ui/grid-item/index"
  10.   }
  11. }
5、补充 

同时为了和购物车界面发生数据交互，我在app.js中声明了一个数组，用来传递数据

app.js

  1. // app.js
  2. App({
  3.  
  4.   onLaunch() {
  5.     // 展示本地存储能力
  6.     const logs = wx.getStorageSync('logs') || []
  7.     logs.unshift(Date.now())
  8.     wx.setStorageSync('logs', logs)
  9.  
  10.     // 登录
  11.     wx.login({
  12.       success: res => {
  13.         // 发送 res.code 到后台换取 openId, sessionKey, unionId
  14.       }
  15.     })
  16.  
  17.   },
  18.   // userInfo: null,
  19.   globalData: {
  20. //声明全局数组，传递数据
  21.     cartData: []
  22.   }
  23. })

二、购物车界面

 

        购物车界面的功能相对来说还是比较好一点的，全选、单选，都有逻辑判断，就是那个件数我用的组件，所以功能只是虚假的并没有改变本地数组里面的值。只是界面自身的渲染，     

 1、WXML文件
  1. <!--pages/cart/cart.wxml-->
  2. <view class="add">
  3. <!--用 wx:if 进行判断，有商品和没有商品展示不同的界面-->
  4.   <view wx:if="{{cart}}" class="add-cart">
  5.     <!--购物车为空-->
  6.     <image src="/images/my/cart-empty.png" mode="widthFix" />
  7.     <view class="add-text">
  8.       <text>购物车空空如也，去逛逛吧~~</text>
  9.     </view>
  10.   </view>
  11.   <view wx:if="{{!cart}}">
  12.     <!--购物车里面有商品-->
  13.     <view style="padding-bottom: 12%;">
  14.       <l-checkbox-group>
  15.         <l-checkbox key="{{item.id}}" checked="{{item.isChecked}}" wx:for="{{cartData}}" wx:key="id" wx:for-item="item" class="product" bindtap="Single" data-id="{{item.id}}" selected-color="blue">
  16.           <image src="{{item.item.src1}}" mode="widthFix" />
  17.           <l-counter count="{{item.nums}}" min="1" max="10" />
  18.           <l-button type="error" shape="semicircle" width="120" height="60" class="sanchu" bindtap="Delete" data-id="{{item.id}}">删除</l-button>
  19.         </l-checkbox>
  20.       </l-checkbox-group>
  21.     </view>
  22.     <view class="settle">
  23.       <l-checkbox-group bind:linchange="onChangeTap" class="select">
  24.         <l-checkbox key="1" selected-color="blue" checked="{{Checked}}">全选</l-checkbox>
  25.       </l-checkbox-group>
  26.       <view class="total">
  27.         合计：<l-price unit="￥" value="0"></l-price>
  28.       </view>
  29.       <l-button type="error" shape="semicircle" width="120" height="60">结算</l-button>
  30.     </view>
  31.   </view>
  32. </view>

 2、WSXX文件

  1. /* pages/cart/cart.wxss */
  2. page {
  3.   background-color: #f5f5f5;
  4. }
  5.  
  6. .add {
  7.   width: 100%;
  8. }
  9.  
  10. .add-cart {
  11.   align-items: center;
  12. }
  13.  
  14. .add-cart image {
  15.   width: 400rpx;
  16.   margin-left: 50%;
  17.   margin-top: 50%;
  18.   transform: translate(-50%, -50%);
  19.  
  20. }
  21.  
  22. .add-text {
  23.   align-items: center;
  24.   width: 65%;
  25. }
  26.  
  27. .add-text text {
  28.   display: block;
  29.   font-size: 40rpx;
  30.   margin-left: 20%;
  31.   transform: translate(25%, -100%);
  32. }
  33.  
  34. .product {
  35.   display: flex;
  36.   width: 100%;
  37.   margin: 15rpx;
  38.   border-radius: 20rpx;
  39.   background-color: #ffffff;
  40. }
  41.  
  42. .product image {
  43.   width: 200rpx;
  44.   margin-left: 5%;
  45.   margin-right: 12%;
  46. }
  47.  
  48. .sanchu {
  49.   margin-left: 3%;
  50. }
  51.  
  52. .settle {
  53.   position: fixed;
  54.   width: 100%;
  55.   padding: 10rpx;
  56.   bottom: 0%;
  57.   display: flex;
  58.   height: 60rpx;
  59.   border-top: 1rpx solid #e8e8e8;
  60.   background-color: #ffffff;
  61.  
  62. }
  63.  
  64. .select {
  65.   height: 60rpx;
  66.   line-height: 65rpx;
  67. }
  68.  
  69. .total {
  70.   padding: 10rpx;
  71.   margin-left: 20rpx;
  72.   width: 400rpx;
  73. }
 3、JS文件
  1. // pages/cart/cart.js
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.  
  8.   /**
  9.    * cartData: [],    用来储存商品数据
  10.    * cart: true,      修改展示的内容
  11.    * Checked: false   判断商品是否选中
  12.    */
  13.   data: {
  14.     cartData: [],
  15.     cart: true,
  16.     Checked: false
  17.   },
  18.  
  19.   onChangeTap: function (event) {
  20.     // 处理 "linchange" 事件的逻辑代码
  21.     var app = getApp();
  22.     const cartData = app.globalData.cartData;
  23.    //获取加入购物车的数据并赋值给cartData
  24.  
  25.     for (let i = 0; i < cartData.length; i++) {
  26. //循环数组，如果按钮选中就改为取消，未选就改为选中
  27.       if (this.data.Checked == false) {
  28.         cartData[i].isChecked = true;
  29.       } else {
  30.         cartData[i].isChecked = false;
  31.       }
  32.     }
  33. //变成响应式数据
  34.     this.setData({
  35.       Checked: !this.data.Checked,
  36.       cartData: cartData
  37.     });
  38.   },
  39.   Single(event) {
  40. //全选按钮
  41.     const id = event.currentTarget.dataset.id;
  42.     var app = getApp();
  43.     const cartData = app.globalData.cartData;
  44.     for (let i = 0; i < cartData.length; i++) {
  45.       if (id == cartData[i].id) {
  46.         cartData[i].isChecked = !cartData[i].isChecked;
  47.       }
  48.       if (cartData[i].isChecked == false) {
  49.         this.data.Checked = false
  50.       }
  51.     }
  52.     // 判断数组中的所有对象的 isChecked 属性是否全部为 true
  53.     const allTrue = cartData.every(item => item.isChecked === true);
  54.  
  55.     // 如果所有对象的 isChecked 属性都为false，则将它们的值改为true
  56.     if (allTrue) {
  57.       cartData.forEach(item => {
  58.         this.data.Checked = true;
  59.       });
  60.     }
  61.  
  62.     this.setData({
  63.       Checked: this.data.Checked,
  64.       cartData: cartData
  65.     });
  66.   },
  67.  
  68.   Delete(event) {
  69.     const id = event.currentTarget.dataset.id;
  70.     var app = getApp();
  71.     const cartData = app.globalData.cartData;
  72.     for (let i = 0; i < cartData.length; i++) {
  73.       if (id == cartData[i].id) {
  74.         cartData.splice(i, 1); // 删除索引为i的元素
  75.         break; // 停止遍历，因为已经找到并删除了对应的元素
  76.       }
  77.     }
  78.     this.setData({
  79.       cartData: cartData
  80.     });
  81.   },
  82.   /**
  83.    * 生命周期函数--监听页面加载
  84.    */
  85.   onLoad(options) {
  86.  
  87.   },
  88.  
  89.   /**
  90.    * 生命周期函数--监听页面初次渲染完成
  91.    */
  92.   onReady() {},
  93.  
  94.   /**
  95.    * 生命周期函数--监听页面显示
  96.    */
  97.   onShow() {
  98. //进入界面的时候进行判断，看看满足不满足全选条件
  99.     var app = getApp();
  100.     const cartData = app.globalData.cartData;
  101.     if (cartData.length === 0) {
  102.       this.data.cart = true;
  103.     } else {
  104.       this.data.cart = false;
  105.     }
  106.     for (let i = 0; i < cartData.length; i++) {
  107.       if (cartData[i].isChecked == false) {
  108.         this.data.Checked = false
  109.       }
  110.     }
  111.     this.setData({
  112.       cartData,
  113.       Checked: this.data.Checked,
  114.       cart: this.data.cart
  115.     })
  116.  
  117.   },
  118.  
  119.   /**
  120.    * 生命周期函数--监听页面隐藏
  121.    */
  122.   onHide() {
  123.  
  124.   },
  125.  
  126.   /**
  127.    * 生命周期函数--监听页面卸载
  128.    */
  129.   onUnload() {
  130.  
  131.   },
  132.  
  133.   /**
  134.    * 页面相关事件处理函数--监听用户下拉动作
  135.    */
  136.   onPullDownRefresh() {
  137.  
  138.   },
  139.  
  140.   /**
  141.    * 页面上拉触底事件的处理函数
  142.    */
  143.   onReachBottom() {
  144.  
  145.   },
  146.  
  147.   /**
  148.    * 用户点击右上角分享
  149.    */
  150.   onShareAppMessage() {
  151.  
  152.   }
  153. })
 4、JSON文件
  1. {
  2.   "usingComponents": {
  3.     "l-search-bar": "/miniprogram_npm/lin-ui/search-bar/index",
  4.     "l-icon": "/miniprogram_npm/lin-ui/icon/index",
  5.     "l-index-list": "/miniprogram_npm/lin-ui/index-list/index"
  6.   }
  7. }

三、分类界面和个人中心界面

     这两个界面写的比较简单个人中心界面上没有啥功能，分类上面实现一个功能我还是比较满意的，就是分类商品的展示问题，这个我思考了好一会，想找个组件用但是没有找到，然后就想到了一个办法，就是点击分类的名称时在JS中处理数据，将对应的数据放到一个新的空数组里面，然后进行展示。

        分类界面：红框包裹起来的部分循环的是两个不同的数组

 代码比较简单，就不展示啦

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/542716
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号