微信小程序如何使用wx:for实现多元素动态显示

在微信小程序实现过程中,常常遇到需要动态显示多元素的需求,比如,点餐小程序的商品种类,当商家创建或删除产品种类时,小程序需要同步更新,如果每次都在wxml创建或删除元素,会很麻烦,可以使用wx:for实现多元素动态显示。

如下所示:

.wxml:

在wxml中使用wx:for遍历item_list数组中的元素信息,每个元素创建一个view元素。

item是默认的数组当前元素名,index是默认的数组当前指针名,通过wx:for-item和wx:for-index可以重命名元素和指针名字,在有多层次wx:for时可以避免使用混淆。

html 复制代码
<scroll-view class="menu" scroll-y="true">
    <view wx:for="{{item_list}}">{{item.name}}</view>
</scroll-view>

.js:

在js中可以定义和更新item_list的值,更新后wxml的元素自动变更。

html 复制代码
  data:{
    item_list: [
      {
        type: "food",
        name: "牛肉粉"
      },
      {
        type: "snack",
        name: "小吃"
      },
      {
        type: "add",
        name: "加餐"
      },
      {
        type: "drink",
        name: "饮料"
      },
    ]}

以上内容显示如下:

更多微信小程序内容欢迎关注我或订阅专栏。

相关推荐
HerayChen2 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘6 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡9 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼12 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857515 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027715 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__21 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域2 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN2 天前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节