1. 程式人生 > >微信小程式wx:for和wx:for-item的正確用法

微信小程式wx:for和wx:for-item的正確用法

wx:for="{{list}}"用來迴圈陣列,而list即為陣列名wx:for-item="items" 即用來定義一個迴圈過程中每個元素的變數的

如果是一維陣列,按照如下方式迴圈出來:

<view wx:for="{{list}}">

{{index}} {{item.name}}

</view>

以上程式碼中,item即為list的別名。

如果是二維甚至多維陣列,按照如下方式迴圈:

<view wx:for="{{parentList}}">

{{item.id}}

<view wx:for="{{item.childList}}"
wx:for-item="items"> {{items.name}}{{item.account}} </view> </view> for (var i = 0 ; i < list.length; i++) { var xxx = list[i]; }

等同於

<view wx:for="{{list}}" wx:for-item="xxx"></view>

謹記:wx:for是迴圈陣列,wx:for-item即給列表賦別名

以下為幾個錯誤使用,請大家謹慎使用:

1.直接用wx:for-item ,這樣是迴圈不出來列表的

<view wx:for-item="{{list}}">

{{index}} {{item.name}}

</view>

2.子迴圈中慎用wx:for-item

<view wx:for="{{parentList}}">

  {{item.id}}

  <view wx:for-item="{{item.childList}}" wx:for-item="items">

  {{items.name}}{{items.account}}

  </view>

</view>

相關推薦

程式上傳圖片wx.chooseImagewx.uploadFile

wxml: <view class="container"> <view class='photo-wrap'> <view class='photo-image-wrap photo-image-wrap

程式:列表渲染 wx:for

wx:for 也可以巢狀,下邊是一個九九乘法表 <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">

程式資料請求方法wx.request

<view wx:for='{{images}}' wx:key = 'index'>     <image src='{{item.pic}}'></image>    &nbs

程式之條件渲染 wx:if與hidden比較

wx:if 1、在框架中,使用wx:if="{{condition}}" 來判斷是否需要渲染該程式碼: 如果條件成立就渲染 <view wx:if="{{condition}}">123</view> 2、在花括號中也可以寫條件判斷 <view>

程式用Promise解決wx.request的非同步時序問題

在app.js中寫一個公用方法(例如獲取使用者資訊),在頁面中要根據使用者資訊變動頁面顯示內容。 由於網路和非同步的問題,經常發生資料獲取在改動頁面顯示內容的程式碼之後。 為了解決這個時序非同步的問題,採用了Promise。 注意:網上查到微信小程式已於2017.12支

程式之音訊播放-wx.createInnerAudioContext()

咱們先看看官方示例地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/createInnerAudioContext.html建立innerAudioCon

程式 用Promise封裝wx.request(),簡化程式碼結構

在app.js中 新增自定義post方法 //app.js App({ //other code... /** * 自定義post函式,返回Promise *

程式圖表外掛(wx-charts)

微信小程式圖表外掛(wx-charts)基於canvas繪製,體積小巧支援圖表型別餅圖、線圖、柱狀圖 、區域圖等圖表圖形繪製,目前wx-charts是微信小程式圖表外掛中比較強大好使的一個。 wx-charts基於canvas繪製的微信小程式圖表外掛

程式​顯示操作選單wx.showActionSheet

wx.showActionSheet({ itemList: ['A', 'B', 'C'], success: function (res) { console.lo

程式 豆瓣專案中wx.request遇到的問題

首先說遇到的問題 index.js var API_URL = 'https://api.douban.com/v2/movie/top250'; Page({ data: { movies: [] }, onLoad: function () {

程式登入-openidunionid

本文轉自https://www.cnblogs.com/yaoyuqian/p/8203792.html   我們一般都是先獲取到微信的 unionid,然後再通過 unionid 去登入自己的網站,就可以關聯到使用者在自己網站上的 user_id,但是在小程式登入中,有時候可以獲取到

程式scroll-view元件

scroll-view的css樣式很坑   按照下邊這個 .scroll-view_H{   white-space: nowrap; } .scroll-view-item{   height: 200px; }

程式:globalDataStorage資料儲存中的坑

前言 在小程式登入是,將返回的使用者資料,儲存在globalData中和storage中。 // 儲存的資料是一個物件 wx.setStorageSync('userAuthData', user.data.data); this.globalData.userAuthData = user

程式實現顯示隱藏控制元件-頭像-取值-bindblur事件

微信小程式實現顯示和隱藏控制元件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> .wxss: .hidden { display: none; } .show { display: b

程式功能——展開收起檢視

效果圖 這裡我是控制只顯示2個數組 1.wxml 在{{!showMore? ‘hiddenmore’ : ‘showmore’}}中,如果showMore為false,則hiddenmore下的more-item列表都不顯示 // WXML <view cla

程式 - 相對定位絕對定位 - 相對路徑絕對路徑

微信小程式 - 相對定位和絕對定位 相對定位relative,絕對定位absolute 相對定位:元素是相對自身進行定位,參照物是自己. 絕對定位:元素是相對離它最近的一個父級元素進行定位. 相對定位:relative position:relative; /*相對定位*/ left:50

程式請求資料顯示載入

wx.showLoading({ title: '資料載入中。。。', }); //請求資料 wx.request({ url: 'https://douban.uieee.com/v2/movie/in_theaters', //地址

程式之購物車父子元件傳值及calc的注意事項

在做微信小程式時,覺得小組裡對購物車的實現不是很完美,就自己嘗試的寫了下,然後用到了父子元件傳值,父子元件傳值的話,和vue框架上是非常相似的,以及calc這個css函式,calc有個注意點,自己不怎麼用,一時間有差點忘了,這裡記錄下 1.效果圖 2.子元件實現

程式區別iosandroid平臺的方式

具體方式如下: const that = this; wx.getSystemInfo({ success(res) { if (res.platform == "ios")

程式this.datathis.setData()的區別

this.data是用於同步  this.setData({})是用於非同步,比如網路請求 比如this.data.itemData = itemData 這句話是什麼意思呢? 其實是把右邊的it