html 价格列表组件,评价列表ratings组件
需要注意的是main.js里面需要取消vue-router的默認路由,src/main.js的router.replace('/goods');需要去掉
原因是在添加了其他頁面(原來路由只有一個頁面goods,現(xiàn)在多了頁面ratings)之后,在瀏覽器加載頁面的時候:
首先會先加載所有頁面
在各個頁面都在加載的過程中,會跳到默認路由
然后這些頁面被中斷了加載,導致了頁面內(nèi)部的一些靠dom渲染的代碼無法執(zhí)行,例如bs-scroll
所以會出現(xiàn)一些報錯,TypeError: Cannot read property 'children' of undefined
所以要做默認路由的時候,直接用url做,不用vue-router自己去跳轉(zhuǎn),直接寫第一個url的地址
主體框架
需要加一個ref,為了讓bscroll可以初始化dom
ratings內(nèi)容
html代碼
{{seller.score}}
綜合評分高于周邊商家{{seller.rankRate}}%服務態(tài)度
{{seller.serviceScore}}
商品評分
{{seller.foodScore}}
送達時間
{{seller.deliveryTime}}分鐘
三個一樣的模塊共用一套樣式代碼,分別代入不同的數(shù)據(jù)
這里的數(shù)據(jù)都是獲取seller的數(shù)據(jù),是父組件傳入的props
js代碼
import star from '../star/star';
export default {
props: {
seller: {
type: Object
}
},
components: {
star
}
};
css代碼
.ratings
position: absolute
top: 174px //留空一部分,給header使用
bottom: 0
left: 0
width: 100%
overflow: hidden
.overview
display: flex
padding: 18px 0
.overview-left
flex: 0 0 137px //flex布局,固定左邊,右邊自動適配
padding: 6px 0
width: 137px
border-right: 1px solid rgba(7, 17, 27, 0.1)
text-align: center
@media only screen and (max-width: 320px) //適配i5屏幕
flex: 0 0 120px //適配的flex數(shù)值可以從根據(jù)設計稿計算
width: 120px
.score
margin-bottom: 6px
line-height: 28px
font-size: 24px
color: rgb(255, 153, 0)
.title
margin-bottom: 8px
line-height: 12px
font-size: 12px
color: rgb(7, 17, 27)
.rank
line-height: 10px
font-size: 10px
color: rgb(147, 153, 159)
.overview-right
flex: 1 //flex布局,固定左邊,右邊自動適配
padding: 6px 0 6px 24px
@media only screen and (max-width: 320px) //適配i5屏幕
padding-left: 6px
.score-wrapper //三個一樣的模塊的共用樣式
margin-bottom: 8px
font-size: 0
.title
display: inline-block
line-height: 18px //針對模塊內(nèi)部的元素的對齊行,所以需要寫到內(nèi)部元素里面去
vertical-align: top
font-size: 12px
color: rgb(7, 17, 27)
.star
display: inline-block
margin: 0 12px
vertical-align: top
.score
display: inline-block
line-height: 18px
vertical-align: top
font-size: 12px
color: rgb(255, 153, 0)
.delivery-wrapper
font-size: 0
.title
line-height: 18px
font-size: 12px
color: rgb(7, 17, 27)
.delivery
margin-left: 12px
font-size: 12px
color: rgb(147, 153, 159)
關于適配iphone5,因為設計稿是以iphone6為模板設計的,如果不適配一些小的屏幕的話,對于一些比較寬的div(例如overview-left,overview-right)就會出現(xiàn)換行,被擠壓的顯示清空,所以需要使用media query來做一些基本的適配,這里只是以iphone5為適配參考,具體做法就是針對不同的屏幕寬度做處理
ratingselect組件
html代碼
:ratings="ratings">
ratings列表
html代碼
需要注意recommend的布局處理
needShow和過濾時間類似food.vue組件里面使用九.商品詳情頁food.vue
js代碼
import BScroll from 'better-scroll';
import { formatDate } from '../../common/js/date'; //相對路徑導入
import star from '../star/star';
const ALL = 2; //設置常量,比較好的代碼風格,代替直接寫數(shù)字到代碼里面去
const ERR_OK = 0;
export default {
props: {
seller: {
type: Object
}
},
data() {
return {
ratings: []
};
},
created() { //初始化數(shù)據(jù),從api那里獲取
this.$http.get('/api/ratings').then((response) => {
response = response.body;
if (response.errno === ERR_OK) {
this.ratings = response.data;
this.$nextTick(() => { //異步初始化滾動
this.scroll = new BScroll(this.$refs.ratings, {
click: true
});
});
}
});
},
methods: {
needShow(type, text) { //控制顯示是否有內(nèi)容的rate
if (this.onlyContent && !text) {
return false;
}
if (this.selectType === ALL) {
return true;
} else {
return type === this.selectType;
}
}
},
filters: { //過濾時間
formatDate(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm');
}
},
components: {
star
}
};
css代碼
@import "../../common/stylus/mixin.styl"
.rating-wrapper
padding: 0 18px
.rating-item
display: flex //使用flex布局
padding: 18px 0
border-1px(rgba(7, 17, 27, 0.1))
.avatar
flex: 0 0 28px //使用flex布局
width: 28px
margin-right: 12px
img
border-radius: 50%
.content
position: relative //重新定義相對布局的參考父div,被內(nèi)部元素做絕對布局使用
flex: 1 //使用flex布局
.name
margin-bottom: 4px
line-height: 12px
font-size: 10px
color: rgb(7, 17, 27)
.star-wrapper
margin-bottom: 6px
font-size: 0
.star
display: inline-block
margin-right: 6px
vertical-align: top
.delivery
display: inline-block
vertical-align: top
line-height: 12px
font-size: 10px
color: rgb(147, 153, 159)
.text
margin-bottom: 8px
line-height: 18px
color: rgb(7, 17, 27)
font-size: 12px
.recommend
line-height: 16px
font-size: 0
.icon-thumb_up, .item //共有屬性
display: inline-block
margin: 0 8px 4px 0 //分配右外邊距和下外邊距
font-size: 9px
.icon-thumb_up //個別屬性,因為icon沒有顏色,需要配置
color: rgb(0, 160, 220)
.item //個別屬性
padding: 0 6px //設置左右內(nèi)邊距,撐開布局,形成類似button的效果
border: 1px solid rgba(7, 17, 27, 0.1)
border-radius: 1px
color: rgb(147, 153, 159)
background: #fff
.time
position: absolute
top: 0
right: 0
line-height: 12px
font-size: 10px
color: rgb(147, 153, 159)
這里的flex布局是左邊固定28px,然后右邊占滿剩下的空間
flex: 0 0 28px 是flex-grow為0(項目不放大比例),flex-shrink為0(項目不縮小比例),flex-basis為28px(固定占用28px)
flex: 1是flex 1 1 auto的縮寫,就是會放大項目比例,并且剩余的項目空間也占有
參考:Flex 布局教程：語法篇
針對recommend的布局:
每一個內(nèi)容都是一個span,span是行內(nèi)元素,可以并列一行
設置外邊距是為了span之間能夠形成獨立的間隙
設置內(nèi)邊距是為了讓span和文字形成button的效果
總結
以上是生活随笔為你收集整理的html 价格列表组件,评价列表ratings组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hbase java api count
- 下一篇： android json传输数据到服务器