頭部組件header.vue
五.Header.vue
-
彈層製做 vue動畫效果配置和彈層css sticky footer原理css
使用css sticky footer技術html
vue的v-for遍歷vue
vue的v-show和事件監聽segmentfault
vue動畫處理數組
-
header和公告欄製做瀏覽器
text-overflow:ellipsis的使用安全
font-size:0和vertical-align的使用app
mixin的運用 stylus相關和1像素邊框問題dom
背景圖片的虛化ide
flex佈局的使用
html部分
<template>
<div class="header">
<div class="content-wrapper">
<div class="avatar">
<img width="64" height="64" :src="seller.avatar">
</div>
<div class="content">
<div class="title">
<span class="brand"></span>
<span class="name">{{seller.name}}</span>
</div>
<div class="description">
{{seller.description}} / {{seller.deliveryTime}}分鐘送達
</div>
<div v-if="seller.supports" class="supports">
<!--只列出第一個support的內容-->
<span class="icon" :class="classMap[seller.supports[0].type]"></span>
<span class="text">{{seller.supports[0].description}}</span>
</div>
</div>
<div v-if="seller.supports" class="support-count" @click="showDetail">
<span class="count">{{seller.supports.length}}個</span>
<i class="icon-keyboard_arrow_right"></i>
</div>
</div>
<!--綁定showDetail事件-->
<div class="bulletin-wrapper" @click="showDetail">
<span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
<i class="icon-keyboard_arrow_right"></i>
</div>
<div class="background">
<img width="100%" height="100%" :src="seller.avatar">
</div>
<!--這裏使用了vue的動畫配置transition-->
<transition name="fade">
<div v-show="detailShow" class="detail">
<!--使用clearfix這個class來作css sticky footer-->
<div class="detail-wrapper clearfix">
<div class="detail-main">
<h1 class="name">{{seller.name}}</h1>
<div class="star-wrapper">
<!--這裏傳值給star組件-->
<star :size="48" :score="seller.score"></star>
</div>
<div class="title">
<div class="line"></div>
<div class="text">優惠信息</div>
<div class="line"></div>
</div>
<!--列出所有的support的內容-->
<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>
<!--綁定hideDetail事件-->
<div class="detail-close" @click="hideDetail">
<i class="icon-close"></i>
</div>
</div>
</transition>
</div>
</template>
js部分
星星組件參看:star.vue
<script>
import star from '../star/star.vue'; //導入星星組件
export default{
props: {
seller: { //將seller對象傳給組件
type: Object //這是vue的prop驗證屬性的寫法
}
},
data(){
return { //設置一個變量來控制顯示隱藏,vue直接會關聯到dom
detailShow: false
}
},
methods: {
showDetail(){
this.detailShow = true; //變量控制顯示公告詳情頁
}
},
created(){ //主要看這個classMap
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
},
components: {
'star': star
}
}
</script>
這裏須要注意的是:
使用一個classMap的映射方法來實現數字和類型之間的轉換
元數據supports是一個數組:
"supports": [
{
"type": 0,
"description": "在線支付滿28減5"
},
{
"type": 1,
"description": "VC無限橙果汁全場8折"
},
{
"type": 2,
"description": "單人精彩套餐"
},
{
"type": 3,
"description": "該商家支持發票,請下單寫好發票擡頭"
},
{
"type": 4,
"description": "已加入「外賣保」計劃,食品安全保障"
}
],
而後頁面須要根據不一樣的type來顯示不一樣的description,而且還要顯示不一樣的圖片
這就須要作一個關聯,將數組的值跟圖片關聯起來,而圖片的關聯是根據class來識別的,從而能夠實現數組的方式來調用對應的圖片.
<!--這是css裏面的-->
&.decrease
bg-image('decrease_1')
&.discount
bg-image('discount_1')
&.guarantee
bg-image('guarantee_1')
&.invoice
bg-image('invoice_1')
&.special
bg-image('special_1')
經過作一個對應關係
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']; //classMap數組的順序就對應supports數組的順序 //例如supports數組的第一個元素就對應decrease,而decrease又對應到.decrease的class classMap[seller.supports[0].type] //seller.supports[0].type就是0,而後classMap的第0個就是decrease,就可以指向到.decrease
這裏只須要用數組第一個元素便可
<div v-if="seller.supports" class="supports">
<span class="icon" :class="classMap[seller.supports[0].type]"></span>
<span class="text">{{seller.supports[0].description}}</span>
</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>
css部分
考慮到行內元素的不一致的對齊,須要大量使用line-height和vertical-align
font-size爲0,爲了去掉行內元素的間隙,這個能夠繼承,因此須要在子孫元素裏面再單獨設置font-size
對於text-overflow:ellipsis的長度取決於塊的長度
<span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>用合併代替換行來取消多餘字符,這種狀況也是能夠避免設置font-size爲0使用vertical-align :top以後還須要margin-top :7px,在沒辦法徹底對齊的狀況下使用
clearfix的css sticky footer部分須要參看:vue動畫效果配置和彈層css sticky footer原理
<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin.styl" //導入minxin
.header
position relative //這裏的相對定位是爲了讓下面的絕對定位作參考
overflow: hidden
color: #ffffff
background: rgba(7, 17, 27, 0.5)
.content-wrapper
padding: 24px 12px 18px 24px
font-size: 0 //這裏爲0是爲了去掉行內元素的間隙,這個能夠繼承,因此須要在子孫元素裏面再單獨設置font-size
position: relative //這裏的相對定位是爲了讓下面的絕對定位作參考
.avatar
display: inline-block
vertical-align: top
img
border-radius: 2px
.content
display: inline-block
margin-left: 16px
.title
margin: 2px 0 8px 0
.brand
display: inline-block
vertical-align: top
width: 30px
height: 18px
bg-image('brand') //這裏使用了一個圖片的mixin
background-size: 30px 18px
background-repeat: no-repeat
.name
margin-left: 6px
font-size: 16px
line-height: 18px
font-weight: bold
.description
margin-bottom: 10px
line-height: 12px
font-size: 12px
.supports
.icon
display: inline-block
vertical-align: top
width: 12px
height: 12px
margin-right: 4px
background-size: 12px 12px
background-repeat: no-repeat
&.decrease //這裏就是配合classMap進行圖片切換的
bg-image('decrease_1') //這是圖片的mixin,在mixin.styl裏面能夠看到
&.discount
bg-image('discount_1')
&.guarantee
bg-image('guarantee_1')
&.invoice
bg-image('invoice_1')
&.special
bg-image('special_1')
.text
line-height: 12px
font-size: 10px
.support-count
position: absolute
right: 12px
bottom: 14px
padding: 0 8px
height: 24px
line-height: 24px
border-radius: 14px
background: rgba(0, 0, 0, 0.2)
text-align: center
.count
vertical-align: top //考慮到行內元素的不一致的對齊,須要大量使用line-height和vertical-align
font-size: 10px
.icon-keyboard_arrow_right
margin-left: 2px
line-height: 24px
font-size: 10px
.bulletin-wrapper
position: relative //作相對定位,給icon-keyboard_arrow_right絕對定位作參照
height: 28px
line-height: 28px
padding: 0 22px 0 12px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis //這裏是字數太長的省略處理
background: rgba(7, 17, 27, 0.2)
.bulletin-title
display: inline-block
vertical-align: top
margin-top: 8px
width: 22px
height: 12px
bg-image('bulletin')
background-size: 22px
.bulletin-text
vertical-align: top
margin: 0 4px
font-size: 10px
font-weight: 200
.icon-keyboard_arrow_right
position: absolute
font-size: 10px
right: 12px
top: 8px
.background //這裏使用的是圖片作背景,因此須要作下面這些處理
position absolute //背景圖片須要絕對定位
top: 0 //設置位置
left: 0
width: 100% //設置大小
height: 100%
z-index: -1 //將背景圖片設置裏層,避免突出位置看到外露部分
filter: blur(10px) //背景圖片虛化
.detail
position: fixed //彈出層,因此用fixed
z-index: 100 //須要設置z-index保持必定的高度
top: 0
left: 0
width: 100%
height: 100%
overflow: auto //加overflow hidden來把多餘的背景陰影去掉
opacity: 1 //這是動畫設置
background: rgba(7, 17, 27, 0.8)
&.fade-enter-active, &.fade-leave-active //vue的動畫須要參考vue動畫配置理解
transition: all 0.5s
&.fade-enter, &.fade-leave-active
opacity: 0
background: rgba(7, 17, 27, 0)
.detail-wrapper
width: 100%
min-height: 100% //由於不知道有多少內容,因此用min-height
.detail-main
margin-top: 64px
padding-bottom: 64px //預留下面close按鈕的位置,因此下內邊距頂起
.name
line-height: 16px
text-align: center
font-size: 16px
font-weight: 700
.star-wrapper
margin-top: 18px
padding: 2px 0
text-align center
.title
display: flex //使用flex佈局等分詳情頁優惠界面
width: 80%
margin: 28px auto 24px auto
.line
flex: 1 //使用1的比例的flex塊
position: relative //這裏使用相對佈局加top對齊,能夠也能夠margin-bottom
top: -6px
border-bottom: 1px solid rgba(255, 255, 255, 0.2) //使用border生成線,由於使用的是div
.text
padding: 0 12px
font-size: 14px
font-weight 700
.supports
width: 80%
margin: 0 auto
.support-item
padding: 0 12px
margin-bottom: 12px
font-size: 0
&:last-child
margin-bottom: 0
.icon
display: inline-block
width: 16px
height: 16px
vertical-align: top
margin-right: 6px
background-size: 16px 16px
background-repeat: no-repeat
//經過對應不一樣的class來對應不一樣的圖片
&.decrease
bg-image('decrease_2')
&.discount
bg-image('discount_2')
&.guarantee
bg-image('guarantee_2')
&.invoice
bg-image('invoice_2')
&.special
bg-image('special_2')
.text
line-height: 16px
font-size: 12px
.bulletin
width: 80%
margin: 0 auto
.content
padding: 0 12px
line-height: 24px
font-size: 12px
.detail-close
position: relative
width: 32px
height: 32px
margin: -64px auto 0 auto //使用以前預留了的位置
clear: both
font-size: 32px
</style>
備註:
text-overflow :ellipsis顯示在底部.不是中間,是瀏覽器的顯示處理不一樣關於文字內容溢出用點點點-省略號表示
相關文章
- 1. 小程序自定義頭部組件
- 2. 第六，vue組件及應用-建立頭部組件
- 3. 第六，vue組件及應用-創建頭部組件
- 4. vue組件（將頁面公用的頭部組件化）
- 5. 11、組件入門及寫個首頁頭部組件
- 6. uni app 自定義 頭部組件（2） 局部 右側按鈕
- 7. IMX頭部詳細解析之一 頭部組成
- 8. IPv4頭部和IPv6頭部
- 9. ESP32 固件頭部分析
- 10. vue之CSS頭部組件中樣式的設置
- 更多相關文章...
- • ionic 頭部與底部 - ionic 教程
- • ionic 頭部和底部 - ionic 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
歡迎關注本站公眾號,獲取更多信息
相關文章