github地址:https://github.com/MissNanLan/vue-takeoutApp.git
先看效果
商品頁(yè).jpg
商家頁(yè)jpg
購(gòu)物車.jpg
評(píng)論頁(yè)jpg
公告頁(yè)S80202-230340.jpg
路由配置
1、main.js
記得要引入各個(gè)組件
const router = new VueRouter({
mode:"hash",
linkActiveClass:"myactive",//設(shè)置高亮顯示。myactive的樣式在app.vue當(dāng)中設(shè)置
routes:[
{path:'/',redirect:'goods'}, //設(shè)置默認(rèn)的頁(yè)面
{ path:'/goods',
component:goods
},
{ path :'/ratings',
component:ratings
},
{ path:'/seller',
component:seller
}
]
})
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
2、App.vue
<div class="tab border-1px">
<div class="tab-item">
<router-link to="/goods" activeClass="myactive" >商品</router-link>
</div>
<div class="tab-item">
<router-link to="/ratings">評(píng)論</router-link>
</div>
<div class="tab-item">
<router-link to="/seller" >商家</router-link>
</div>
</div>
<!--keep-alive只讓頁(yè)面請(qǐng)求一次-->
<router-view :seller="seller" keep-alive></router-view>
myactive在style里面設(shè)置高亮顯示的樣式
設(shè)置數(shù)據(jù)來(lái)源
要安裝vue-resource
在build的webpack.dev.conf.js的文件里面配置路由代理
const app = express()
var appData = require('../data.json') //設(shè)置數(shù)據(jù)來(lái)源
var seller = appData.seller;
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router();
app.use('/api',apiRoutes);
//配置路由代理
before(app){
app.get('/api/seller',(req,res)=>{
res.json({
errno:0,
data:seller
})
}),
app.get('/api/goods',(req,res)=>{
res.json({
errno:0,
data:goods
})
}),
app.get('/api/ratings',(req,res)=>{
res.json({
errno:0,
data:ratings
})
})
}
},
配置成功的效果.png
圖標(biāo)圖片的自適應(yīng)
就是這樣的圖標(biāo).png
這里用的是stylus乐疆，stylus功能強(qiáng)大荞怒，可以寫成函數(shù)等等。這里可以參考張?chǎng)涡竦牟┛?/a>
1昌跌、定義
image.png
image.png
關(guān)于更多設(shè)備像素比的知識(shí)可點(diǎn)擊這里devicePixeRatio
2频蛔、引用
image.png
字體圖標(biāo)的使用
這里用的是iconmoon灵迫，就是將svg的文件上傳到iconmoon做成字體圖標(biāo)文件。
svg文件.png
使用方法
<i class="icon icon-keyboard_arrow_right"></i>
當(dāng)頁(yè)面超出時(shí)出現(xiàn)滾動(dòng)效果（左側(cè)菜單和右側(cè)區(qū)域都要獨(dú)立滾動(dòng)）
_initScroll() {
this.meunScroll = new BScroll(this.$refs.menuWrapper, {
click:true //這里設(shè)置為click等于true的原因是因?yàn)锽Scroll阻止了點(diǎn)擊事件
});
this.foodScroll = new BScroll(this.$refs.foodWrapper, {
probeType: 3,
click:true
});
這里用的BScroll插件晦溪。安裝命令是 cnpm install --save-dev better-scroll瀑粥，然后在要使用的組件中引入即可
聯(lián)動(dòng)和選擇效果
聯(lián)動(dòng)效果，即右側(cè)區(qū)域滾動(dòng)到某個(gè)分類塊其左側(cè)菜單也要高亮顯示
首先我們想下邏輯尼变。是不是要知道右側(cè)區(qū)域的內(nèi)容每個(gè)分類塊的高度利凑，當(dāng)右側(cè)內(nèi)容列表的內(nèi)容和和左側(cè)菜單列表的下標(biāo)值相等的時(shí)候浆劲，左側(cè)菜單列表高亮顯示嫌术。
算出高度
聯(lián)動(dòng)
_calculateHeight(){ //獲取foodList的高度
let foodList = this.$refs.foodList; //拿到foodlist
let height = 0;
this.listHeight.push(height);
for (let i = 0; i < foodList.length; i++) {
let item = foodList[i];
height += item.clientHeight; //clientHeight是可見區(qū)域的高度
this.listHeight.push(height);
}
}
created() { //實(shí)例化創(chuàng)建完成之后的鉤子函數(shù)
this.classMap1 = ['decrease','discount','special','guarantee','invoice'];
this.$http.get('/api/goods').then((response) => {
response = response.body; //response.body返回一個(gè)對(duì)象
if(response.errno === ERR_OK){
this.goods = response.data;
this.$nextTick(() => { //this.$nextTick是在下次DOM更新循環(huán)結(jié)束時(shí)調(diào)用延遲回調(diào)函數(shù)。
this._initScroll();
this._calculateHeight();
})
}
});
},
監(jiān)聽右側(cè)區(qū)域滾動(dòng)事件
//監(jiān)聽右側(cè)區(qū)域的滾動(dòng)事件
this.foodScroll.on('scroll', (pos) => {
// 判斷滑動(dòng)方向牌借，避免下拉時(shí)分類高亮錯(cuò)誤（如第一分類商品數(shù)量為1時(shí)度气，下拉使得第二分類高亮）
if (pos.y <= 0) {
this.scrollY = Math.abs(Math.round(pos.y));
}
});
高亮顯示
currentIndex() {
for (let i = 0; i < this.listHeight.length; i++) {
let height1 = this.listHeight[i];
let height2 = this.listHeight[i + 1];
if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
this._followScroll(i);
return i;
}
}
return 0;
_followScroll(index) {
let menuList = this.$refs.menuList;
let el = menuList[index];
this.meunScroll.scrollToElement(el, 300, 0, -100);
//scrollToElement(el, time, offsetX, offsetY, easing)
}
image.png
條件成立時(shí)給它加上高亮顯示的樣式
選擇
selectMenu(index,event) {
if (!event._constructed) { //這里會(huì)觸發(fā)兩次事件，瀏覽器原生事件和自己派發(fā)事件膨报。如果不穿$event進(jìn)來(lái)的話磷籍，那么就會(huì)打印兩次
return; //這里是把原生的事件給return掉
}
let foodList = this.$refs.foodList;
let el = foodList[index];
this.foodScroll.scrollToElement(el, 300);//300是滾動(dòng)的時(shí)間
}
在左側(cè)菜單點(diǎn)擊觸發(fā)
父組件goods項(xiàng)子組件傳選中的商品
food子組件和shopcart，還有cartcontrol組件都會(huì)接收父組件goods傳過(guò)來(lái)的值
//在goods組件里面選了多少foods
selectFoods() {
let foods = [];
this.goods.forEach((good) => {
good.foods.forEach((food) => {
if (food.count) {
foods.push(food);
}
});
});
return foods;
}
購(gòu)物車小球動(dòng)畫
beforeDrop(el) {
let count = this.balls.length;
while (count--) {
let ball = this.balls[count];
if (ball.show) {
let rect = ball.el.getBoundingClientRect(); //getBoundingClientRect用于獲取某個(gè)元素相對(duì)于視窗的位置集合
let x = rect.left - 32;
let y = -(window.innerHeight - rect.top - 22);
el.style.display = '';
el.style.webkitTransform = `translate3d(0,${y}px,0)`;//y軸轉(zhuǎn)
el.style.transform = `translate3d(0,${y}px,0)`;
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = `translate3d(${x}px,0,0)`; //x軸轉(zhuǎn)
inner.style.transform = `translate3d(${x}px,0,0)`;
}
}
},
dropping(el, done) {
/* eslint-disable no-unused-vars */
let rf = el.offsetHeight;
this.$nextTick(() => {
el.style.webkitTransform = 'translate3d(0,0,0)';
el.style.transform = 'translate3d(0,0,0)';
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = 'translate3d(0,0,0)';
inner.style.transform = 'translate3d(0,0,0)';
el.addEventListener('transitionend', done);
});
},
afterDrop(el) {
let ball = this.dropBalls.shift();
if (ball) {
ball.show = false;
el.style.display = 'none';
}
}
}
調(diào)用
<transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
<div class="ball" v-show="ball.show">
<div class="inner inner-hook"></div>
</div>
</transition>
星級(jí)評(píng)分
這里的星級(jí)評(píng)分的邏輯還算比較簡(jiǎn)單现柠。它接受父組件傳來(lái)的兩個(gè)參數(shù)院领，一個(gè)是星星的大小，一個(gè)是分?jǐn)?shù)够吩。
props:{
size:{
type:Number
},
score:{
type:Number
}
}
關(guān)鍵代碼：怎么顯示全星比然、半星、空星
itemClasses() {
let result = []; //math.floor()對(duì)數(shù)字進(jìn)行下舍入
let score = Math.floor(this.score*2) / 2;
let hasDecimal = score%1 !=0; //余數(shù)為0的話就不是小數(shù)
let integer = Math.floor(score);
for(let i =0; i<integer;i++){
result.push(CLS_ON);
}
if(hasDecimal){
result.push(CLS_HALF);
}
while(result.length<LENGTH){
result.push(CLS_OFF);
}
return result;
}
flex布局實(shí)現(xiàn)左側(cè)固定右側(cè)自適應(yīng)
html代碼
<div class="goods">
<div class="menu-wrapper"></div>
<div class="foods-wrapper"></div>
</div>
stylus代碼
.goods
display:flex
.menu-wrapper
flex:0 0 100px;
width:100px
.foods-wrapper
flex:1
這樣就實(shí)現(xiàn)了左側(cè)固定右側(cè)區(qū)域自適應(yīng)
水平方向滾動(dòng)
_initScroll(){
if(!this.scroll){
this.scroll = new BScroll(this.$refs.seller,{
click:true
});
}else{
this.scroll.refresh();
}
}
商家實(shí)景水平滾動(dòng).png
打包編譯
node build //會(huì)生成dist文件夾
dist文件夾.png
可以建一個(gè)小型的prod.server.js
在手機(jī)訪問(wèn)輸入自己的ip加端口號(hào)周循，如果不能訪問(wèn)的話强法，在config文件夾下的index.js文件里面的dev將host改為0.0.0.0，在電腦端用localhost加端口訪問(wèn)
.png
個(gè)人總結(jié)：一路走來(lái)湾笛，確實(shí)遇到不少的困難饮怯，是因?yàn)槔蠋煹慕虒W(xué)視頻是1.0的,而現(xiàn)在vue都升級(jí)2.x了。所以在這個(gè)過(guò)程中難眠會(huì)遇到一些困難嚎研，我記得第一次接觸這個(gè)視頻蓖墅，因?yàn)榘姹静粚?duì)，自己就放棄了，但是后來(lái)又重新打開來(lái)看论矾，加深對(duì)vue的認(rèn)識(shí)
主要有建立數(shù)據(jù)mocks于樟、路由配置（哈希路由和歷史路由、高亮顯示拇囊、配置默認(rèn)頁(yè)面）迂曲、字體圖標(biāo)（svg文件編程字體文件，iconmoon）寥袭、圖標(biāo)圖標(biāo)做自適應(yīng)（主要使用媒體查詢）路捧、stylus實(shí)戰(zhàn)（主要是stylus可以寫成函數(shù)的形式，方便于整合樣式代碼）传黄、flex布局杰扫、父子組件傳遞數(shù)據(jù)、Bscroll插件的使用（當(dāng)移動(dòng)端的內(nèi)容超出時(shí)滾動(dòng)膘掰、水平也是）章姓、vue的過(guò)渡等等
