display: inline-flex
动态自适应- 消除不必要的空白,特别是字体,
font-size
和line-height
设置一样大小 - 开发组件形成自己的风格,比如:
v-like
,v
是法语vent
的首字母,表示林间有风
- 封装性,开放性。那些是要封装在内部,哪些是要开放出来的
- 粒度(组件封装的难点)
- 非常简单的功能 非常复杂的功能
import
导入文件不能使用绝对路径,只能使用相对路径component
中注册组件可以使用绝对路径,也可以使用相对路径
this.triggerEvent('like',{ behavior },{})
第一个参数是事件名,第二个参数在event.detail
中可以访问到,通过这个参数可以做一些自己做一些自定事件
组件中使用bind:like="onLike"
就可以绑定自定义事件了。
onLike () {
...
}
一个表达式在条件为true
时才会被执行,可以简化成下面这种
1 && 2 //2,当第 1 个表达式为 true 时,执行第 2 个表达式
0 && 2 //1,当第 1 个表达式为 false 时,不执行第 2 个表达式
自定义组件需要对传外部传进来的数据进行处理,数据发生改变时obserber
会被触发
正常这样设置的话,08
会被渲染成8
,前面的0
会自动被去掉
properties{
index{
type: Number,
observer (newVal) {
let val = newVal > 10 ? '0' + newVal : newVal
this.setData({
index: val
})
}
}
}
如果是这样设置的话,会进入死循环,因为在用setData
设置index
时是Number
类型。
那么在在properties
中的index
如果设置为Number
,08
会变成8
相对于之前传进来的8
没有发生改变,所有不会触发obserber
,但是将properties
中的index
设置为String
,那么就会无限在Number
和String
之间不停切换了。
properties{
index{
type: String,
observer (newVal) {
let val = newVal > 10 ? '0' + newVal : newVal
this.setData({
index: val
})
}
}
}
解决这个问题有两种方式
- 在
data
中设置一个变量_index
,通过setData
去改变_index
properties{
index{
type: String,
observer (newVal) {
let val = newVal > 10 ? '0' + newVal : newVal
this.setData({
_index: val
})
}
}
}
data: {
_index: 0
}
新建一个classic-beh.js
文件用来定义behavior
,写代码的时候使用Behavior
这个关键字,其他的和写Component
一样
behaviors
是一个多继承的关系,如果出现了重名的properties
和data
最后一个的的属性会被继承,但生命周期函数不会被覆盖,都会被执行一遍。
getLatest()
获取到的是最新一期期刊,通过localStorage
存储到本地。在切换下一张期刊时,通过比较currentIndex
和latestIndex
,来控制左边一个箭头是否可以点击。
说明:
currentIndex 是最新一期期刊的 index latestIndex 是通过 getLatest() 获取到的最新 index