(1) better-scroll插件
官網(wǎng)：https://ustbhuangyi.github.io/better-scroll/#/examples
詳細(xì)：https://zhuanlan.zhihu.com/p/27407024
- 安裝：
cnpm install better-scroll --save
- 使用
js部分
<script type="text/ecmascript-6">
import BScroll from 'better-scroll'; // 引入better-scroll
created() { // 生命周期鉤子函數(shù)稠炬，用在實(shí)例被創(chuàng)建之后
this.$http.get('/api/goods') // 異步請求數(shù)據(jù)
.then((response) => {
response = response.body;
if (response.errno === ERR_OK) {
this.goods = response.data;
this.$nextTick(() => { // this.$nextTick保證在更新dom之后焕阿，再執(zhí)行initscroll()函數(shù)
this.initScroll();
});
}
});
},
methods: {
initScroll() { // 定義一個(初始化scroll)的函數(shù)
this.menuScroll = new BScroll(this.$refs.menuWrapper, { click: true });
// 拿到dom，實(shí)例化BScroll首启，click:true則是允許點(diǎn)擊事件
this.contentScroll = new BScroll(this.$refs.goodsWrapper, { click: true});
}
}
};
</script>
----------------------------------------------------------------------------
vue的DOM部分
<template>
<div class="goods">
<div class="menu-wrapper" ref="menuWrapper"> // ref屬性：綁定dom
<ul>
<li v-for=" item in goods " class="li">
</li>
</ul>
</div>
<div class="goods-wrapper" ref="goodsWrapper"> // ref屬性：綁定dom
<ul>
<li v-for=" item in goods" class="foods-Wrapper">
<h1 class="foods-section"> {{ item.name }} </h1>
<ul>
<li v-for=" foods in item.foods " class=" foods-content ">
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
- 使用進(jìn)階
當(dāng)better-scroll處在時刻變化的場景中的時候( 比如：在顯示隱藏一個modal的時候暮屡，每次狀態(tài)的變化都需要new BScroll？ 不需要毅桃，better-scroll中有 refresh() 接口 )
//初始化函數(shù)
initBetterScroll() {
if (!this.modalScroll) {
this.modalScroll = new BScroll(this.$refs.modalDom, { click: true });
} else {
this.modalScroll.refresh(); // 不存在就new褒纲，已經(jīng)存在就refresh()
}
}
---------------------------------------------------------------
//調(diào)用
showDetail() {
if (!this.selectTotalCount) { // 當(dāng)數(shù)量為0的時候，不顯示
return;
} else {
this.showModal = !this.showModal; // 切換顯示狀態(tài)
} if (this.showModal) { // 顯示的時候钥飞，調(diào)用better-scroll
this.$nextTick(() => { //dom更新后外厂，執(zhí)行
this.initBetterScroll();
});
}
}
(2) 父組件調(diào)用子組件的方法
(1) ref屬性
ref 綁定在一般元素上，ref指 ( DOM元素 )
ref 綁定在組件上代承，ref指 ( 組件實(shí)例 ）(2) 例子說明
子組件的函數(shù)
methods: {
show() {
this.foodsDetail = !this.foodsDetail;
}
}
------------------------------------------------------------------
父組件調(diào)用子組件的函數(shù)
dom
<li v-for=" foods in item.foods " class=" foods-content " v-on:click="selectFoodsFunction(foods)">
// 點(diǎn)擊汁蝶，執(zhí)行 selectFoodsFunction函數(shù)，并把當(dāng)前的 foods 作為參數(shù)傳入
<Foods v-bind:foods="selectedFoodsObject" ref="foodsChildrenComponent"></Foods>
// ref綁定子組件實(shí)例調(diào)用子組件方法 论悴， 將selectedFoodsObject對象 傳給子組件
selectFoodsFunction(foods) {
this.selectedFoodsObject = foods; // 將foods對象保存在data的selectedFoodsObject 中
this.$refs.foodsChildrenComponent.show(); //調(diào)用子組件的show()函數(shù)
}
(3) click.stop阻止冒泡掖棉，click.prevent阻止默認(rèn)事件
<div class="cart-add icon-add_circle" v-on:click.stop.prevent="addCart($event)"></div>
(4) @media 媒體查詢
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0,
user-scalable= no"
/>
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
// 如果文檔寬度小于 300 像素則修改背景顏色(background-color):
// ( min-width: 300px) 瀏覽器寬度大于300px時
(5) 1px像素邊框
html
<div class="suo">
定義偽類，縮放class
</div>
---------------------------------------------------------------------------------------------
stylus
.suo
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-bottom: 1px solid red
content: ' '
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.suo:after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.suo:after
-webkit-transform: scaleY(0.5) // ratio: 比例
transform: scaleY(0.5)
(6) 省略號膀估。幔亥。。
(1) white-space：nowrap ( 規(guī)定段落中的文本不進(jìn)行換行 )
(2) overflow: hidden ( 內(nèi)容會被修剪察纯，并且其余內(nèi)容是不可見的 )
(3) text-overflow: ellipsis ( 顯示省略符號來代表被修剪的文本 )
.right
white-space: nowrap
overflow: hidden
text-overflow: ellipsis //ellipsis是省略的意思
(7) filter: blur(10px) 模糊效果
（filter詳解）http://www.cnblogs.com/moqiutao/p/4843437.html
filter: blur(10px);
overflow: hidden; //一般會讓超出的模糊部分隱藏
(8) filter: drop-shadow() 陰影效果
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
(9) box-shadow： 盒陰影效果
box-shadow: x偏移, y偏移, 模糊大小, 色值
兩者區(qū)別：http://www.zhangxinxu.com/wordpress/2016/05/css3-filter-drop-shadow-vs-box-shadow/
(10) VUE中 css3 過渡 和 動畫
動畫：
vue部分
<transition name="aa">
<div class="modal" v-show="showModal">
<div v-on:click="show()" class="close">關(guān)閉</div>
</div>
</transition>
-----------------------------------
css部分
.aa-enter-active {
animation: bounce-in .4s;
}
.aa-leave-active {
animation: bounce-in .4s reverse; // reverse反轉(zhuǎn)的意思
}
@keyframes bounce-in {
0% {
transform: translateX(-100px);
}
100% {
transform: translateX(0);
}
}
(11) flex固定寬度
flex: 0 0 80px;
width: 80px;
(12) display:table 多行垂直居中布局
.li
display: table
background:red
border-bottom: 1px solid red
line-height:14px;
height:54px;
width:56px;
padding: 0 12px
.table-cell
display: table-cell
background:yellow
vertical-align: middle
(13) 用數(shù)組控制不同的class的顯示
template
<li v-for=" item in goods " class="li">
<div v-bind:class="classMap[ item.type ]" class="ii"></div>
<span class="table-cell">{{ item.name }}</span>
</li>
------------------------------------------------------------------------------------------
script
created() {
this.classMap = ['jian', 'jia', 'cheng', 'chu', 'mo'];
//這里也可以在data(){}中直接初始化classMap
//data() {
// return {
// goods: [],
// classMap: ['jian', 'jia', 'cheng', 'chu', 'mo']
// };
// }
this.$http.get('/api/goods')
.then((response) => {
response = response.body;
if (response.errno === ERR_OK) {
this.goods = response.data;
}
});
}
--------------------------------------------------------------------------------------------
css
.jian
background:blue
.jia
background:blueviolet
.cheng
background:black
(14) 在vue中如果props是一個 （數(shù)組Array）或者一個（對象Object）帕棉，那么default就是一個函數(shù)
cart組件中js部分
export default {
props: {
sellerCart: { // <Cart v-bind:sellerCart="seller"></Cart> 父組件傳過來的對象
type: Object,
default() { // props是對象，所以default是一個函數(shù)
return {};
}
},
selectFoods: {
type: Array,
default() { // props是數(shù)組饼记，所以default是一個函數(shù)
return [
{
price: 10, // 在selectFoods傳過來的不存在時香伴，返回defaut中值
count: 20
}
];
}
}
},
computed: { // 計算屬性
selectTotalPrice() {
let total = 0;
this.selectFoods.forEach((foods) => { // 遍歷selectFoods
total += foods.price * foods.count;
});
return total;
},
selectTotalCount() {
let count = 0;
this.selectFoods.forEach((foods) => {
count += foods.count;
});
return count;
},
stateRight() { //結(jié)算的三種狀態(tài)
if (this.selectTotalPrice === 0) {
return `${this.sellerCart.minPrice}元起送`; // `${...}` es6帶變量的字符串寫法
} else if (this.selectTotalPrice < this.sellerCart.minPrice) {
let diff = this.sellerCart.minPrice - this.selectTotalPrice;
return `還差 ${diff}元起送`;
} else {
return '去結(jié)算';
}
}
}
};
-----------------------------------------------------------------------------------
cart的vue的dom部分
<template>
<div class="Cart">
<div class="Cart-container">
<div class="left">
<div class="circle">
<div class="circle-in" v-bind:class="{ 'selectTotalCount': selectTotalCount>0}">
<i class="fa fa-credit-card" aria-hidden="true"></i>
<div class="foodsCountNum">
{{ selectTotalCount }}
</div>
</div>
</div>
<div class="price" v-bind:class="{ 'priceHighlight': selectTotalPrice>0 }">
{{ selectTotalPrice }}
</div>
<div class="otherPrice">
另需配送費(fèi){{ sellerCart.deliveryPrice }}元
</div>
</div>
<div class="right" v-bind:class="{ 'go': (selectTotalPrice - sellerCart.minPrice ) > 0 }" >
//上面要注意，在template(或者h(yuǎn)tml)中表達(dá)式都不能帶this具则，如（this.selectTotalPrice ）
<div class="right-text">{{ stateRight }}</div>
</div>
</div>
</div>
</template>
(15) 手機(jī)即纲，瀏覽器下點(diǎn)擊觸發(fā)兩次解決方案：
js部分
methods: {
add(event) {
if (!event._constructed) {
return;
}
console.log('add');
}
}
--------------------------------------------------------
html部分
<div class="same" v-on:click.stop.prevent="add($event)">+</div>
//這里要加上add($event)
