微信小程序-慕课网《旧岛》实战(二)
2020-03-20 本文已影响0人
文艺的程序狗
1.改变data数据不需要临时变量
比如像classics:[]数组增加一个元素
data:{
classics:[]
}
this.data.classics.push(‘haha’);
setData({
classics:this.data.classics
})
2.参数可以传递值，方法，对象（网络请求回调）
class HTTP{
constructor(){
}
request(parmas){
}
}
class ClassicModel extends HTTP{
constructor(){
super();
}
getLastet(sCallback){
request({
url:''
data:{}
success:data=>{
sCallback(data)
}
})
}
}
getLastet(data=>{
console.log(data);
})
网络请求默认是异步请求
3.Behavior
behavior定义的方式和组件差不多，作用是供组件引用，相当于抽取公共组件
4.字段属性不需要提前定义，直接赋值即可
5.外部可以对Component设置函数
setData({
search:this.search
})
search:function(){
}
<mp-searchbar search=“{{searchbar}}”></mp-searchbar>
6.css 如果存在某些情况 会混乱
//情况一
.list{
}
.list .item{
}
.item{
}
这个情况 list 里面的item会引用到item里面的元素
//情况二
.list{
}
.list .title{
}
.list .item .title{
}
这个清理 item 里面的title会引用到list 里面item的元素
-
wx:for不能放在 有样式的view里面，会出现样式混乱
-
css 样式 可以直接支持，子标签样式
.container{
}
.container text{
}
.container image{
}
<view class=‘container’>
<image src=‘’/>
<text>我的事情</text>
</view>
抽取的component外边距在外边调用component写，不再component里面写
在page component最外层包裹一个view
伪劣选择器，比如
.post-header > text:first-child
伪劣选择器分为伪元素和伪类，伪元素和伪类的差别在于，如果需要添加一个元素，比如<span>来实现效果的，称为元素，如果需要添加class来实现的，则称为伪类
支持的选择器
类 class
id #id
标签选择器 button
后代选择器 .class child-class
伪劣选择器
优先级
!important
style
#element
.element
element
9.图片button
component
//css
.container{
padding: 0 !important;
border:none !important;
}
//xml
<button bind:getuserinfo="onGetUserInfo" open-type='{{openType}}' plain='{{true}}' class="container">
<slot name="img"></slot>
</button>
- 动画
Chrome 和 Safari 需要前缀 -webkit-。
@keyframes bounce{
0%,100%{
transform: scale(0.0);
-webkit-transform: scale(0.0)
}
50%{
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
@-webkit-keyframes bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}
.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #3063b2;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
参考
代码已经上传github
