項目主要依賴
總覽
overview:
overview.png
header:
header.png
header中的details:
details.png
通過路由進行goods拾给、ratings弥喉、seller切換：
ratings.png
seller.png
相關技術點
-
cube-ui組件 官方文檔
安裝：
在圖形化界面中搜索插件vue-cli-plugin-cube-ui。
其實這個組件庫里我只使用到了一個組件： ScrollNav例嘱，利用這個組件來實現(xiàn)商品頁面左右聯(lián)動的效果狡逢。 -
moment.js 將時間戳格式化 官方文檔
安裝：$ npm install moment --save
<!--模板內(nèi)容-->
<div class="time">{{format(rating.rateTime)}}</div>
<!--script內(nèi)容-->
methods: {
format (time) {
return moment(time).format('YYYY-MM-DD hh:mm')
},
}
-
IcoMoon 生成字體圖標 官方文檔
選中下載解壓后，將 fonts目錄 與 style.css 文件拷貝于項目文件中拼卵，我這里放入 common 目錄中奢浑。
<!--模板內(nèi)容-->
<span class="icon-cart"></span>
<!--在style里引入css文件路徑-->
@import '../../common/style.less'
-
axios 獲取模擬數(shù)據(jù)
安裝：
1.圖形化界面搜索插件vue-cli-plugin-axios
2.$ npm install axios --save
細節(jié)
- 通過vue-router向子組件傳遞數(shù)據(jù)的方法：
<router-view keep-alive
:goods='goods'
:ratings='ratings'
:seller='seller'>
</router-view>
然后在路由配置index.js:
routes: [
{
path: '/goods',
component: Goods,
props: true
},
//
]
- 由于vue是異步獲取數(shù)據(jù)，要注意在img標簽的src前加冒號（v-bind綁定屬性）
<img :src='data'>腋腮，否則圖片不會被加載雀彼。 - sticky footers （粘頁腳）的應用 - 粘頁腳，即當頁面內(nèi)容不夠外層容器高度時低葫，footer粘在容器底部详羡，當內(nèi)容超出容器高度時footer被往下頂。
- 由于多個頁面使用到了樣式不同的星星子組件嘿悬，而父組件無法修改修改子組件樣式实柠，所以設置屬性使接受不同屬性的子組件呈現(xiàn)不用的樣式。
<star :size='48' :score="seller.score"></star>
<!--style-->
.star-24 {
//
}
.star-36 {
//
}
- flex布局 - flex布局
- 用一個
<keep-alive>元素將動態(tài)組件包裹起來善涨，用于保留組件狀態(tài)或避免重新渲染窒盐，在標簽中直接寫入keep-alive是一樣的效果。- 動態(tài)組件 - 修改cube-ui組件樣式不能在
<style scoped>里面修改钢拧。 - 用 filter 對數(shù)組進行過濾 - vue過濾
- 用
Vue.set給對象新增屬性
調(diào)用方法：
import Vue from 'vue'
Vue.set( target, key, value )
target：要更改的數(shù)據(jù)源(可以是對象或者數(shù)組)
key：要更改的具體數(shù)據(jù)
value ：重新賦的值
- 讓view-router固定高度,超出部分在容器內(nèi)滾動而不帶動頁面上面的內(nèi)容滾動（吸頂效果）：
<div class="appbox">
<headerbox :seller='seller'></headerbox>
<div class="router-wrapper">
<div class="routerbox1">
<router-link to='/goods' >商品</router-link>
</div>
</div>
<div class="view-wrapper">
<router-view keep-alive></router-view>
</div>
</div>
.headerbox {
position: relative;
}
.view-wrapper {
position: absolute;
top: 174px;
bottom: 0;
width: 100%;
overflow: scroll;
}
