.1.在 index.html 文件中引入 reset.css 文件，并进行理想视口的定义（宽度，初始缩放比，最大/小缩放比，是否允许缩放）：

2. 删掉helloword组件 新建header组件在App.vue文件中引入 header 组件并注册，然后才可以使用header组件。

ps:在 App.vue 文件中注册 header 组件时，变量名不能为 header ，因为和 html5 标签重复。

import header from "./components/header/header"

3.安装sass npm install -D sass-loader node-sass

4 goods，ratings，seller 组建的创建

App.vue 文件中：使用 router-link 组件来进行商品、评价及商家这三个页面的导航，通过传入 `to` 属性指定链接，最后通过<router-view>将路由匹配到的组件渲染在内容区。

<v-header></v-header>

<router-link to="./components/header/header.vue" class="tab-item" >商品</router-link>

<router-link to="./components/ratings/ratings.vue" class="tab-item"> 评论</router-link>

<router-link to="./components/selle/selle.vue" class="tab-item" >商家</router-link>

</div>

<router-view></router-view>

</div>

5.active 的设置

，当点击商品、评论或者商家时，在tab中添加了一个名为 "active"”的类

在路由中添加 linkActiveClass:"active",

在组件中设置active的样式要设置a标签,

a{ text-decoration :none;

display :block;

font-size :14px;}

.active{

color:red;

}

6.1 像素边框的设置设置一个伪类(绝对定位)进行缩放

.border-bottom{

position: relative;

border-top: none !important;

}

.border-bottom::after {

content: " ";

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 1px;

background-color: #dd2323;

-webkit-transform-origin: left bottom;

transform-origin: left bottom;

}

7.header部分获取后台数据

.安装第三方插件 vue-resource，在 main.js 中引用并且注册该插件。

安装方法：npm install vue-resource --save

// 在main.js'中引用
import Vueresource from 'vue-resource';
// 全局注册
Vue.use(Vueresource);

在app.vue中拿到数据

在template中

<v-header :seller="seller"></v-header>

在script中

import header from "./components/header/header"

const ERR_OK = 0;

export default {

components:{

"v-header":header

data() {

return {

seller:{

}

created() {

this.$http.get('/api/seller').then(response => {

// get body data

response = response.body;

console.log(response);

if (response.errno === ERR_OK) {

this.seller = response.data;

console.log(response.data);

}

});

}

8.：引用头像图片地址，是 :src 而不是 src的原因

A：selller.avatar 一开始是不存在的，因为 seller 是空对象，其数据是通过 ajax 请求异步获取数据然后填充得来的。所以如果直接用 src ，编译就会直接解析 src，此时的 seller 还是是空的，自然就找不到 selller.avatar，就会报错。

2）Q：为什么要用 v-if 判断存不存在 supports ？

A：因为这是由数据决定的，有可能该数组不存在。

3）Q：不加 v-if 会怎么样？
A：在这里的话，不加 v-if 也能正确显示信息。但是控制台会报错。这是因为在 App.vue 的 html 代码中，我们将 seller 对象传递给了 header 组件，而在下边 JavaScript 代码中， seller 对象一开始被设置为空对象，其数据是通过 ajax 请求异步获取数据然后填充得来的。所以此时 header 组件接收的只是一个空的 seller 对象，本来就是 undefined 。编译器此时解析的话，自然找不到 seller 对象的相关数据，自然就报错了。

如图所示，这一块的设置需要根据后端返回的数据，进行判断后动态的显示。因为有可能今天是"在线支付满28减5"排第一位，明天是"单人精彩套餐"排第一位，程序需要根据数据准确显示出第一位的内容。

问题：data.json 的 supports 数组只有type 和 description 属性，怎么才能正确取得图片呢？

9.省略号设置

1 /*要为文字限定显示范围，位置应该限定到箭头前面*/
2 padding 0 22px 0 12px
3 /*文字超过宽度省略的设置*/
4 white-space nowrap
5 overflow hidden
6 text-overflow ellipsis

10.弹框部分

背景文字虚化设置 backdrop-filter: blur(10px)，这个设置支持 ios 设备，可以在 ios 手机上查看效果。可以查看 backdrop-filter 的使用范围。

浮层高度大于手机时，应该有下拉功能。不管浮层中内容多少，关闭按钮都必须固定位于下方，这里将用到 css sticky fotter 布局来实现该功能。该布局一般会有 detail-wrapper 和 detail-close（关闭按钮）两个层，而真正内容写在 detail-main 中：

sticky fotter 布局

.main{

margin-top:64px;

padding-bottom:64px;

}

或者使用flex:1

10.显示隐藏设置（v-show）

弹出层是应当实现显示和隐藏功能，这里可以使用 vue 的条件渲染 v-show 来实现。设置一个 detailShow 变量，通过改变这个变量的值（true/false），来控制弹出层显示或隐藏。

如何实现：给vue实例中添加一个选项data()，这个 data() 是一个function（这是之前说过的组件复用问题），该方法会返回一个 object，object 里面的变量就是它所需要去跟踪依赖的一些变量。也就是说，vue在实例化时，会对 data 对象中的变量去遍历，然后添加 getter 和 setter 方法，这样，当变量变化时，DOM 会根据变量的变化而变化，所以这里用v-show控制detailShow。

使用 v-show 的好处：不需要额外写 DOM 代码，都是直接操作变量即可。

11.过度渐变

2）过渡渐变（transition）

弹出层弹出的时候，背景颜色应该由浅到深，弹出层隐藏的时候，背景颜色应该由深到浅。这种渐变的设置可以用 vue 的内置组件 transition 实现。以下是基本的 HTML 结构：

transition 有一个 name 属性，添加该属性后，会自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。在这里设置背景颜色后，再设置过渡的类名 .fade-enter，.fade-enter-active，.fade-leave-to，.fade-leave-active 的样式即可。

12.星级组件设置（star.vue）

星级评价这一块内容在之后多个页面会使用到，所以将其抽象成 star 组件。

在这里设置为总共五颗星，评分范围为 0-5，评分规则是向下取0.5倍数的值，比如4到4.4会变成4（显示四颗全星，一颗无星），4.5到4.9会变成4.5（显示四颗全星和一颗半星）。此处有一个思路，就是根据不同分数范围制作不同的图片，然后引用图片，如下图。

但是为了增加代码的可用性，最好不要这样做，我们可以通过分数来计算到底有多少颗全星和无星，以及是否有半星

新建一个star文件

12.小标题的设置

小标题的设置，从样式上看，应该是左右两边的线有一个自适应的能力，可根据屏幕大小延伸，标题居中，标题与线之间还有一部分空白。此处用到了一个经典布局，即 flex 布局。下面是 HTML代码，从代码中可以看到，这里用了三个 div 元素而不是 span 元素，这是因为用 span 的话，在一些 Android 浏览器上会产生一些间距问题，因此这里用 div 。

 <div class="title"><div class="line"></div><div class="text">优惠信息</div><div class="line"></div></div>

以下是部分 CSS 代码，从代码中可以看到我们只写了一句 display flex，并没有写其它兼容性代码。这是因为编译时，vue-loader 中有 postcss 工具，可以自动添加有兼容性代码样式。postcss 是根据 can i use 官网写的代码。

.titles{

display: flex;

color: aliceblue;

text-align: center;

margin-top: 30px;

font-size: 20px;

font-weight: 700;

width: 80%;

margin: 28px auto 24px auto;

.line{

flex: 1;

position: relative;

top: -6px;

border-bottom: 1px solid aliceblue

};

.text{

font-size: 16px;

font-weight: 700;

color: aliceblue;

padding: 0 12px

}

13.

外卖 webpp2---hesdar组件相关推荐

Category 特性在 iOS 组件化中的应用与管控
背景 iOS Category功能简介 Category 是 Objective-C 2.0之后添加的语言特性. Category 就是对装饰模式的一种具体实现.它的主要作用是在不改变原有类的前提下, ...
React Native在美团外卖客户端的实践
MRN简介 MRN(Meituan React Native) 是基于开源的React Native框架改造并完善而成的一套动态化方案,在开发体验上基本能与原生RN保持一致,同时从业务需求的角度满足从 ...
React Native在美团外卖客户端的实践，已有千人收藏
最下层是Android/iOS系统服务层,因为MRN是跨端的,所以需要引入这一层.相对单一平台来说,由于MRN的引入,整个App的架构不可避免地需要考虑Android和iOS平台本身的差异性. 倒数第 ...
积木Sketch插件进阶开发指南
前段时间,美团外卖技术团队积木Sketch插件"意外走红".为了帮助更多的设计师小哥哥.小姐姐落地设计规范,提升产研效率,积木Sketch团队开始着手打造一个平台化的产品.本文介绍 ...
美团-移动端UI一致性解决方案
点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群外卖UI一致性项目是外卖UI设计团队与研发团队共建的项目,目的是改善用户端体验的一致性,提升多技术方案间组件的通用性和复用率,降低 ...
移动端UI一致性解决方案
外卖UI一致性项目是外卖UI设计团队与研发团队共建的项目,目的是改善用户端体验的一致性,提升多技术方案间组件的通用性和复用率,降低整体视觉改版带来的研发成本.外卖技术团队通过在实践中不断总结经验,开发 ...
美团移动端UI一致性解决方案探索
外卖UI一致性项目是外卖UI设计团队与研发团队共建的项目,目的是改善用户端体验的一致性,提升多技术方案间组件的通用性和复用率,降低整体视觉改版带来的研发成本.外卖技术团队通过在实践中不断总结经验,开发 ...
百度外卖 php,百度外卖移动组件架构与优化
百度外卖移动组件架构与优化写在前面: 本文内容是饿了么技术沙龙20期:移动技术专场<百度外卖移动组件架构与优化>张朝@百度外卖Android高级开发工程师演讲分享,本文Github链接 ...
【uniapp前端组件】仿美团外卖商品列表
仿美团外卖商品列表简易实现美团外卖商品列表,没什么技术难点,简单来说就是两个scroll-view协作,并且两个scroll-view不会滑动冲突. 实际效果仿美团外卖商品列表实际项目效果简介 ...
vue外卖十九：商家详情-底部购物车组件，购物车相关vuex状态设计、相关计算、清空购物车+滚动购物车
一.购物车基础 1)购物车状态设计cartFoods+mutation store/state.js // 所有要管理的状态数据:从页面需求分析出来,最好和api/index.js里的命名相同 exp ...

外卖 webpp2---hesdar组件

10.弹框部分

外卖 webpp2---hesdar组件相关推荐

最新文章

热门文章