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

微信小程序—仿写京东购物商城带源码_微信小程序仿京东

作者：很楠不爱3 | 2024-05-30 11:08:54

赞

踩

微信小程序仿京东

商品分类界面 

搜索界面 

代码：

  1. 首页wxml：
  2. <!--顶部搜素框-->
  3.  
  4. <view class="search">
  5.  
  6.   <view class="searchlong">
  7.  
  8.     <image class="searchico" src="/images/index/16.png"></image>
  9.  
  10.     <input class="searchkuang" type="text" placeholder="窗帘遮光"/>
  11.  
  12.     <image class="photoico" src="/images/index/17.png"></image>
  13.  
  14.     <button class="searchbutton">搜索</button>
  15.  
  16.   </view>
  17.  
  18.   <image class="doudou" src="/images/index/15.jpg"></image>
  19.  
  20.   <view class="daohanglan">
  21.  
  22.     <block wx:for="{{daohang}}">
  23.  
  24.     <text class="daohangstyle">{{item}}</text>
  25.  
  26.   </block>
  27.  
  28.   <image class="xiala" src="/images/index/18.png"></image>
  29.  
  30.   </view>
  31.  
  32. </view>
  33.  
  34.  <!--顶部轮播图-->
  35.  
  36.  <view class="luobotu">
  37.  
  38.   <swiper autoplay="{{autoplay}}" interval="{{interval}}">
  39.  
  40.   <block wx:for="{{imgUrls}}">
  41.  
  42.     <swiper-item>
  43.  
  44.       <image class = "lunboimg" src="{{item}}"></image>
  45.  
  46.     </swiper-item>
  47.  
  48.   </block>
  49.  
  50. </swiper>
  51.  
  52.  </view>
  53.  
  54.  
  55.  
  56. <!--10个京东图标-->
  57.  
  58. <view class="content">
  59.  
  60.   <block wx:for="{{elements}}">
  61.  
  62.     <view class="content-item">
  63.  
  64.       <view>
  65.  
  66.         <image src="{{item.image}}" style="width:86rpx;height:78rpx;"></image>
  67.  
  68.       </view>
  69.  
  70.       <view>
  71.  
  72.         {{item.name}}
  73.  
  74.       </view>
  75.  
  76.     </view>
  77.  
  78.   </block>
  79.  
  80. </view>
  81.  
  82. <view class="shenquan">
  83.  
  84.   <image class="shenquanimg" src="/images/index/11.jpg"></image>
  85.  
  86. </view>
  87.  
  88. <!--商品展示-->
  89.  
  90. <view class="hr"></view>
  91.  
  92. <view class="footer">
  93.  
  94.   <text class="jd">京东秒杀</text>
  95.  
  96.   <image class="footerimg" src="/images/index/12.png"></image>
  97.  
  98.   <text class="wenzi">9.9元抢翻天</text>
  99.  
  100.   <text class="jiantou">＞</text>
  101.  
  102.   
  103.  
  104.   <view class="content1">
  105.  
  106.   <block wx:for="{{elements2}}">
  107.  
  108.     <view class="botton">
  109.  
  110.       <view>
  111.  
  112.         <image src="{{item.image}}" style="width:170rpx;height:200rpx;"></image>
  113.  
  114.         <text class="money">
  115.  
  116.         {{item.name}}
  117.  
  118.       </text>
  119.  
  120.       </view>
  121.  
  122.     </view>
  123.  
  124.   </block>
  125.  
  126. </view>
  127.  
  128. </view>
  129.  
  1. 首页wxss:
  2. /*顶部图片大小*/
  3.  
  4. swiper image {
  5.  
  6.   width: 100%;
  7.  
  8.   height: 300rpx;
  9.  
  10. }
  11.  
  12. .search{
  13.  
  14.   position: absolute;
  15.  
  16.   width: 750rpx;
  17.  
  18.   height: 300rpx;
  19.  
  20.   background-color: #FF0000;
  21.  
  22.   
  23.  
  24. }
  25.  
  26. .kongge{
  27.  
  28.   width: 20px;
  29.  
  30.   height: 20px;
  31.  
  32. }
  33.  
  34. .searchbutton{
  35.  
  36.   background-color: rgb(201,52,35);
  37.  
  38.   width: 50px;
  39.  
  40.   height: 55rpx;
  41.  
  42.   margin-top: 2rpx;
  43.  
  44.   border-radius: 10px 10px 10px 10px;
  45.  
  46.   font-size: 9px;
  47.  
  48.   color: #f4f5f6;
  49.  
  50. }
  51.  
  52. .doudou{
  53.  
  54.   width: 60rpx;
  55.  
  56.   height:60rpx;
  57.  
  58.   position: absolute;
  59.  
  60.   right: 20rpx;
  61.  
  62.   top: 5rpx;
  63.  
  64. }
  65.  
  66. .searchico{
  67.  
  68.   margin-top: 5px;
  69.  
  70.   margin-left: 10px;
  71.  
  72.   margin-right: 7px;
  73.  
  74.   width: 20px;
  75.  
  76.   height: 20px;
  77.  
  78.   border-radius: 10px 10px 10px 10px;
  79.  
  80. }
  81.  
  82. .daohanglan{
  83.  
  84.   position: relative;
  85.  
  86.   top: 5px;
  87.  
  88. }
  89.  
  90. .luobotu{
  91.  
  92.   position: relative;
  93.  
  94.   top: 70px;
  95.  
  96. }
  97.  
  98. .shenquan{
  99.  
  100.   margin-top: 23px;
  101.  
  102.   width: auto;
  103.  
  104.   height: 130rpx;
  105.  
  106. }
  107.  
  108. .shenquanimg{
  109.  
  110.   margin-left: 20rpx;
  111.  
  112.   margin-right: 20rpx;
  113.  
  114.   height: 130rpx;
  115.  
  116.   width: 700rpx;
  117.  
  118. }
  119.  
  120. .lunboimg{
  121.  
  122.   height: 100px;
  123.  
  124.   width: 700rpx;
  125.  
  126.   margin-left: 25rpx;
  127.  
  128.   margin-right: 25rpx;
  129.  
  130.   border-radius: 10px 10px 10px 10px;
  131.  
  132. }
  133.  
  134. .xiala{
  135.  
  136.   position: relative;
  137.  
  138.   top: 5px;
  139.  
  140.   right: 0px;
  141.  
  142.   width: 20px;
  143.  
  144.   height: 20px;
  145.  
  146.  
  147.  
  148. }
  149.  
  150. .daohangstyle{
  151.  
  152.   font-size: 13px;
  153.  
  154.   color: #f4f5f6;
  155.  
  156.   margin: 17rpx;
  157.  
  158. }
  159.  
  160. .photoico{
  161.  
  162.   margin-top: 5px;
  163.  
  164.   margin-left: 10px;
  165.  
  166.   margin-right: 2px;
  167.  
  168.   width: 20px;
  169.  
  170.   height: 20px;
  171.  
  172.   border-radius: 10px 10px 10px 10px;
  173.  
  174. }
  175.  
  176. .searchkuang{
  177.  
  178.   font-size: 12px;
  179.  
  180.   width: 335rpx;
  181.  
  182.   height: 30px;
  183.  
  184. }
  185.  
  186. .searchlong{
  187.  
  188.   position: relative;
  189.  
  190.   display: flex;
  191.  
  192.   flex-direction: row;
  193.  
  194.   flex-wrap: wrap;
  195.  
  196.   width: 640rpx;
  197.  
  198.   height: 25px;
  199.  
  200.   border-radius: 20px 20px 20px 20px;
  201.  
  202.   font-weight: 100;
  203.  
  204.   background-color: #f4f5f6;
  205.  
  206.   left: 20rpx;
  207.  
  208. }
  209.  
  210. /*10个京东图标外部容器布局*/
  211.  
  212. .content {
  213.  
  214.   display: flex;
  215.  
  216.   flex-direction: row;
  217.  
  218.   flex-wrap: wrap;
  219.  
  220.   position: relative;
  221.  
  222.   top: 20px;
  223.  
  224. }
  225.  
  226. /*10个京东图标内部容器样式*/
  227.  
  228. .content-item {
  229.  
  230.   width: 20%;
  231.  
  232.   text-align: center;
  233.  
  234.   font-size: 24rpx;
  235.  
  236.   margin: 8rpx 0;
  237.  
  238. }
  239.  
  240. /*分割线样式*/
  241.  
  242. .hr {
  243.  
  244.   width: 100%;
  245.  
  246.   height: 30rpx;
  247.  
  248.   background-color: #f4f5f6;
  249.  
  250. }
  251.  
  252. .content1{
  253.  
  254.   display: flex;
  255.  
  256.   flex-direction: row;
  257.  
  258.   flex-wrap: wrap;
  259.  
  260.   height: 400rpx;
  261.  
  262. }
  263.  
  264. /*页面底部外部容器布局
  265.  
  266. .footer {
  267.  
  268.   display: flex;
  269.  
  270.   flex-direction: row;
  271.  
  272.   justify-content: space-between;
  273.  
  274.   padding: 20rpx 40rpx;
  275.  
  276. }*/
  277.  
  278. /*"京东拼购"字体样式*/
  279.  
  280. .jd {
  281.  
  282.   margin: 20rpx;
  283.  
  284. }
  285.  
  286. .footerimg{
  287.  
  288.   margin-top: 20rpx;
  289.  
  290.   width: 200rpx;
  291.  
  292.   height: 50rpx;
  293.  
  294. }
  295.  
  296. .wenzi {
  297.  
  298.   margin-left: 130rpx;
  299.  
  300.   font-size: 12px;
  301.  
  302.   color: darkgrey;
  303.  
  304. }
  305.  
  306. .jiantou{
  307.  
  308.   font-size: 20px;
  309.  
  310.   margin-top: 20rpx;
  311.  
  312.   position: absolute;
  313.  
  314.   right: 0rpx;
  315.  
  316.   font-weight: bolder;
  317.  
  318. }
  319.  
  320. .botton{
  321.  
  322.   margin-top: 10rpx;
  323.  
  324.   width: 150rpx;
  325.  
  326.   margin-left: 10rpx;
  327.  
  328.   margin-right: 10rpx;
  329.  
  330.   height: 230rpx;
  331.  
  332. }
  333.  
  334. .money{
  335.  
  336.   color: #FF0000;
  337.  
  338.   font-size: 14px;
  339.  
  340.   font-weight: bolder;
  341.  
  342. }
  1.  
  2. 首页js：
  3. Page({
  4.  
  5.   data: {
  6.  
  7.     autoplay: true,
  8.  
  9.     interval: 5000,
  10.  
  11.     imgUrls: [
  12.  
  13.       "/images/haibao/haibao-1.png",
  14.  
  15.       "/images/haibao/haibao-3.jpg",
  16.  
  17.       "/images/haibao/haibao-2.png"
  18.  
  19.     ],
  20.  
  21.     daohang: [
  22.  
  23.       "首页",
  24.  
  25.       "补贴爆品",
  26.  
  27.       "女鞋",
  28.  
  29.       "宠物",
  30.  
  31.       "爱车",
  32.  
  33.       "箱包皮具"
  34.  
  35.     ],
  36.  
  37.     elements: [{
  38.  
  39.         image: "/images/index/1.png",
  40.  
  41.         name: "京东超市",
  42.  
  43.       }, {
  44.  
  45.         image: "/images/index/2.png",
  46.  
  47.         name: "京东家电",
  48.  
  49.       },
  50.  
  51.       {
  52.  
  53.         image: "/images/index/3.png",
  54.  
  55.         name: " 京东服饰",
  56.  
  57.       },
  58.  
  59.       {
  60.  
  61.         image: "/images/index/4.png",
  62.  
  63.         name: "京东手机",
  64.  
  65.       },
  66.  
  67.       {
  68.  
  69.         image: "/images/index/5.png",
  70.  
  71.         name: "京喜",
  72.  
  73.       },
  74.  
  75.       {
  76.  
  77.         image: "/images/index/6.jpg",
  78.  
  79.         name: "一元疯抢",
  80.  
  81.       }, {
  82.  
  83.         image: "/images/index/7.jpg",
  84.  
  85.         name: "领京豆",
  86.  
  87.       }, {
  88.  
  89.         image: "/images/index/8.jpg",
  90.  
  91.         name: "   领优惠券",
  92.  
  93.       }, {
  94.  
  95.         image: "/images/index/9.jpg",
  96.  
  97.         name: "免费水果",
  98.  
  99.       }, {
  100.  
  101.         image: "/images/index/10.jpg",
  102.  
  103.         name: "充值中心",
  104.  
  105.       },
  106.  
  107.     ],
  108.  
  109.     elements2: [{
  110.  
  111.       image: "/images/index/19.jpg",
  112.  
  113.       name: "京东超市",
  114.  
  115.     }, {
  116.  
  117.       image: "/images/index/20.jpg",
  118.  
  119.       name: "京东家电",
  120.  
  121.     },
  122.  
  123.     {
  124.  
  125.       image: "/images/index/21.jpg",
  126.  
  127.       name: " 京东服饰",
  128.  
  129.     },
  130.  
  131.     {
  132.  
  133.       image: "/images/index/22.jpg",
  134.  
  135.       name: " 京东服饰",
  136.  
  137.     },
  138.  
  139.   ],
  140.  
  141.   }
  142.  
  143. })
  1.  
  2. 搜索wxml:
  3. <view class="total">
  4.  
  5.   <view class="search">
  6.  
  7.     <image class="searchicon" src="/images/index/45.png"></image>
  8.  
  9.     <view class="searchtext">手机x</view>
  10.  
  11.   </view>
  12.  
  13.   <view class="tiaojian">
  14.  
  15.     <view class="zonghe">综合<image class="xiala" src="/images/index/46.png"></image></view>
  16.  
  17.     <view class="xiaoliang">销量</view>
  18.  
  19.     <view class="price">价格<image class="priceimg" src="/images/index/47.png" ></image></view>
  20.  
  21.     <view class="hour"><image class="houtimg" src="/images/index/48.png" ></image>小时达</view>
  22.  
  23.   </view>
  24.  
  25.   <view class="biaoji">
  26.  
  27.     <view class="bggray">京东物流</view>
  28.  
  29.     <view class="bggray">新品</view>
  30.  
  31.     <view class="bggray">品牌<image class="pinpai" src="/images/index/46.png"></image></view>
  32.  
  33.     <view class="bggray">拍拍二手</view>
  34.  
  35.     <view class="choose">筛选<image class="shalou" src="/images/index/49.png"></image></view>
  36.  
  37.   </view>
  38.  
  39.   <block wx:for="{{elements}}">
  40.  
  41.     <view class="goodsbox1">
  42.  
  43.     <image class="iponeimg" src="{{item.image}}"></image>
  44.  
  45.     <view class="goodstext">
  46.  
  47.       <view class="goodstitle">{{item.goodstitle}}</view>
  48.  
  49.       <view class="canshu">
  50.  
  51.         <view class="goodscanshu1"> {{item.chicun}}英寸</view>
  52.  
  53.         <view class="goodscanshu1">{{item.neicun}}GB内存</view>
  54.  
  55.       </view>
  56.  
  57.     <view class="goodsprice">￥{{item.price}}</view>
  58.  
  59.     <view class="goodsbox">
  60.  
  61.         <view class="pingjia">{{item.pingjia}}条评价</view>
  62.  
  63.         <view class="pingjia">{{item.haoping}}好评</view>
  64.  
  65.     </view>
  66.  
  67.     <view class="goodsbox">
  68.  
  69.       <view class="pingjia">{{item.dianpu}}</view>
  70.  
  71.       <view class="jindian">进店<image style="width: 16rpx;height: 16rpx;" src="/images/index/50.png"></image></view>
  72.  
  73.     </view>
  74.  
  75.   </view>
  76.  
  77.   </view>
  78.  
  79.   </block>
  80.  
  81.  
  82.  
  83. </view>
  1.  
  2. 搜索wxss:
  3. /* page/jd-goods/jd-goods.wxss */
  4.  
  5. .search{
  6.  
  7.   display: flex;
  8.  
  9.   flex-direction: row;
  10.  
  11.   flex-wrap: wrap;
  12.  
  13.   margin: 20rpx;
  14.  
  15.   width: 720rpx;
  16.  
  17.   height: 80rpx;
  18.  
  19.   background-color: lightgray;
  20.  
  21.   border-radius: 40rpx 40rpx 40rpx 40rpx;
  22.  
  23. }
  24.  
  25. .searchtext{
  26.  
  27.   text-align: center;
  28.  
  29.   background-color: gray;
  30.  
  31.   font-size: 12px;
  32.  
  33.   height: 30rpx;
  34.  
  35.   border-radius: 30rpx 30rpx 30rpx 30rpx;
  36.  
  37.   padding: 20rpx 20rpx;
  38.  
  39.   padding-top: 10rpx;
  40.  
  41.   margin-top: 10rpx;
  42.  
  43.   color: aliceblue;
  44.  
  45. }
  46.  
  47. .searchicon{
  48.  
  49.   width: 50rpx;
  50.  
  51.   height: 50rpx;
  52.  
  53.   margin-top: 15rpx;
  54.  
  55.   margin-left: 20rpx;
  56.  
  57. }
  58.  
  59.  
  60.  
  61. .tiaojian{
  62.  
  63.   display: flex;
  64.  
  65.   flex-direction: row;
  66.  
  67.   flex-wrap: wrap;
  68.  
  69. }
  70.  
  71. .zonghe{
  72.  
  73.   height: 80rpx;
  74.  
  75.   font-size: 14px;
  76.  
  77.   margin-left: 50rpx;
  78.  
  79.   margin-right: 50rpx;
  80.  
  81.   margin-top: 10rpx;
  82.  
  83. }
  84.  
  85. .xiala{
  86.  
  87.   position: relative;
  88.  
  89.   top: 15rpx;
  90.  
  91.   width: 50rpx;
  92.  
  93.   height: 50rpx;
  94.  
  95. }
  96.  
  97. .xiaoliang{
  98.  
  99.   font-weight: bolder;
  100.  
  101.   height: 80rpx;
  102.  
  103.   font-size: 14px;
  104.  
  105.   margin-left: 50rpx;
  106.  
  107.   margin-right: 50rpx;
  108.  
  109.   margin-top: 25rpx;
  110.  
  111. }
  112.  
  113. .price{
  114.  
  115.   font-weight: bolder;
  116.  
  117.   height: 80rpx;
  118.  
  119.   font-size: 14px;
  120.  
  121.   margin-left: 50rpx;
  122.  
  123.   margin-right: 50rpx;
  124.  
  125.   margin-top: 25rpx;
  126.  
  127.   color: darkgrey;
  128.  
  129. }
  130.  
  131. .priceimg{
  132.  
  133.   width: 20rpx;
  134.  
  135.   height: 20rpx;
  136.  
  137. }
  138.  
  139. .hour{
  140.  
  141.   font-weight: bolder;
  142.  
  143.   height: 80rpx;
  144.  
  145.   font-size: 14px;
  146.  
  147.   font-style: oblique;
  148.  
  149.   margin-left: 30rpx;
  150.  
  151.   margin-top: 25rpx;
  152.  
  153. }
  154.  
  155. .houtimg{
  156.  
  157.   position: relative;
  158.  
  159.   top: 10rpx;
  160.  
  161.   width: 40rpx;
  162.  
  163.   height: 40rpx;
  164.  
  165. }
  166.  
  167. .biaoji{
  168.  
  169.   display: flex;
  170.  
  171.   flex-direction: row;
  172.  
  173.   flex-wrap: wrap;
  174.  
  175. }
  176.  
  177. .bggray{
  178.  
  179.   text-align: center;
  180.  
  181.   background-color: lightgray;
  182.  
  183.   font-size: 12px;
  184.  
  185.   height: 30rpx;
  186.  
  187.   border-radius: 30rpx 30rpx 30rpx 30rpx;
  188.  
  189.   padding: 20rpx 20rpx;
  190.  
  191.   padding-top: 10rpx;
  192.  
  193.   margin-left: 30rpx;
  194.  
  195. }
  196.  
  197. .pinpai{
  198.  
  199.   width: 30rpx;
  200.  
  201.   height: 30rpx;
  202.  
  203. }
  204.  
  205. .shalou{
  206.  
  207.   width: 30rpx;
  208.  
  209.   height: 30rpx;
  210.  
  211. }
  212.  
  213. .choose{
  214.  
  215.   position: relative;
  216.  
  217.   top: 6rpx;
  218.  
  219.   text-align: center;
  220.  
  221.   height: 60rpx;
  222.  
  223.   font-size: 14px;
  224.  
  225.   box-shadow:-0.5px 0px 0px 0px gray ;
  226.  
  227.   padding-left: 10rpx;
  228.  
  229. }
  230.  
  231. .iponeimg{
  232.  
  233.   height: 300rpx;
  234.  
  235.   width: 300rpx;
  236.  
  237.   border-radius: 20rpx 20rpx 20rpx 20rpx;
  238.  
  239. }
  240.  
  241. .goodsbox1{
  242.  
  243.   display: flex;
  244.  
  245.   flex-direction: row;
  246.  
  247.   flex-wrap: wrap;
  248.  
  249.   margin-top: 20rpx;
  250.  
  251. }
  252.  
  253. .goodsbox{
  254.  
  255.   display: flex;
  256.  
  257.   flex-direction: row;
  258.  
  259.   flex-wrap: wrap;
  260.  
  261. }
  262.  
  263. .goodstext{
  264.  
  265.   
  266.  
  267.   margin-left: 10rpx;
  268.  
  269.   width: 430rpx;
  270.  
  271.   height: 300rpx;
  272.  
  273.   display: flex;
  274.  
  275.   flex-direction: row;
  276.  
  277.   flex-wrap: wrap;
  278.  
  279. }
  280.  
  281. .goodstitle{
  282.  
  283.   font-weight: bolder;
  284.  
  285.   font-size: 12px;
  286.  
  287. }
  288.  
  289. .goodsprice{
  290.  
  291.   color: red;
  292.  
  293.   font-weight: 600;
  294.  
  295.   font-size: 14px;
  296.  
  297.   width: 400rpx;
  298.  
  299. }
  300.  
  301. .canshu{
  302.  
  303.   display: flex;
  304.  
  305.   flex-direction: row;
  306.  
  307.   flex-wrap: wrap;
  308.  
  309.   width: 400rpx;
  310.  
  311. }
  312.  
  313. .goodscanshu1{
  314.  
  315.   font-weight: bolder;
  316.  
  317.   text-align: center;
  318.  
  319.   height: 25rpx;
  320.  
  321.   border-radius: 15rpx 15rpx 15rpx 15rpx;
  322.  
  323.   font-size: 8px;
  324.  
  325.   color: gray;
  326.  
  327.   background-color: lightgrey;
  328.  
  329.   padding: 5rpx;
  330.  
  331.   margin-top: 20rpx;
  332.  
  333.   margin-bottom: 20rpx;
  334.  
  335.   margin-left: 0rpx;
  336.  
  337.   margin-right: 10rpx;
  338.  
  339. }
  340.  
  341. .pingjia{
  342.  
  343.   font-size: 8px;
  344.  
  345.   color: gray;
  346.  
  347.   margin-right: 20rpx;
  348.  
  349. }
  350.  
  351. .jindian{
  352.  
  353.   font-size: 8px;
  354.  
  355.   font-weight: bolder;
  356.  
  357. }
  1.  
  2. 搜索js:
  3. Page({
  4.  
  5.   data: {
  6.  
  7.     elements: [{
  8.  
  9.       image:"/images/index/51.jpg",
  10.  
  11.       goodstitle:"华为HMS超薄便宜智能手机学生价游戏长续航大屏百元机",
  12.  
  13.       neicun:"8",
  14.  
  15.       chicun:"6.6",
  16.  
  17.       price:"599.00",
  18.  
  19.       pingjia:"5000+",
  20.  
  21.       haoping:"97%",
  22.  
  23.       dianpu:"百事乐手机官方旗舰店",
  24.  
  25.     }, {
  26.  
  27.       image:"/images/index/52.jpg",
  28.  
  29.       goodstitle:"荣耀Play5T Pro 6400万双摄6.6英寸全视屏22.5W超级快充4000mAh大电池",
  30.  
  31.       neicun:"8",
  32.  
  33.       chicun:"6.6",
  34.  
  35.       price:"1099.00",
  36.  
  37.       pingjia:"20万+",
  38.  
  39.       haoping:"96%",
  40.  
  41.       dianpu:"荣耀京东自营旗舰店",
  42.  
  43.     },
  44.  
  45.     {
  46.  
  47.       image:"/images/index/53.jpg",
  48.  
  49.       goodstitle:"荣耀Play5 活力版 66W超级快充 120Hz全速屏 6400万超清摄像 全网通版8GB+128GB",
  50.  
  51.       neicun:"8",
  52.  
  53.       chicun:"6.67",
  54.  
  55.       price:"599.00",
  56.  
  57.       pingjia:"5万+",
  58.  
  59.       haoping:"97%",
  60.  
  61.       dianpu:"百事乐手机官方旗舰店",
  62.  
  63.     },
  64.  
  65.   ],
  66.  
  67.   }
  68.  
  69. })
  1. 商品分类wxml
  2. <!--分割线-->
  3.  
  4. <view class="hr"></view>
  5.  
  6. <!--输入框-->
  7.  
  8. <input placeholder="请输入商品名称"></input>
  9.  
  10. <view class="hr"></view>
  11.  
  12. <view class="content">
  13.  
  14.   <view class="left">
  15.  
  16.     <!--左侧部分-->
  17.  
  18.     <scroll-view scroll-y="true">
  19.  
  20.       <block wx:for="{{list}}">
  21.  
  22.         <view class="cedaohang">{{item}}</view>
  23.  
  24.       </block>
  25.  
  26.     </scroll-view>
  27.  
  28.   </view>
  29.  
  30.   <view class="right">
  31.  
  32.     <!--右侧部分-->
  33.  
  34.     <view class="order">
  35.  
  36.       <!--分类部分-->
  37.  
  38.       <view>热门搜索</view>
  39.  
  40.     </view>
  41.  
  42.     <view class="content1">
  43.  
  44.   <block wx:for="{{elements}}">
  45.  
  46.     <view class="botton">
  47.  
  48.       <view>
  49.  
  50.         <image class="img" bindtap="clickchoose" src="{{item.image}}"></image>
  51.  
  52.         <view class="texts">
  53.  
  54.          <text class="money">
  55.  
  56.           {{item.name}}
  57.  
  58.         </text>
  59.  
  60.         </view>
  61.  
  62.        
  63.  
  64.       </view>
  65.  
  66.     </view>
  67.  
  68.   </block>
  69.  
  70. </view>
  71.  
  72.   </view>
  73.  
  74. </view>
  1.  
  2. 商品分类wxss:
  3. /*分割线样式*/
  4.  
  5. .hr {
  6.  
  7.   border: 1px solid #EEE9E9;
  8.  
  9.   width: 100%;
  10.  
  11.   opacity: 0.6;
  12.  
  13. }
  14.  
  15. /*输入框样式*/
  16.  
  17. input {
  18.  
  19.   margin: 15rpx 30rpx;
  20.  
  21.   border: 1px solid #ccc;
  22.  
  23.   border-radius: 50rpx;
  24.  
  25.   text-align: center;
  26.  
  27.   font-size: 32rpx;
  28.  
  29. }
  30.  
  31. /*布局样式*/
  32.  
  33. .content {
  34.  
  35.   display: flex;
  36.  
  37.   flex-direction: row;
  38.  
  39. }
  40.  
  41. /*左边样式*/
  42.  
  43. .left {
  44.  
  45.   width: 25%;
  46.  
  47.   font-size: 30rpx;
  48.  
  49. }
  50.  
  51. scroll-view {
  52.  
  53.   height: 90%;
  54.  
  55. }
  56.  
  57. /*左边元素样式*/
  58.  
  59. .left view {
  60.  
  61.   text-align: center;
  62.  
  63.   height: 100rpx;
  64.  
  65.   line-height: 100rpx;
  66.  
  67. }
  68.  
  69. /*右边样式*/
  70.  
  71. .right {
  72.  
  73.   width: 75%;
  74.  
  75. }
  76.  
  77. /*分类样式*/
  78.  
  79. .order {
  80.  
  81.   display: flex;
  82.  
  83.   flex-direction: row;
  84.  
  85.   text-align: center;
  86.  
  87.   padding: 20 rpx;
  88.  
  89. }
  90.  
  91. .order view {
  92.  
  93.   width: 33%;
  94.  
  95.   font-size: 32rpx;
  96.  
  97. }
  98.  
  99. .content1{
  100.  
  101.   display: flex;
  102.  
  103.   flex-direction: row;
  104.  
  105.   flex-wrap: wrap;
  106.  
  107.   height: 400rpx;
  108.  
  109. }
  110.  
  111. .cedaohang{
  112.  
  113.   color: gray
  114.  
  115. }
  116.  
  117. .botton{
  118.  
  119.   text-align: center;
  120.  
  121.   margin-left: 10px;
  122.  
  123.   width: 150rpx;
  124.  
  125. }
  126.  
  127. .texts{
  128.  
  129.   width: 150rpx;
  130.  
  131.   text-align: center;
  132.  
  133. }
  134.  
  135. .img{
  136.  
  137.   height: 140rpx;
  138.  
  139.   width: 100rpx;
  140.  
  141. }
  142.  
  143. .money{
  144.  
  145.   width: 150rpx;
  146.  
  147.   text-align: center;
  148.  
  149.   font-size: 12px;
  150.  
  151.   margin-left: 40px;
  152.  
  153. }
  1.  
  2. 商品分类js：
  3. Page({
  4.  
  5.   data: {
  6.  
  7.     list: ["热搜推荐", "食品酒水", "生鲜果蔬", "美妆护肤", "个护清洁", "精品男装", "精品女装", "内衣配饰", "鞋靴箱包", "手机数码", "家用电器", "电脑办公", "运动户外"],
  8.  
  9.     elements: [{
  10.  
  11.       image: "/images/index/31.png",
  12.  
  13.       name: "手机",
  14.  
  15.     }, {
  16.  
  17.       image: "/images/index/32.png",
  18.  
  19.       name: "冰箱",
  20.  
  21.     },
  22.  
  23.     {
  24.  
  25.       image: "/images/index/33.png",
  26.  
  27.       name: " 华为",
  28.  
  29.     },
  30.  
  31.     {
  32.  
  33.       image: "/images/index/34.jpg",
  34.  
  35.       name: "白酒",
  36.  
  37.     },
  38.  
  39.     {
  40.  
  41.       image: "/images/index/35.jpg",
  42.  
  43.       name: "电饭煲",
  44.  
  45.     },
  46.  
  47.     {
  48.  
  49.       image: "/images/index/36.jpg",
  50.  
  51.       name: "电风扇",
  52.  
  53.     }, {
  54.  
  55.       image: "/images/index/37.jpg",
  56.  
  57.       name: "方便面",
  58.  
  59.     }, {
  60.  
  61.       image: "/images/index/38.png",
  62.  
  63.       name: "   空调",
  64.  
  65.     }, {
  66.  
  67.       image: "/images/index/39.png",
  68.  
  69.       name: "口红",
  70.  
  71.     }, {
  72.  
  73.       image: "/images/index/40.jpg",
  74.  
  75.       name: "蓝牙耳机",
  76.  
  77.     },{
  78.  
  79.       image: "/images/index/41.png",
  80.  
  81.       name: "   跑步鞋",
  82.  
  83.     }, {
  84.  
  85.       image: "/images/index/42.jpg",
  86.  
  87.       name: "平板电视",
  88.  
  89.     }, {
  90.  
  91.       image: "/images/index/43.jpg",
  92.  
  93.       name: "洗衣机",
  94.  
  95.     },{
  96.  
  97.       image: "/images/index/44.jpg",
  98.  
  99.       name: "香水",
  100.  
  101.     },
  102.  
  103.   ],
  104.  
  105.   },
  106.  
  107.   clickchoose:function(){
  108.  
  109.     wx.navigateTo({
  110.  
  111.       url: '../jd-goods/jd-goods',
  112.  
  113.     })
  114.  
  115.   }
  116.  
  117. })
  118.  
  119.  
  120.  
  121. App.json：
  122. {
  123.  
  124.   "pages": [
  125.  
  126.     "pages/jd-index/jd-index",
  127.  
  128.     "page/jd-fenlei/jd-fenlei",
  129.  
  130.     "page/jd-goods/jd-goods"
  131.  
  132.     
  133.  
  134.     
  135.  
  136.   ],
  137.  
  138.   "window": {
  139.  
  140.     "backgroundTextStyle": "light",
  141.  
  142.     "navigationBarBackgroundColor": "#FF0000",
  143.  
  144.     "navigationBarTitleText": "京东购物",
  145.  
  146.     "navigationBarTextStyle": "white"
  147.  
  148.   },
  149.  
  150.   "tabBar": {
  151.  
  152.     "color": "#4D4D4D",
  153.  
  154.     "selectedColor": "#FF0000",
  155.  
  156.     "borderStyle": "black",
  157.  
  158.     "list": [
  159.  
  160.       {
  161.  
  162.         "selectedIconPath": "icon/index0.png",
  163.  
  164.         "iconPath": "icon/index.png",
  165.  
  166.         "pagePath": "pages/jd-index/jd-index",
  167.  
  168.         "text": "首页"
  169.  
  170.       },
  171.  
  172.       {
  173.  
  174.         "selectedIconPath": "icon/sort0.png",
  175.  
  176.         "iconPath": "icon/sort.png",
  177.  
  178.         "pagePath": "page/jd-fenlei/jd-fenlei",
  179.  
  180.         "text": "分类"
  181.  
  182.       },
  183.  
  184.       {
  185.  
  186.         "selectedIconPath": "icon/shop0.png",
  187.  
  188.         "iconPath": "icon/shop.png",
  189.  
  190.         "pagePath": "pages/jd-index/jd-index",
  191.  
  192.         "text": "购物圈"
  193.  
  194.       },
  195.  
  196.       {
  197.  
  198.         "selectedIconPath": "icon/cart0.png",
  199.  
  200.         "iconPath": "icon/cart.png",
  201.  
  202.         "pagePath": "pages/jd-index/jd-index",
  203.  
  204.         "text": "购物车"
  205.  
  206.       },
  207.  
  208.       {
  209.  
  210.         "selectedIconPath": "icon/me0.png",
  211.  
  212.         "iconPath": "icon/me.png",
  213.  
  214.         "pagePath": "pages/jd-index/jd-index",
  215.  
  216.         "text": "我的"
  217.  
  218.       }
  219.  
  220.     ]
  221.  
  222.   },
  223.  
  224.   "sitemapLocation": "sitemap.json"
  225.  
  226. }

结尾：

    源码成品获取：v18634371151

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

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

  

闽ICP备14008679号