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封裝方法