1. `wx:for `
数组中各项的数据重复渲染该组件
默认数组的当前项的下标名默认为index,数组当前项的变量名默认为item
```
<view wx:for="{{array}}">
{{index}}{{item.name}}
</view>
```
```
Page({
data: {
array: [{
name: 'chengchao',
}, {
name: 'jiangwei'
}]
}
})
```
2. `wx:for-item` `wx:for-index`
使用`wx:for-item`可以自定义数组当前元素的变量名
使用`wx:for-index` 可以自定义数组当前下标的变量名
```
<view wx:for="{{array}}" wx:for-item="myItem" wx:for-index="ind">
{{ind}}{{myItem.name}}
</view>
```
3. `block wx:for` 渲染一个包含多节点的结构块
```
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
```
```
//希望数据动态更新,给每一个节点,添加唯一的标识符加上wx:key
<view wx:for="{{array}}" wx:for-item="item" wx:key="index">
{{index}}{{item.name}}
</view>
```
- 小程序配置
- 1 开始第一个小程序
- 2 navigationBar
- 3 flex弹性布局
- 4 响应式长度单位: rpx
- 5 添加新的页面
- 6 配置tabBar
- 7 欢迎页跳转到有tabBar的页面
- 小程序语法
- 1. 数据绑定
- 2. 列表渲染
- 3. 条件渲染
- 4. 小程序和vue data读取方式
- 5. 属性的数据绑定方式
- 6. bindtap与catchtap
- 7. event.targe和event.currentTarget
- 组件&demo
- 1. scroll-view
- 2. swiper
- 3. 制作一个音乐播放组件
- 4. chooseImage配合缓存创建头像
- 5. 获取input表单value(搜索栏实现)
- 6. map
- 7. Form表单提交获取数据
- 小程序API
- 1. 缓存 wx.setStorageSync
- 2. 选择图片 wx.chooseImage
- 3. 加载 wx.showLoading
- 4. 弹出框 wx.showToast
- 5. 分享与获取用户信息
- 项目结构类
- 1. 代码封装
- 2. wx.request请求数据分离
- 3. 组件
- 1. slot
- 2. 父元素传递class到子元素
- 3. 子组件向父组件传值
- 4. wxml中引用wxs封装方法