- image
vertical-align: middle
清除image隐藏的高度间距
自定义组件
开启多slot
// 组件的index.js
Component({
....
options: {
"multipleSlots": true // 开启多slot
},
....
})
// 调用的index.json
{
"navigationBarTitleText": "专栏列表",
"usingComponents": {
"no-more": "/components/no-more/index"
}
}
// index.wxml
// 传值 slot
<no-more id="noMore" hasMore="{{hasMore}}">
<view slot="name01"></view>
</no-more>
// index.js
onLoad: function (options) {
this.noMore = this.selectComponents("noMore")
this.noMore.方法
}
})
// 生命周期
// 处理函数
onPullDownRefresh: function() {
// 监听用户下拉刷新动作
}
onReachBottom: function() {
// 监听页面上拉触底加载事件
}
onShareAppMessage: function() {
// 用户点击右上角转发
}
onPageScroll: function() {
// 页面滚动触发事件的处理函数
}
onTabItemTap: function() {
// 当前是 tab 页时，点击 tab 时触发
}
其他
// 开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问
开启下拉刷新:
(在`app.json` 或` page页面.json`里配置)
`enablePullDownRefresh: true`
// 监听`onPullDownRefresh`下拉刷新事件
// 发送请求 获取新数据后 `wx.stopPullDownRefresh()` 停止下拉刷新
// 监听`onReachBottom`事件: 上拉触底
// 监听`onPageScroll`事件: 页面滚动
页面已滚动距离scrollTop
// 监听`onShareAppMessage`事件: 用户转发
* 只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
* 用户点击转发按钮的时候会调用
* 此事件需要 return 一个 Object，用于自定义转发内容
// 如
onShareAppMessage: function() {
return {
title: '当前小程序名称',
path: '/page/user?id=123' // 当前页面的完整路径
}
}
事件绑定`bindtap="viewTap({{参数}})"`
> `this.route ` 当前页面路径
`this.setData({ name: '名称' }, [回调函数])` 修改数据
回调函数会在setData对界面渲染完毕后调用
要修改的数据不需要在`this.data `中预先定义
* 单次设置的数据不能超过1024kB 即1m
* 不要把data的值设置为undefined
3. 路由
`getCurrentPages()` 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
* TabBar 页会缓存 再次切换打开只有onShow事件
* navigateTo, redirectTo 只能打开非 tabBar 页面。
* switchTab 只能打开 tabBar 页面。
* reLaunch 可以打开任意页面。
* 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
* 调用页面路由带的参数可以在目标页面的onLoad中获取
视图层
* 数据绑定
// 可以在{{}}里直接进行组合，构成新对象或者数组
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
// 最终组合成数组[0, 1, 2, 3, 4]
// 用扩展运算符 ... 来将一个对象展开
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
b: 3,
c: 4
}
}
})
// 最终组合成的对象是 {a: 1, b: 3, c: 4, e: 5}
// 如果对象的 key 和 value 相同，也可以间接地表达
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
data: {
foo: 'my-foo',
bar: 'my-bar'
}
})
* 注意： 花括号和引号之间如果有空格，将最终被解析成为字符串
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
// 等同于
<view wx:for="{{[1,2,3] + ' '}}">
{{item}}
</view>
- 列表渲染
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key的值以两种形式提供
- 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
如:wx:key="unique"前面不用写item - 保留关键字
*this代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字
如：数组为[1,2,3,4] , ['a', 'b', 'c', 'd']
- 注意：当
wx:for的值为字符串时，会将字符串解析成字符串数组
<view wx:for="abcd">
{{item}}
</view>
等价于
<view wx:for="{{['a','b','c','d']}}">
{{item}}
</view>
- 注意：花括号和引号之间如果有空格，将最终被解析成为字符串
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}" >
{{item}}
</view>
- 条件渲染
// 注意：<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> // 多个元素if判断 <block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block><block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
需要频繁切换显示隐藏时，使用class// wxss .show display: block .hide display: none // wxml <view class="{{disHidden? 'show' : 'hide'}}"> // js data: { disHidden: false } - 模板:
定义模板
使用模板<template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template><template is="msgItem" data="{{...item}}"/>is属性可以使用{{}}语法，来动态决定具体需要渲染哪个模板：<template name="odd"> <view> odd </view> </template> <template name="even"> <view> even </view> </template> <block wx:for="{{[1, 2, 3, 4, 5]}}"> <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/> </block>
引用模板
// item.wxml
<template name="item">
<text>{{text}}</text>
</template>
// index.wxml
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
- 事件:
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> Page({ tapName: function(event) { console.log(event) } })
{
"type":"tap", // 事件类型
"timeStamp":895, // 事件生成时的时间戳
"target": { // 触发事件的组件的一些属性值集合
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"currentTarget": { // 当前组件的一些属性值集合
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"detail": { // 自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入 点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离
"x":53,
"y":14
},
"touches":[{ // 触摸事件，当前停留在屏幕中的触摸点信息的数组
"identifier":0, // 触摸点的标识符
"pageX":53, // 距离文档左上角的距离，文档的左上角为原点
"pageY":14,
"clientX":53, // 距离页面可显示区域（屏幕除去导航条）左上角距离
"clientY":14
}],
"changedTouches":[{ // 触摸事件，当前变化的触摸点信息的数组
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}
touchstart 触摸动作开始
touchmove 触摸后移动
touchcancel 触摸动作结束
tap 触摸后马上离开
longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart 会在一个 WXSS animation 动画开始时触发
animationiteration 会在一个 WXSS animation 一次迭代结束时触发
animationend 会在一个 WXSS animation 动画完成时触发
注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件
catch事件绑定可以阻止冒泡事件向上冒泡
如： catchtap="selectItem"
捕获事件为capture-bind、capture-catch
如： capture-bindtap="selectItem"
// 捕获事件从未到内执行
如：
<view id="outer" bind:tap="handleTap1">
outer view
<view id="inner" bind:tap="handleTap2" >
inner view
</view>
</view>
// 点击inner view 将调用handleTap1、handleTap2
组件定义数据格式为data-name-beta="内容"
获取时
Page({
selectItem(e){
let name = e.currentTarget.dataset.nameBeta
// - 会转为驼峰写法 nameBeta
// 大写会转为小写
}
})
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
