本篇文章是对外卖App弹窗部分知识点的总结。

知识点一:如何从接口取出不同的图片。

  

  答:

    1、header.vue:

    

    代码:

      <ul v-if="seller.supports" class="supports">
<li class="support-item" v-for="(item,index) in seller.supports">
<span class="icon" :class="classMap[seller.supports[index].type]"></span> <!---------------point1-2>
<span class="text">{{seller.supports[index].description}}</span>
</li>
</ul>
<script>
  export default{
        ....... /*-----------------其他的先省略*/
        created() {
            this.classMap = ['decrease','discount','special','invoice','guarantee']; <!---------------point1-1>
        }
     ....... /*-----------------其他的先省略*/
    }
</script>

   json数据格式:

{
"seller": {
"name": "粥品香坊(回龙观)",
"description": "蜂鸟专送",
"deliveryTime": 38,
"score": 4.2,
"serviceScore": 4.1,
"foodScore": 4.3,
"rankRate": 69.2,
"minPrice": 20,
"deliveryPrice": 4,
"ratingCount": 24,
"sellCount": 90,
"bulletin": "粥品香坊其烹饪粥料的秘方源于中国千年古法,在融和现代制作工艺,由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐,发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。",
"supports": [
{
"type": 0,
"description": "在线支付满28减5"
},
{
"type": 1,
"description": "VC无限橙果汁全场8折"
},
{
"type": 2,
"description": "单人精彩套餐"
},
{
"type": 3,
"description": "该商家支持发票,请下单写好发票抬头"
} ....................................(其他省略)

  css:

  tip 1: 方法是,在li循环里面更改相应的class名字。

  tip 2: 在script里面设置一个classMap,里面的class名字分别对应着data.json里面的图片。排序相同。如:point1-1

      tip 3: 给span标签绑定class   :class.来取出每个图片的图片的type。即,给每个span绑定循环时添加上的class名字。如:point1-2

  tip 4:在css里面,给每个class名字设置相应的图片。

  知识点二:如何让背景模糊。

filter:blur(10px);  

  知识点三:让弹框显示隐藏。

  html:

代码:

<transition name="fade">                                     <!----------------------point2-4>
<div v-show="detailShow" class="detail"> <!----------------------这里的v-show有用>
<div class="detail-wrapper clearfix">
<div class="detail-main">
<h1 class="name">{{seller.name}}</h1>
<div class="star-wrapper">
<star :size="48" :score = "seller.score"></star>
</div>
<div class="title">
<div class="line"></div>
<div class="text">优惠信息</div>
<div class="line"></div>
</div>
<ul v-if="seller.supports" class="supports">
<li class="support-item" v-for="(item,index) in seller.supports">
<span class="icon" :class="classMap[seller.supports[index].type]"></span>
<span class="text">{{seller.supports[index].description}}</span>
</li>
</ul>
<div class="title">
<div class="line"></div>
<div class="text">商家公告</div>
<div class="line"></div>
</div>
<div class="bulletin">
<p class="content">{{seller.bulletin}}</p>
</div>
</div>
</div>
<div class="detail-close" @click="hideDetail"> <!----------------------这里的是给点击事件click加一个要执行的函数>
<i class="icon-close">*</i>
</div>
</div>
</transition>

  <script>:

  

代码:

data(){
return {
detailShow:false <!--------------------point-2-1
};
},
methods:{
showDetail(){
this.detailShow = true;
},
hideDetail(){
this.detailShow = false; <!--------------------point-2-2
}
},

  css:如果觉得显示隐藏太过生硬,要加渐变显示隐藏,则还需要如下css:

.detail{
position:fixed;
top:;
left:;
z-index:;
width:100%;
height:100%;
overflow:auto;
backdrop-filter:blur(10px);
opacity:;
background:rgba(7,17,27,0.8); /* //渐变结束后的最终效果 */ point-2-3
&.fade-enter-active, &.fade-leave-active{/* //渐变的进入和退出都历时0.5s */
transition:all 0.5s;
}
&.fade-enter, &.fade-leave-to{/* //定义进入前和退出后样式,即透明无色背景。 */
opacity:;
background:rgba(7,17,27,0);
}
}

  step1:先给要显示隐藏的标签一个v-show="detailShow"。然后,通过控制点击事件,来改变detailShow的true或者false值,来回切换。

  step2:在data里面先给detailshow一个默认值。默认不显示,就是false。如point-2-1

   step3:通过绑定click事件来改变detailShow的true或者false值。如point-2-2

   step4:实现渐变显示隐藏需两个步骤:

    point2-4 和上图的point2-3

    point2-4是把要隐藏的div用 transition 标签包起来。point2-3是设置渐变前,时,后的效果。

vue2.0:(八)、外卖App弹窗部分知识点总结的更多相关文章

  1. 项目vue2.0仿外卖APP(六)

    goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...

  2. 项目vue2.0仿外卖APP(五)

    header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...

  3. 项目vue2.0仿外卖APP(四)

    组件拆分 先把项目搭建时生成的代码给清了吧 现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯, ...

  4. 项目vue2.0仿外卖APP(一)

    最近用vue.js做一个仿饿了么外卖APP的项目,现在也把流程啊什么的暂时先整理一下在这个博客上面. 当然,这个过程会有点长,不过确实能学到很多东西. 话不多说,马上开始吧. 1.项目介绍 选用当前最 ...

  5. 项目vue2.0仿外卖APP(二)

    vue-cli开启vue.js项目 github地址:https://github.com/vuejs/vue-cli Vue.js开发利器vue-cli,是vue的脚手架工具. 在工地上,脚手架是工 ...

  6. 项目vue2.0仿外卖APP(七)

    ratings评价列表页实现 在ratings.vue组件里开发 首先先引入seller数据: 书写模板结构: 由于评价页又有之前写过的star.vue组件,所以又要在ratings.vue组件引入: ...

  7. 项目vue2.0仿外卖APP(三)

    项目的结构如下:                   项目资源准备 准备项目的各种图片资源等等 注意:在webpack可以不用css sprite,直接用单张图片,因为它会帮忙打包. 还有SVG图片, ...

  8. vue2.0:(八-2)、外卖App弹窗部分sticky footer

    什么是sticky-footer ? 如果页面内容不够长的时候,页脚块粘贴在视窗底部,如果内容足够长时,页脚块会被内容向下推送.那具体要怎么做呢?下面以外卖App为例: 第一种方法:这个自己用过,是好 ...

  9. vue2.0:(九)、外卖App弹窗部分星星评分

    本篇是星星评分部分,先上代码: 1.header.vue: <template> <transition name="fade">            & ...

随机推荐

  1. JavaScript中的eval()函数详解

    和其他很多解释性语言一样,JavaScript同样可以解释运行由JavaScript源代码组成的字符串,并产生一个值.JavaScript通过全局函数eval()来完成这个工作     eval(“1 ...

  2. linux下Redis以及c++操作

    使用不同的语言,redis支持不同的编程语言,但是调用了不同的redis包,例如: java对应jedis: php对应phpredis: C++对应的则是hredis. 安装Redis 上篇博客已经 ...

  3. 关于pyspark

    http://spark.apache.org/ 官网,下载tar包 解压缩到本地: 设置环境变量,把%Spark解压缩路径%/bin放入到PATH变量中:(可以考虑设置一个SPARK_HOME) 在 ...

  4. C#工程引用dll如何配置

    C#工程引用需要注意的事项:  <ItemGroup Condition="&apos;$(Configuration)|$(Platform)&apos; == &a ...

  5. Tomcat的安装及使用

    下面是我搭建Tomcat的过程,记录一下 下载地址:http://tomcat.apache.org/  我下载的是8.5.30版本 安装 下载完成后解压到D盘 (配置变量的的教程网上大把随便搜) 1 ...

  6. 怎样用win7电脑做无线路由

    http://jingyan.baidu.com/article/574c5219e9abce6c8c9dc17b.html http://nokia.zol.com.cn/252/297_25106 ...

  7. linux svn 客户端基本使用命令

    1.从svn获取项目 svn co URL --username XX --password XX; 2.添加code file svn add codeFile; svn ci -m "c ...

  8. 2019年第十届蓝桥杯国赛总结(JavaA组)

    JavaA组国二,可以报销了~ JA死亡之组可不是盖的,rank12的排名还是拿不到国一啊(只有五个.. 出成绩的一刻波澜不惊,毕竟去年有国一了不慌哈哈哈 不过对我来说这个结果还算意料之外吧,毕竟大三 ...

  9. 求斐波那契数列第n位的几种实现方式及性能对比(c#语言)

    在每一种编程语言里,斐波那契数列的计算方式都是一个经典的话题.它可能有很多种计算方式,例如:递归.迭代.数学公式.哪种算法最容易理解,哪种算法是性能最好的呢? 这里给大家分享一下我对它的研究和总结:下 ...

  10. IT兄弟连 Java语法教程 运行Java程序

    编译好Java字节码文件后,接下来就应该运行Java程序了. 运行Java程序需要使用JDK中提供的java命令,因为已经把java命令所在的路径添加到了系统的Path环境变量中,因此现在可以直接使用 ...