小程序看练代码01--flex布局，图标库，b站多倍速、*this禁止复用，setdata，输出绑定id，data-绑定数据，catch时间，父子组件传值properties，css动画

1、flex布局的一些小知识

.container{
  display: flex;
  flex-direction:row;//flex方向：row水平 column纵向
  justify-content: space-evenly;//水平排布时均分空白
  flex-wrap: wrap;//wrap为换行，nowrap为不换行
  box-sizing: border-box;//边框在内容内（不在向外扩展）
}

2、图标库

阿里巴巴矢量库

https://www.iconfont.cn/

3、b站三倍速

控制台内输入

document.querySelector('video').playbackRate = 3

4、*this禁止复用

<view wx:for="{{testloop}}" wx:key="*this"><switch/>{{item}}</view>
<button bindtap="add">增加</button>

wx：key在没有唯一索引值的时候需要给数据加一个唯一索引id
注意微信：index是会变的，会根据item的多少变动，不可靠，最好使用自定义id

5、实时更新数据使用this.setData

onReady: function () {
    setTimeout(()=>{
      let newitem={
        courseImage:"/asset/images/gril05.jpg",
        courseTitle:"python",
        courseTeacher:"maba",
        courseStudyCount:23000,
        isstar:true,
      }

      this.data.courseItems.push(newitem);
      this.setData({
        courseItems:this.data.courseItems
      })

    },3000)
  },

6、输出绑定的id

wxml

<view id="click1" bindtap="myclick">event1</view>
<view id="click2" bindtap="myclick">event2</view>

js

 myclick(e){
    console.log(e.target.id);
  },

7、data-绑定数据

携带数据

<view id="click1" data-name="zhangsan" data-age='18'  bindtap="myclick">event1</view>

js

  myclick(e){
    console.log(e);
  },

7、catch绑定事件（不会冒泡）

bind：会冒泡（bindtap）
catch：不会冒泡（catchtap）
capture：捕获阶段绑定，与冒泡阶段的顺序是反序的（captur-catch：tap）

8、小程序的父子传值properties

• 1、数据写在引用页面的js里

mytest.js

// pages/test/mytest.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    teacherItems:[
      {
        id:1,
        teacherImg:'/asset/images/gril01.jpg',
        name:'张三丰'
      },
      {
        id:2,
        teacherImg:'/asset/images/gril02.jpg',
        name:'岳不群'
      },
      {
        id:3,
        teacherImg:'/asset/images/gril03.jpg',
        name:'令狐冲'
      },
      {
        id:4,
        teacherImg:'/asset/images/gril04.jpg',
        name:'向问天'
      },
      {
        id:5,
        teacherImg:'/asset/images/gril05.jpg',
        name:'虚竹'
      },
      {
        id:6,
        teacherImg:'/asset/images/gril06.jpg',
        name:'逍遥子'
      },
      {
        id:7,
        teacherImg:'/asset/images/gril07.jpg',
        name:'桃谷六仙'
      },
      {
        id:8,
        teacherImg:'/asset/images/gril08.jpg',
        name:'黄老邪'
      },
      {
        id:9,
        teacherImg:'/asset/images/gril09.jpg',
        name:'欧阳锋'
      }
    ]
  },
 

})

• 2、在引用页引用的组件上，自定义一个属性用于传值，并将引用页的js数据赋值给这个属性，从而将数据注入到组件中

mytest.wxml

<view class="container">
  <block wx:for="{{teacherItems}}" wx:key='id'>
    <mycomp teacherItem="{{item}}"/><!--实际上是把item对象传给了teacherItem，组件就拿到了item，从而完成了父传子-->
  </block>
</view>

• 3、数据传给组件后，要到组件js的properties里注册一下，一遍能够在组件内部使用
  mycom.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    teacherItem:Object//给传过来的属性设定类型
  },

})

• 4、在组件内部通过属性使用传来的数据
  mycomp.js

<view class="mycomp">
  <image class="image" src="{{teacherItem.teacherImg}}" mode="scaleToFill"/>
  <text class="text">{{teacherItem.name}}</text>
</view>

最终效果

9、删除教师列表小案例

• 1、应用页数据构建

mytest.wxjs

// pages/test/mytest.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    teacherItems:[
      {
        id:1,
        teacherImg:'/asset/images/gril01.jpg',
        name:'张三丰'
      },
      {
        id:2,
        teacherImg:'/asset/images/gril02.jpg',
        name:'岳不群'
      },
      {
        id:3,
        teacherImg:'/asset/images/gril03.jpg',
        name:'令狐冲'
      },
      {
        id:4,
        teacherImg:'/asset/images/gril04.jpg',
        name:'向问天'
      },
      {
        id:5,
        teacherImg:'/asset/images/gril05.jpg',
        name:'虚竹'
      },
      {
        id:6,
        teacherImg:'/asset/images/gril06.jpg',
        name:'逍遥子'
      },
      {
        id:7,
        teacherImg:'/asset/images/gril07.jpg',
        name:'桃谷六仙'
      },
      {
        id:8,
        teacherImg:'/asset/images/gril08.jpg',
        name:'黄老邪'
      },
      {
        id:9,
        teacherImg:'/asset/images/gril09.jpg',
        name:'欧阳锋'
      }
    ]
  },
 

})

• 2、引用页应用数组，并传递子组件数据

mytest.wxml

<view class="container">
  <block wx:for="{{teacherItems}}" wx:key='id'>
    <mycomp teacherItem="{{item}}"/><!--实际上是把item对象传给了teacherItem，组件就拿到了item，从而完成了父传子-->
  </block>
</view>

• 3、组件页面绑定各类事件和数据，其中使用从应用页（父组件）传来的属性

mycomp.wxml

<view class="mycomp {{isdelete ? 'deleteItem' : ''}}" bind:longpress="deleteItemHandler" bindtap="undeleteItemHandler">
  <image class="image" src="{{teacherItem.teacherImg}}" mode="scaleToFill"/>
  <text class="text">{{teacherItem.name}}</text>
  <view class="deltex" hidden="{{!isdelete}}" bindtap="deletehandlerx">X</view>

</view>

• 4、要在子组件页的js中注册一下父组件传来的属性，并编写各类事件的回调函数

mycomp.js

Component({
  /**
 * 组件的属性列表
   */
  properties: {
    teacherItem:Object
  },

  /**
 * 组件的初始数据
   */
  data: {
    isdelete:false
  },

  /**
 * 组件的方法列表
   */
  methods: {
    deleteItemHandler(){
      this.setData({
        isdelete:true
      })
    },
    /*
    undeleteItemHandler(){
      this.setData({
        isdelete:false
      })
    },
    */
    deletehandlerx(){
      //使用弹窗提示API
      wx.showModal({
        title:'删除确认',
        content:'是否确认删除该教师',
        success:(res)=>{
          if(res.confirm){
            wx.showToast({
              title: '你已经成功删除了该教师',
            })
            this.setData({
              isdelete:false
            })
            //要从子组件向父组件传值删除父组件js的数据
          }else if(res.cancel){
            console.log('点击了取消');
          }
        },
      })
    }
  }
})

• 5、应为使用了css动画，一并把组件css代码附上

/* components/mycomp.wxss */
.mycomp{ width: 100px; height: 130px; background-color: royalblue; border:1px solid gray;
border-radius: 10px; margin:5rpx 0}
.mycomp .image{width: 100px; height: 100px; margin:0; border-radius: 50%; border:3px solid white; box-sizing: border-box;}
.mycomp .text{ text-align-last: center; color: white; display: block;}
.deltex{position: relative; top:-130px; right:-88px;color:white; background-color:rgb(20, 71, 224); border-radius: 5px;
  width:20px; height:20px; font-size: 16px; line-height: 20px; text-align: center;}
.deleteItem{
  animation:ani-dou 1s 0s infinite;/*执行ani-dou动画，执行1s，延时0s 无线循环*/
}

/*d定义关键帧动画*/
@keyframes ani-dou{
  0%{/*0%是时间上的0%，下面执行rotate的transform*/
    transform:rotate(0deg)
  }
  10%,20%,30%,40%,50%{
    transform:rotate(-4deg)
  }
  15%,25%,35%,45%,55%{
    transform:rotate(4deg)
  }
  100%{/*0%是时间上的0%，下面执行rotate的transform*/
    transform:rotate(0deg)
  }

效果：

10、另一个事件绑定，在上一层上绑定事件

wxml

<view  bindtap="taphandler">
  <courselist id="1" data-title="第一个课程"/>
  <courselist/>
  <courselist/>
  <courselist/>
</view>

js

  taphandler(event){
    //console.log(event.currentTarget.id,event.currentTarget.dataset.title);
    console.log(event.target.id,event.target.dataset.title);
  },