【20190404】电商实战

其他 2019-04-22 10:40:52 阅读次数: 0

本周的实验课，我们的题目是微信小程序电商界面，下面看一下整体架构：
在这里插入图片描述
我们看看首页长什么样吧

在这里插入图片描述
为了能够更好的表达出来，先实现如下的功能
在这里插入图片描述

1. 划分模块

大家知道电商平台一般分为首页、商品分类、购物车和个人中心4个核心模块，
那么我们首先在app.json的page里添加如下代码：

"pages":[
    "pages/home/home",
    "pages/classify/classify",
    "pages/cart/cart",
    "pages/personal/personal"
  ]

2. 设计头部

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Hi.World",
    "navigationBarTextStyle":"black"
  }

背景颜色为白色，名称是Hi.World

3. 首页搜索

上面素材看到的搜索部分颜值并不高，是因为录屏工具的问题，实际效果看下图。

在这里插入图片描述

搜索用到了template 模板技术，创建wxSearch模板目录，添加wxSearch.js、wxSearch.json、wxSearch.wxml、wxSearch.wxss
此处省略模板代码，可以直接到Git上下载。 地址如下：
https://github.com/yundianzixun/wxSearch-master
将下载的模板包放到和pages 同级目录，如下图所示
在这里插入图片描述
接下来我们把搜索模板放到首页，会用到 home.wxml和home.wxss

home.wxml

<!--导入wxSearch.wxml-->
<import src="/wxSearch/wxSearch.wxml"/>
<!--search start-->
<view class="wxSearch-section">
   <view class="wxSearch-pancel">
      <input bindinput="wxSearchInput" bindfocus="wxSerchFocus" 
value="{{wxSearchData.value}}" bindblur="wxSearchBlur" 
 class="wxSearch-input" placeholder='面膜'/>
      <view class="placeholder">
        <icon class="weui-icon-search_in-box" type="search" 
size="14"></icon> 
      </view> 
      <view class='wxSearch-button'>
         <text>商品分类</text>
      </view>  
   </view>
</view>
<!--引入模板，注意 is="wxSearch" 和模板template name名称相对应-->
<template is="wxSearch" data="{{wxSearchData}}"/>

home.wxss

<!--引入搜索模板样式-->
@import "/wxSearch/wxSearch.wxss";

4. 制作导航栏

先看我们要实现的效果图
在这里插入图片描述

这个导航栏不是小程序底部导航栏，所以要写在页面里，在你需要导航栏的地方加入如下代码就可以实现，这里以首页为例：

扫描二维码关注公众号，回复： 5967661 查看本文章

home.wxss

/*设置页面整体布局*/
page{  
  display: flex;  
  flex-direction: column;  
  height: 100%;  
} 
.navbar{  
  flex: none;  
  display: flex;  
  background: #fff;  
}  
.navbar .item{  
  position: relative;  
  flex: auto;  
  text-align: center;  
  line-height: 80rpx;  
  font-size:14px;
}  
/* 顶部导航字体颜色 */
.navbar .item.active{  
   color: #e1007e;
}  
/* 顶部指示条属性 */
.navbar .item.active:after{  
  content: "";  
  display: block;  
  position: absolute;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  height: 5rpx;  
  background: #e1007e;  
  width: 70%;
  margin: 0px auto;
}

home.wxml

<!--导航栏-->  
<view class="navbar">  
  <text wx:for="{{navbar}}" data-idx="{{index}}" 
class="item {{currentTab==index ? 'active' : ''}}" 
wx:key="unique" bindtap="navbarTap">{{item}}</text>  
</view>

在home.wxml我们使用bindtap进行点击事件监听，设置事件名称为“navbarTap”并且在home.js里设置这个事件对应的逻辑处理。我们在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item（强烈建议如果还不会用wx:for一定要看看，因为在做数据循环渲染的时候经常要用）

home.js


<!--导航栏-->  
// pages/home/home.js
var app = getApp()
Page({
  data: {
    navbar: ['今日推荐', '时尚', '国际', '美妆', '母婴', '居家'],
    currentTab: 0,
  },

  // 导航切换监听
  navbarTap: function (e) {
    console.debug(e);
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
  },
})

5. 首页轮播Banner

先看效果图
在这里插入图片描述
依然在home 模块，需要改动的页面有home.js、home.wxml、home.wxss

home.wxml

<!-- banner start-->
   <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"
   interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" />
      </swiper-item>
    </block>
  </swiper> 
<!-- banner end-->

swiper 是微信提供的滑块视图容器，直接可以拿来用，记住 里面一定要包含 ，自定义的 view 是无效的，控件的常用属性，

  • indicator-dots 是否显示面板指示点
  • autoplay 是否自动切换
  • interval 自动切换时间间隔
  • duration 滑动动画时长

想要了解多请查看微信官方swiper视图容器 关于wx:for 上面已经介绍过了，不啰嗦了~~~

home.wxss

/* 设置swiper属性 */
swiper {
  height: 300rpx;
  padding: 2px 10px;    
}
/*设置图片属性*/
swiper-item image {
  width: 100%;
  height: 100%;
}

home.js

indicatorDots: true, //设置是否显示面板指示点
autoplay: true, //设置是否自动切换
interval: 3000, //设置自动切换时间间隔,3s
duration: 1000, //  设置滑动动画时长1s
imgUrls: [
      'https://a4.vimage1.com/upload/flow/2017/10/20/117/15084947982974.jpg',
      'https://a2.vimage1.com/upload/flow/2017/11/07/73/15100619325212.jpg',
      'https://b.vimage1.com/upload/mst/2017/11/04/139/23b96f0e89abed2d9415e848fc3715ff_604x290_80.jpg'
    ]

话不多说，先看实际效果图：
在这里插入图片描述

这个模块我们主要用到 scroll-view 视图容器，顾名思义就是滚动视图，当布局的内容超过屏幕容器的时候可以滑动开查看遮盖的内容，scroll-view可滚动视图区域属性详解：

  • scroll-x 允许横向滚动（类型：Boolean，默认值：false）
  • scroll-y 允许纵向滚动（类型：Boolean，默认值：false）
  • upper-threshold 距顶部/左边多远时（单位px），触发 scrolltoupper 事件（类型：Number，默认值：50）
  • lower-threshold 距底部/右边多远时（单位px），触发 scrolltolower 事件（类型：Number，默认值：50）
  • scroll-top 设置竖向滚动条位置（类型：Number）
  • scroll-left 设置横向滚动条位置（类型：Number）
  • scroll-into-view 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素（类型：String）
  • scroll-with-animation 在设置滚动条位置时使用动画过渡（类型：Boolean，默认值：false）

更多请属性详情请查看微信官方scroll-view视图容器

home.wxss

/*==========实时热销榜========*/
.category-title {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 0rpx;
  padding: 0px 10px;
  
}
.category-title .title{
  font-size: 14px;
  font-weight:900;
}

.category-title .line_name{
  font-size: 10px;
  color: #98989f;
  display: flex;
  justify-content:space-between;/**两边对齐**/

}

.goods {
   display: flex;
} 
.goods-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #333;
}
.goods-image{
  width: 280rpx;
  height: 300rpx; 
}
.goods-item text {
  font-size: 25rpx;
} 
.goods-item p{
  font-size: 30rpx;
}

home.wxml

<!--实时热销榜 start-->
<view class="hots-container"> 
  <view class="category-title">
    <text class="title">实时热销榜</text>
    <view class="line_name">
      <text>每15分钟更新一次</text>
      <text>查看全部 ></text>
    </view>
  </view>  
  <scroll-view scroll-x="true">
      <view class="goods">
         <block wx:for-items="{{goodsHotItems}}" wx:key="name">
          <view class="goods-item" catchtap="catchTapCategory" data-type="{{item.name}}" data-typeid="{{item.typeId}}">
              <image src="{{item.imageurl}}" class="goods-image" />   
            <text>{{item.name}}</text>
            <p>￥{{item.newprice}}</p>  
          </view>
        </block> 
      </view>
    </scroll-view>   
</view> 
<!--实时热销榜 end-->

home.js

    goodsHotItems: [
      {
        goodId: 0,
        name: '天然植物唇膏2.4g',
        url: 'bill',
        imageurl: 'https://a3.vimage1.com/upload/merchandise/pdc/272/707/8870197248301707272/2/6922446703595-5_360x456_90.jpg',
        newprice: "32.00",
        oldprice: "59.00",
      },
      {
        goodId: 1,
        name: '流光水彩唇膏升级版 3.5g',
        url: 'bill',
        imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/03/8/4fb444e7-3417-4f4a-b5a1-7f1d884c610f_218x274_70.jpg',
        newprice: "89.00",
        oldprice: "99.00",
      },
      {
        goodId: 2,
        name: '卡姿兰蜗牛氧气泡泡面膜',
        url: 'bill',
        imageurl: 'https:////a3.vimage1.com/upload/merchandise/pdcvis/2017/08/24/167/28c3726f-dfdd-4a59-89ac-b79ea8e24f40_218x274_70.jpg',
        newprice: "139.00",
        oldprice: "159.00",
      },
      {
        goodId: 3,
        name: '特效润肤露',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
        newprice: "30.00",
        oldprice: "80.00",
      },
      {
        goodId: 4,
        name: '御泥坊 | 美白嫩肤泥浆...',
        url: 'bill',
        imageurl: 'https://a4.vimage1.com/upload/merchandise/pdcvis/2017/11/03/98/f34a6c251abf45e5ba60a645f13c7757-5.jpg',
        newprice: "79.00",
        oldprice: "80.00",
      }, {
        goodId: 5,
        name: '日本资生堂洗颜',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg',
        newprice: "30.00",
        oldprice: "80.00",
      }
      , {
        goodId: 6,
        name: '玉兰油 | 水感透白光塑钻...',
        url: 'bill',
        imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/05/19/2/e5de903ab5ba4a6492f3574469fdfca9-5.jpg',
        newprice: "145.00",
        oldprice: "324.00",
      }
    ]

好了大家赶紧运行一下效果吧~~~

6. 福利专场

先看效果：
在这里插入图片描述
home.wxml

<!--福利专场 start-->
<view class="welfare-container"> 
  <view class="category-title">
    <text class="title">福利专场</text>
    <view class="line_name">
      <text>每天早10晚8准时上新</text>
    </view>
  </view>  
  <scroll-view scroll-y="true">
      <view class="welfares">
         <block wx:for-items="{{goodsWelfareItems}}" wx:key="name">
          <view class="welfares-good" catchtap="catchTapCategory" data-type="{{item.name}}" data-typeid="{{item.typeId}}">
            <view>
              <image src="{{item.imageurl}}" class="welfares-image" mode="widthFix"/> 
            </view>
            <view class="product-name">
              {{item.name}}
            </view>
            <view class="product-price-wrap">
              <p class="product-price-new">￥{{item.newprice}}</p>  
              <p class="product-price-old">￥{{item.oldprice}}</p> 
              <p class="discount">{{item.discount}}折</p>  
            </view>
            
          </view>
        </block> 
      </view>
  </scroll-view>  
</view> 
<!--福利专场 end-->

home.wxss

/**=========福利专场============**/
.welfares{
  display: flex;
  justify-content: left;
  flex-direction: row;
  flex-wrap: wrap;
  margin:10px 5px;
}
.welfares-good{
  height: 560rpx; 
  width: 47%;
  margin:0px auto;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  font-size: 24rpx;
}
.welfares-image{
  width: 100%;
  display: inline-block;
  border: 1px #eee solid; 
}
.welfares-good .product-name{
  color: #000;
  height: 28px;
  text-align:left;
   margin: 0px 5px; 
   margin-bottom: 5px; 
}
.product-price-wrap .product-price-new{
  color: #e80080;
  margin-left:5px;
  font-weight:900;
}
.product-price-wrap .product-price-old{
  color: #888;
  text-decoration: line-through;
  padding-left: 2px;
}
.product-price-wrap .discount{
  position: absolute;
  right: 5px;
  background-color: #000;
  color: #fff;
}

home.js

// 福利专场
    goodsWelfareItems: [
      {
        goodId: 0,
        name: '泊尔崖蜜蜜光面膜（5片盒装）',
        url: 'bill',
        imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/21/142/fb2960bf8e074d029c24315279289c19-5_218x274_70.jpg',
        newprice: "86",
        oldprice: "88",
      },
      {
        goodId: 1,
        name: '透无瑕矿物养护两用粉饼#03',
        url: 'bill',
        imageurl: 'https://a4.vimage1.com/upload/merchandise/pdcvis/2017/08/21/27/4b24e2a629644877866d3da755f6a36e-5_218x274_70.jpg',
        newprice: "147.00",
        oldprice: "150.00",
      },
      {
        goodId: 2,
        name: '川水水光面膜（5片盒装）',
        url: 'bill',
        imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/08/21/86/7891361fdab348a1bc91aeca31fc77b1-5_218x274_70.jpg',
        newprice: "86.00",
        oldprice: "88.00",
      },
      {
        goodId: 3,
        name: '蜜三色渐变咬唇膏3.2g 03蜜橙动心恋',
        url: 'bill',
        imageurl: 'http://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/21/176/c3b9453a4d7f46c6a8fe78705f77352b-5_218x274_70.jpg',
        newprice: "97.00",
        oldprice: "99.00",
      },
      {
        goodId: 4,
        name: '时焕颜亮采套装',
        url: 'bill',
        imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/08/21/93/69a6bc1c11eb4be184b7dffb43b8565b-5_218x274_70.jpg',
        newprice: "398.00",
        oldprice: "459.00",
      }, {
        goodId: 5,
        name: '雪域眼霜套装',
        url: 'bill',
        imageurl: 'https://a4.vimage1.com/upload/merchandise/pdcvis/2017/08/23/127/53409c86f74647af915bc379427b97c2-5_218x274_70.jpg',
        newprice: "238.00",
        oldprice: "358.00",
      }
      , {
        goodId: 6,
        name: '凝时鲜颜冰肌水套装',
        url: 'bill',
        imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/11/13/95/fb6c3d0c1f304b449dadb1f0100c1205-5_218x274_70.jpg',
        newprice: "248.00",
        oldprice: "348.00",
      }
      , {
        goodId: 7,
        name: '雪润皙白精选三件套',
        url: 'bill',
        imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg',
        newprice: "348.00",
        oldprice: "396.00",
      }
    ]

好了，以上代码可以将数据渲染出来，
接下来会对以上代码做一下调整 可以进行下拉刷新。

home.wxml

<view class="weui-loadmore" hidden="{{isHideLoadMore}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">努力加载中</view>
</view>

home.wxss

.weui-loading {
  margin: 0 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
  animation: weuiLoading 1s steps(12, end) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  background-size: 100%;
}
.weui-loadmore {
  width: 65%;
  margin: 1.5em auto;
  line-height: 1.6em;
  font-size: 12px;
  text-align: center;
}
.weui-loadmore__tips {
  display: inline-block;
  vertical-align: middle;
  color: #888;
}

home.js

  onReachBottom: function () {
    console.log('加载更多');
    setTimeout(() => {
      this.setData({
        isHideLoadMore: true,
        goodsWelfareItems: [
          {
            goodId: 0,
            name: '泊尔崖蜜蜜光面膜（5片盒装）',
            url: 'bill',
            imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/21/142/fb2960bf8e074d029c24315279289c19-5_218x274_70.jpg',
            newprice: "86",
            oldprice: "88",
            discount: "8.8",
          },
          {
            goodId: 1,
            name: '透无瑕矿物养护两用粉饼#03',
            url: 'bill',
            imageurl: 'https://a4.vimage1.com/upload/merchandise/pdcvis/2017/08/21/27/4b24e2a629644877866d3da755f6a36e-5_218x274_70.jpg',
            newprice: "147.00",
            oldprice: "150.00",
            discount: "8.8",
          },
          {
            goodId: 2,
            name: '川水水光面膜（5片盒装）',
            url: 'bill',
            imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/08/21/86/7891361fdab348a1bc91aeca31fc77b1-5_218x274_70.jpg',
            newprice: "86.00",
            oldprice: "88.00",
            discount: "8.8",
          },
          {
            goodId: 3,
            name: '蜜三色渐变咬唇膏3.2g 03蜜橙动心恋',
            url: 'bill',
            imageurl: 'http://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/21/176/c3b9453a4d7f46c6a8fe78705f77352b-5_218x274_70.jpg',
            newprice: "97.00",
            oldprice: "99.00",
            discount: "8.8",
          },
          {
            goodId: 4,
            name: '时焕颜亮采套装',
            url: 'bill',
            imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/08/21/93/69a6bc1c11eb4be184b7dffb43b8565b-5_218x274_70.jpg',
            newprice: "398.00",
            oldprice: "459.00",
            discount: "8.8",
          }, {
            goodId: 5,
            name: '雪域眼霜套装',
            url: 'bill',
            imageurl: 'https://a4.vimage1.com/upload/merchandise/pdcvis/2017/08/23/127/53409c86f74647af915bc379427b97c2-5_218x274_70.jpg',
            newprice: "238.00",
            oldprice: "358.00",
            discount: "8.8",
          }
          , {
            goodId: 6,
            name: '凝时鲜颜冰肌水套装',
            url: 'bill',
            imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/11/13/95/fb6c3d0c1f304b449dadb1f0100c1205-5_218x274_70.jpg',
            newprice: "248.00",
            oldprice: "348.00",
            discount: "8.8",
          }
          , {
            goodId: 7,
            name: '雪润皙白精选三件套',
            url: 'bill',
            imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg',
            newprice: "348.00",
            oldprice: "396.00",
            discount: "8.8",
          }
          , {
            goodId: 8,
            name: '雪润皙白精选三件套',
            url: 'bill',
            imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg',
            newprice: "348.00",
            oldprice: "396.00",
            discount: "8.8",
          }
          , {
            goodId: 9,
            name: '雪润皙白精选三件套',
            url: 'bill',
            imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg',
            newprice: "348.00",
            oldprice: "396.00",
            discount: "8.8",
          }
          , {
            goodId: 10,
            name: '雪润皙白精选三件套',
            url: 'bill',
            imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg',
            newprice: "348.00",
            oldprice: "396.00",
            discount: "8.8",
          }
          , {
            goodId: 11,
            name: '雪润皙白精选三件套',
            url: 'bill',
            imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg',
            newprice: "348.00",
            oldprice: "396.00",
            discount: "8.8",
          }
          , {
            goodId: 12,
            name: '雪润皙白精选三件套',
            url: 'bill',
            imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg',
            newprice: "348.00",
            oldprice: "396.00",
            discount: "8.8",
          }
          , {
            goodId: 13,
            name: '雪润皙白精选三件套',
            url: 'bill',
            imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg',
            newprice: "348.00",
            oldprice: "396.00",
            discount: "8.8",
          }
          , {
            goodId: 14,
            name: '雪润皙白精选三件套',
            url: 'bill',
            imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg',
            newprice: "348.00",
            oldprice: "396.00",
            discount: "8.8",
          }
          , {
            goodId: 15,
            name: '雪润皙白精选三件套',
            url: 'bill',
            imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/30/184/a5000156098940b5a05a0e696535ac20-5_218x274_70.jpg',
            newprice: "348.00",
            oldprice: "396.00",
            discount: "8.8",
          }

        ],
      })
    }, 500)
  }

这样，首页的功能基本就已经写完了。

猜你喜欢

转载自blog.csdn.net/gaopursuit/article/details/88989057
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022