微信小程式實例介紹之列表渲染

WBOY
發布: 2022-11-10 17:43:33
轉載
2551 人瀏覽過

本篇文章為大家帶來了關於微信小程式的相關知識,其中主要介紹了關於列表渲染的相關內容,下面一起來看一下,希望對大家有幫助。

微信小程式實例介紹之列表渲染

【相關學習推薦:小程式學習教學

wx:for

透過wx:for可以根據指定的數組,循環渲染重複的元件結構,語法範例如下:

<view> 
    索引是:{{index}} 当前项是:{{item}}
</view>
登入後複製
登入後複製

預設情況下,目前循環項目的索引以index表示;目前循環項用item表示hacker.wxml 定義一個for迴圈存取數組

<view> 
    索引是:{{index}} 当前项是:{{item}}
</view>
登入後複製
登入後複製

hacker.js 定義一個陣列

Page({    data:{        arr1:['a','b','c']
    }
})
登入後複製
登入後複製

運行結果如下:

微信小程式實例介紹之列表渲染

#手動指定索引和目前項目的變數名稱

使用wx:for-index可以指定目前循環項的索引的變數名 使用wx:for-item可以指定目前項目的變數名 範例程式碼如下:

<view>
    索引是:{{idx}}  当前项是:{{itemName}}
</view>
登入後複製
登入後複製

hacker.wxml

<view>
    索引是:{{idx}}  当前项是:{{itemName}}
</view>
登入後複製
登入後複製

hacker.js

Page({    data:{        arr1:['a','b','c']
    }
})
登入後複製
登入後複製

運行結果如下:微信小程式實例介紹之列表渲染

##wx:key的使用

類似於Vue列表渲染中的:key,小程式在實作清單渲染時,也建議為渲染出來的清單項目指定唯一的key值,從而提高渲染的效率,範例程式碼如下: hacker.wxml

<view>{{item.name}}</view>
登入後複製
hacker.js

Page({    data:{        userList:[
            {id: 1,name: 'hacker'},
            {id: 2,name: 'meng'},
            {id: 3,name: 'yuan'}
        ]
    }
})
登入後複製
運行結果如下:

【相關學習推薦:微信小程式實例介紹之列表渲染小程式學習教學

以上是微信小程式實例介紹之列表渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.im
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板