微信小程序的事件对象属性，事件绑定

微信小程序

小程序简介
1 小程序与普通网页开发的区别？
1运行环境的不同：网页运行在浏览器，小程序运行在微信环境；
2.API 不同：小程序无法调用 DOM 和 BOM 的 API，但可以调用微信环境提供的 API；
开发模式：网页是 浏览器+代码编辑器，小程序开发模式是小程序账号；

<!-- 轮播图 -->
<view class="banner">
  <swiper class="swiper" indicator-dots="{{indicatorDots}}" ‘
    autoplay="{{autoplay}}" interval="{{interval}}"
    duration="{{duration}}" 
    circular="{{circular}}" 
    indicator-color="rgba(0, 0, 0, .3)"
    indicator-active-color="#fff">
    <block wx:for="{{imgUrls}}" 
    wx:for-index="index" 
    wx:key="index">
      <swiper-item>
        <image class="slide-image" 
        src="{{item.image}}"
         mode="aspectFill"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

js

data:{
	imgUrls: [
	  '/images/ad1.jpg',
	  '/images/ad2.jpg',
	  '/images/ad3.jpg',
	  '/images/ad4.jpg',
	  '/images/ad5.jpg',
	  '/images/ad6.jpg',
	  '/images/ad7.jpg',
	],
	indicatorDots: true, // 是否显示面板指示点
	autoplay: true,      // 是否自动切换
	circular: true,      // 是否采用衔接滑动
	interval: 3000,      // 自动切换时间间隔
	duration: 1000,      // 滑动动画时长
}

css

.banner .swiper {
  height: 330rpx;
}
.banner .swiper .slide-image {
  width: 100%;
  height: 100%;
}

事件对象属性

常用事件
tap：bindtap 或 bind:tap
input：bindinput 或 bind:input
change：bindchange 或 bind:change

type：事件类型
timeStamp：页面打开到触发事件所经过的毫秒数
target： 触发该事件的源头组件，属性值集合
currentTarget：当前事件绑定的组件，属性值集合
detail：额外的信息

bindtap 的使用
1. 为组件绑定 tap 触摸事件，为文本框绑定输入事件
2. 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event( e )来接 收, 和 data 平级

双向数据绑定：
步骤: 
   1.定义数据
   2. 渲染结构, 绑定 data 中的数据
   3. 美化样式
   4. 监听 input 事件
 
代码:
  data: {   msg: '请输入...'   }
  <input class="ipt2" placeholder="{{msg}}" bindinput="inputHandler">
  </input>
  inputHandler (e) {
    console.log(e.detail.value);
  },  

事件绑定
条件渲染
1. block包裹性容器：条件成立渲染

<block wx:if="{{ true }}">
 
<block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
</block>

wx:if：动态创建移除元素控制展示与隐藏

 wx:if 搭配 wx:elif 、 wx:else 
 
data:    type:2
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else="{{type === 0}}">保密</view>

. hidden：控制展示与隐藏

<view hidden="{{flag}}">true隐藏，false显示</view>

wx:if 和 hidden对比

wx:if
动态创建和移除元素，控制元素展示 / 隐藏
场景：控制条件复杂时使用

hidden
切换样式控制展示与隐藏，节点一直存在
场景：频繁切换

列表渲染

1. wx:for 指定数组，进行循环渲染
2. wx:for-index 手动指定索引名
3. wx:for-item 手动指定当前项名
4. wx:key=“id” 提高渲染效率

模板样式：rpx
布局使用 flex 布局，尺寸单位使用 rpx
( responsive pixel )是微信小程序独有的，用来解决屏适配的尺寸单位