关键词：
goods组件显示的区域是固定的，也没有滚动条，所以是采用绝对布局的，左右分为menu栏和foods栏，左边固定布局，右边自适应布局，采用flex布局。
写CSS样式的时候，尽量用class，少用tag，因为class的查找效率优于tag，尤其是嵌套层级比较多的时候。左边的menu栏有些是一行有些是多行，要做到不管单行还是多行都是垂直是居中，可以用display：table，table布局是实现垂直居中的有效布局。menu-item设置display:table,text设置display:table-cell,vertical-align:center
<ul>
<li v-for="(item, index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index, $event)">
<span class="text border-1px">
<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>
{{item.name}}
</span>
</li>
</ul>
右边的food栏用两个<ul v-for="XXX">来实现遍历
每个食品的显示分为左边icon和右边的content，用flex布局来实现，左边固定宽度，右边自适应布局。goods组件的右边的food栏，除了最后一个食品的下面都有1px的border，要去掉最后一个食品的border，课程中是在mixin中写了一个border-none()的样式，把after的伪类设置为display：none。也可以用另一种方式来实现，由于border是通过after伪类来实现的，那么如果给最后一个食品的after伪类设置为border:none应该就可以去掉border了。
border-none()
&:after
display: none
food-item设置了18px的margin，但是由于相邻两个food-item的上下margin是会重合的，所以要再设置一个padding-bottom，但是最后一个food-item就会有一个18px的margin-bottom和18px的padding-bottom，所以最后一个fodd-tiem的margin-bottom要设置为0。
.food-item
display: flex
margin: 18px
padding-bottom: 18px
border-1px(rgba(7, 17, 27, 0.1))
用better scroll库实现滚动效果， new BScroll（）有两个参数，第一个是dom对象，第二个是可选对象。给dom对象增加ref属性，<div class="foods-wrapper" ref="menuWrapper">，在js中用this.$refs获取dom对象，this.meunScroll = new BScroll(this.$refs.menuWrapper, {});
DOM对象是异步更新的，所以要把滚动的初始化函数放在￥nextTick()函数中，$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。
要实现左边的menu和右边的food的连动，要计算出右边每一个类的food的高度区间，用getElementsByClassNames获取每一个类food的DOM对象，用函数clientHeight得到的DOM对象的高度。
_calculateHeight() {
let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
let height = 0;
this.listHeight.push(height);
for (let i = 0; i < foodList.length; i++) {
let item = foodList[i];
height += item.clientHeight;
this.listHeight.push(height);
}
}
然后拿到实时的y值与高度区间值对比，在BScroll函数中传入参数probeType:3就可以获取实时滚动的位置，用this.foodsscroll.on()监听滚动事件
this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
click: true,
probeType: 3
});
this.foodsScroll.on('scroll', (pos) => {
this.scrollY = Math.abs(Math.round(pos.y));
});
},
当food栏滚动时，获取当前的坐标，与区间对比，得到对应的index，更新左边的menu栏，对应index的menu-item会获得一个current的class。用better Scroll之后，点击时会有两个事件，一个是浏览器原生事件，一个是better Scroll派发的时间，其中浏览器原生事件都没有_constructed属性,better scroll派发的事件有_constructed属性。
<li v-for="(item, index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index, $event)">
computed: {
currentIndex() {
for (let i = 0; i < this.listHeight.length; i++) {
let height1 = this.listHeight[i];
let height2 = this.listHeight[i + 1];
if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
return i;
}
}
return 0;
}
}
点击左边的menu列表时，根据index，通过scrollToElement把右边的列表滚动到对应的位置
selectMenu(index, event) {
if (!event._constructed) {
return;
}
let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
let el = foodList[index];
this.foodsScroll.scrollToElement(el, 300);
},
购物车组件开发
购物车组件fixed布局，由于购物车是一直显示的所以要之一z-index的设置。购物车也可以分为左右两部分用flex布局，左边固定宽度，右边自适应。左边包括logo，price和desc，用display:inline-block
.shopcart
position: fixed
left: 0
bottom: 0
z-index: 50
width: 100%
height: 48px
background: #000
购物车的logo-wrapper是一个超出购物车一部分的圆形，用relative布局和负的top值实现超出购物车，圆形可通过相同的width和height和border-radius:50%实现。其中用到了box-sizing: border-box，这是指用IE下的盒子模型，这种方法在移动端布局比较常用，可以省去计算width。price的右边有border，设置line-height:24px和maring-top: 12px，这样子能使border的高度是24px. 在App组件中，seller数据要在router-view中传递过来<router-view :seller="seller"></router-view>。
购物车的状态是由选择的商品决定的，购物车要根据goods组件选择的商品来改变样式，selectFoods是一个数组元素，保存了选择的商品种类和数量，在props中如果数据时数组或者对象，default是一个函数。
selectFoods: {
type: Array,
default() {
return [
{
price: 10,
count: 10
}
];
}
v-show可以等于一个表达式，当表达式是true的时候，就显示DOM元素<div class="num" v-show="totalCount>0">{{totalCount}}</div>
cartcontrol组件
cartcontrol从父组件接收数据food，<cartcontrol @add="addFood" :food="food"></cartcontrol>
为了美观，按钮很小，为了方便增加有效的点击区域便于用户点击操作，可以给cart-decrase，cart-increase增加padding。
要为food添加一个count属性时，不能直接添加，要用Vue的set方法
addCart(event) {
if (!event._constructed) {
return;
}
if (!this.food.count) {
Vue.set(this.food, 'count', 1);
} else {
this.food.count++;
}
this.$emit('add', event.target);
},
个减号出现时，添加一个滚动出现的动画，这个动画包含了平移和滚动，所以要有两个层，外层实现平移，内层实现滚动。
<transition name="move">
<div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart">
<span class="inner icon-remove_circle_outline"></span>
</div>
</transition>
.cart-decrease
display: inline-block
padding: 6px
opacity: 1
transform: translate3d(0, 0, 0)
.inner
display: inline-block
line-height: 24px
font-size: 24px
color: rgb(0, 160, 220)
transition: all 0.4s linear
transform: rotate(0)
&.move-enter-active, &.move-leave-active
transition: all 0.4s linear
&.move-enter, &.move-leave-to
opacity: 0
transform: translate3d(24px, 0, 0)
.inner
transform: rotate(180deg)
计算属性selectFoods通过两个forEach来遍历goods，把count大于0的food push到数组中，返回这个数组，这样子就拿到了和shopcart状态显示有关的的selectFoods数组
小球落入购物车的动画，用一个balls数组来控制小球的显示，一共有5个小球。小球是相对于视口做动画的，所以用fixed布局，小球在屏幕上方，z-index要大于shopcart的z-index。有水平方向和竖直方向的动画，所以也需要内外两层来实现两个方向上的动画
.ball-container
.ball
position: fixed
left: 32px
bottom: 22px
z-index: 200
transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
.inner
width: 16px
height: 16px
border-radius: 50%
background: rgb(0, 160, 220)
transition: all 0.4s linear
这个动画中起始点的位置需要动态计算，要获取加按钮的相对于屏幕的位置。这个动画不是通过设置enter和leave实现的。点击加号时，向父组件goods发送一个add事件，把这个dom元素传递给父组件this.$emit('add', event.target);在父组件goods中对这个事件做处理，获取加号DOM对象，<cartcontrol @add="addFood" :food="food"></cartcontrol>
addFood(target) {
this._drop(target);
},
_drop(target) {
// 体验优化，异步执行下落动画
this.$nextTick(() => {
this.$refs.shopcart.drop(target);
});
在shopcart组件中获取加号的DOM。在drop函数中遍历balls数组，取出第一个不可见的小球，设为可见，放入dropBalls数组中。用钩子函数before-enter，enter和after-enter实现动画效果。
<transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
在beforeDrop函数中用getBoundingClientRect()函数获取加号DOM元素相对于视口的位置（这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离），计算出小球在x方向和y方向需要移动的距离，设置内外两层小球的动画
beforeDrop(el) {
let count = this.balls.length;
while (count--) {
let ball = this.balls[count];
if (ball.show) {
let rect = ball.el.getBoundingClientRect();
let x = rect.left - 32;
let y = -(window.innerHeight - rect.top - 22);
ball.el.style.display = '';
el.style.webkitTransform = `translate3d(0, ${y}px, 0)`;
el.style.transform = `translate3d(0, ${y}px, 0)`;
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`;
inner.style.transform = `translate3d(${x}px, 0, 0)`;
}
}
}
在dropping（el，done）函数中用let rf = el.offsetHeight;手动触发重绘
dropping(el, done) {
/* eslint-disable no-unused-vars */
let rf = el.offsetHeight;
this.$nextTick(() => {
el.style.webkitTransform = 'translate3d(0, 0, 0)';
el.style.transform = 'translate3d(0, 0, 0)';
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = 'translate3d(0, 0, 0)';
inner.style.transform = 'translate3d(0, 0, 0)';
el.addEventListener('transitionend', done);
});
},
在afterDrop函数中重新把ball设置为不可见
afterDrop(el) {
console.log(el);
let ball = this.dropBalls.shift();
if (ball) {
ball.show = false;
el.style.display = 'none';
}
}
购物车详情页
购物车详情页由两部分组成list-header和list-content。shopcart-list用局对布局，注意高度的设置，高度的设置是在动画中设置为-100%，实现购物车详情页从底部向上显示出来的一个效果。
.shopcart-list
position: absolute;
left: 0
top: 0
z-index: -1
width: 100%
transform: translate3d(0, -100%, 0)
&.fold-enter-active, &.fold-leave-active
transition: all 0.5s
&.fold-enter, &.fold-leave-to
transform: translate3d(0, 0, 0)
标题栏的左右两边的title和empty采用float布局
food中的price和cartcontrol-wrapper都使用绝对定位
用计算属性listShow控制购物车详情页是否可见。
listShow() {
if (!this.totalCount) {
this.fold = true;
return false;
}
let show = !this.fold;
if (show) {
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.listContent, {
click: true
});
} else {
this.scroll.refresh();
}
});
}
return show;
}
给list-content添加滚动的效果，这部分内容也写在计算属性listShow中，如果scroll已经存在，则用refresh()进行刷新.
最后给empty按钮增加清空事件<span class="empty" @click="empty">清空</span>
empty()对selectFoods进行遍历，把count都置为0.
empty() {
this.selectFoods.forEach((food) => {
food.count = 0;
});
}
背景list-mask和shopcart同级，也由listShow控制显示，采用fixed布局，z-index要比shopcart的z-index小。
.list-mask
position: fixed
top: 0
left: 0
width: 100%
height: 100%
z-index: 40
backdrop-filter: blur(10px)
background: rgba(7, 17, 27, 0.6)
&.fade-enter-active, &.fade-leave-active
transition: all 0.5s
&.fade-enter, &.fade-leave-to
background: rgba(7, 17, 27, 0)
pay按钮增加点击结算事件，这个点击要阻止冒泡（stop）和默认事件（prevent），不然除了结算窗口还会弹出购物车详情页。
<div class="content-right" @click.stop.prevent="pay">
vue饿了么项目-goods商品列表页开发
1.flex属性是flex-grow、flex-shrink和flex-basis属性的简写属性。flex-grow一个数字，规定项目将相对于其他灵活的项目进行扩展的量。flex-shrink一个数字，规定项目将相对于其他灵活的项目进行收缩的量。flex-basis项目的长度。合法值："au... 查看详情
微信小程序云开发—“增删改查综合案例(跳转页面)”(代码片段)
实际需求：1.能查看商品列表2.点击"商品列表"中的商品跳转到“商品详情页”大体步骤：1.商品列表页对应:/Pages/demo1/demo12.商品详情页对应:/Pages/demo1-1/demo1-1一、商品列表页(Pages/demo1/demo1)demo1.wxml<viewwx:for="lis... 查看详情
电商小程序实战教程-商品详情页开发(代码片段)
我们上一篇开发了电商小程序的首页，本篇我们介绍一下详情页的开发。如果想开发详情页，首先要搞明白一个概念，在详情页展示数据的时候需要如何进行页面传参。参数变量在微搭中变量一共是分三种，普通变量、模型变量... 查看详情
商城微信小程序（二）——完成分类页面及商品列表页
...成index.wxss主要是布局文件index.less的编写，注意less语法。商品列表页功能：支持上拉加载更多，下拉刷新等1，父组件（商品列表页）和子组件(Tabs组件)相互传递数据问题2,上拉加载更多、下拉刷新实现的逻辑 查看详情
ecshop模板开发（十三）：商品详情页商品描述
1、html<h2>商品描述</h2> 查看详情
jq+ajax请求本地数据加载商品列表页并跳转详情页
效果：json文件："books":["id":1,"imgUrl":"images/ly.jpg","price":"45.00","title":"论语","publish":"人民文学出版社","n 查看详情
mpvue采坑记（同一个页面或者组件反复进入动态数据被覆盖）(代码片段)
...路由复用，使用不同页面的情况。例如：进入：首页->商品详情页1(id=1)->(商品详情页的推荐商品列表进入)商品详情页2(id=2)->(商品详情页的推荐商品列表进入)商品详情页3(id=3)退回：商品详情 查看详情
京东商品列表采集
...ch.jd.com/Search输入关键词搜索，采集搜索后得到的多个商品列表数据。鼠标放到图片上，右键，选择【在新标签页中打开图片】可查看高清大图下文其他图片同理采集字段商品名称、商品描述、商品详情、价格、评论... 查看详情
分布式电商项目（04）--商品列表查询及分页(代码片段)
...后天管理系统工程搭建以及框架的整合测试，今天写一下商品列表的分页查询1需求分析前台使用easyui的分页工具，后台则使用mybatis分页插件pagehelper如上图所示，打开后台首页，点击查询商品，按下F12,可以看到easyui的分页界面... 查看详情
springboot集成webmagic爬取京东商品信息(代码片段)
SpringBoot集成WebMagic爬取京东商品信息爬取分析商品列表访问页面并搜索笔记本电脑，得到商品列表。商品详情页执行流程graphLRA[解析商品列表页]---->B[获取商品详情页]B---->C(解析页面获取数据)搭建基础环境添加依赖<!--Sprin... 查看详情
ecshop模板开发：商品详情页用户购买记录
1、拷贝themes/default/library/bought_note_guide.lbi文件themes/default/library/bought_note.lbi文件这两个文件到自己创建的模板目录下。2、在goods.dwt文件中调用<h2>购买记录</h2>includefile="library/bought_note_guide.lbi" 查看详情
校园商铺-8商品模块-10商品列表展示之后端开发(代码片段)
...mportcom.csj2018.o2o.entity.Product;publicinterfaceProductDao/***8-10查询商品列表并分页，可输入的条件有：商品名（模糊）、商品状态，店铺ID，商品类别*@paramproductCondition*@parambeginIndex*@parampageSize*@return*/List<Product>queryProductList(@Param("p... 查看详情
商品详情页（food组件）(代码片段)
前言本节分为四大块：1.商品详情页food组件（布局样式、第三方插件库better-scroll的应用）2. split 组件3. ratingselect 组件4.评价列表 商品详情页food组件 1.CSS设置1<stylelang="stylus"rel="stylesheet/stylus">2@impor 查看详情
php商城源码-单个商品详情页单品商品购买源码
....采用开源框架方便二次开发4.开源API可以在后台编辑生成商品出售详情页，商品可选择到付和线上付款。详情页样式仿淘宝。功能清晰，可对接商户平台或第三方软件。商品被购买后后台有商品订单，选择处理发货系... 查看详情
django3商城项目从0到1设计与配置(代码片段)
文章目录设计网站首页商品列表页商品详细页购物车页面个人中心页面用户登录注册页面数据结构图搭建项目功能配置添加项目应用添加中间件配置数据库配置静态资源配置媒体资源django3商城项目从0到1【二】商城网址的规划设... 查看详情
ecshop模板开发：商品详情页超值大礼包优惠活动
1、html代码if$package_goods_list<h2>超值礼包</h2>foreachfrom=$package_goods_listitem=goods_list<h4>$goods_list.act_name</h4>foreachfrom=$goods_list.goods_listitem=package<p>$pac 查看详情
中继器-天猫商城商品列表
工具：Axure组件：中继器1.能够实现根据品牌、价格对商品进行筛选；2.能够实现根据人气、售量、价格升序、价格降序对品牌排序；3.实现分页中第1.2.3页显示；未实现：1.跳转到任一一页；2.跳转到第一页及最后一页； 查看详情
美多商城项目：商品数据库表设计准备商品数据首页广告商品列表页(代码片段)
一、商品数据库表设计1.1 SPU和SKU在电商中对于商品，有两个重要的概念：SPU和SKU1.SPU介绍SPU=StandardProductUnit（标准产品单位）SPU是商品信息聚合的最小单位，是一组可服用、易检索的标准化信息的集合，... 查看详情