(1) better-scroll插件
官网：https://ustbhuangyi.github.io/better-scroll/#/examples
详细：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() { // 生命周期钩子函数，用在实例被创建之后
this.$http.get('/api/goods') // 异步请求数据
.then((response) => {
response = response.body;
if (response.errno === ERR_OK) {
this.goods = response.data;
this.$nextTick(() => { // this.$nextTick保证在更新dom之后，再执行initscroll()函数
this.initScroll();
});
}
});
},
methods: {
initScroll() { // 定义一个(初始化scroll)的函数
this.menuScroll = new BScroll(this.$refs.menuWrapper, { click: true });
// 拿到dom，实例化BScroll，click:true则是允许点击事件
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>
- 使用进阶
当better-scroll处在时刻变化的场景中的时候( 比如：在显示隐藏一个modal的时候，每次状态的变化都需要new BScroll？ 不需要，better-scroll中有 refresh() 接口 )
//初始化函数
initBetterScroll() {
if (!this.modalScroll) {
this.modalScroll = new BScroll(this.$refs.modalDom, { click: true });
} else {
this.modalScroll.refresh(); // 不存在就new，已经存在就refresh()
}
}
---------------------------------------------------------------
//调用
showDetail() {
if (!this.selectTotalCount) { // 当数量为0的时候，不显示
return;
} else {
this.showModal = !this.showModal; // 切换显示状态
} if (this.showModal) { // 显示的时候，调用better-scroll
this.$nextTick(() => { //dom更新后，执行
this.initBetterScroll();
});
}
}
(2) 父组件调用子组件的方法
(1) ref属性
ref 绑定在一般元素上，ref指 ( DOM元素 )
ref 绑定在组件上，ref指 ( 组件实例 ）(2) 例子说明
子组件的函数
methods: {
show() {
this.foodsDetail = !this.foodsDetail;
}
}
------------------------------------------------------------------
父组件调用子组件的函数
dom
<li v-for=" foods in item.foods " class=" foods-content " v-on:click="selectFoodsFunction(foods)">
// 点击，执行 selectFoodsFunction函数，并把当前的 foods 作为参数传入
<Foods v-bind:foods="selectedFoodsObject" ref="foodsChildrenComponent"></Foods>
// ref绑定子组件实例调用子组件方法 ， 将selectedFoodsObject对象 传给子组件
selectFoodsFunction(foods) {
this.selectedFoodsObject = foods; // 将foods对象保存在data的selectedFoodsObject 中
this.$refs.foodsChildrenComponent.show(); //调用子组件的show()函数
}
(3) click.stop阻止冒泡，click.prevent阻止默认事件
<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 ( 规定段落中的文本不进行换行 )
(2) overflow: hidden ( 内容会被修剪，并且其余内容是不可见的 )
(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偏移, 模糊大小, 色值
两者区别：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">关闭</div>
</div>
</transition>
-----------------------------------
css部分
.aa-enter-active {
animation: bounce-in .4s;
}
.aa-leave-active {
animation: bounce-in .4s reverse; // reverse反转的意思
}
@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) 用数组控制不同的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是一个 （数组Array）或者一个（对象Object），那么default就是一个函数
cart组件中js部分
export default {
props: {
sellerCart: { // <Cart v-bind:sellerCart="seller"></Cart> 父组件传过来的对象
type: Object,
default() { // props是对象，所以default是一个函数
return {};
}
},
selectFoods: {
type: Array,
default() { // props是数组，所以default是一个函数
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() { //结算的三种状态
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 '去结算';
}
}
}
};
-----------------------------------------------------------------------------------
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">
另需配送费{{ sellerCart.deliveryPrice }}元
</div>
</div>
<div class="right" v-bind:class="{ 'go': (selectTotalPrice - sellerCart.minPrice ) > 0 }" >
//上面要注意，在template(或者html)中表达式都不能带this，如（this.selectTotalPrice ）
<div class="right-text">{{ stateRight }}</div>
</div>
</div>
</div>
</template>
(15) 手机，浏览器下点击触发两次解决方案：
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)
