vue2.0:(八)、外賣App彈窗部分知識點總結

本篇文章是對外賣App彈窗部分知識點的總結。css

知識點一:如何從接口取出不一樣的圖片。html

  

  答:vue

    一、header.vue:json

    

    代碼:app

      <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數據格式:ide

{
  "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名字。this

  tip 2: 在script裏面設置一個classMap,裏面的class名字分別對應着data.json裏面的圖片。排序相同。如:point1-1spa

      tip 3: 給span標籤綁定class   :class.來取出每一個圖片的圖片的type。即,給每一個span綁定循環時添加上的class名字。如:point1-2code

  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:0;
            left:0;
            z-index: 100;
            width:100%;
            height:100%;
            overflow:auto;
            backdrop-filter:blur(10px);
            opacity:1;
            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:0;
                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是設置漸變前,時,後的效果。

相關文章
相關標籤/搜索