小程序看练代码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>

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

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)
  }

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

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);
  },
上一篇:Redis基础使用


下一篇:Unity_AssetBundle笔记_(二)转(俗称AB包_个人笔记欢迎指正)