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

2023-01-26 15:03:56

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>

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

7、data-绑定数据

携带数据

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

  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、引用页应用数组，并传递子组件数据