微信小程序列表渲染 小程序wxml列表渲染详解-手机电子游戏网址

小程序开发

2021-05-14

  今天厦门在乎科技为大家带来微信小程序wxml怎么进行列表渲染,可能对于刚接触小程序开发项目的人来说,还不是很熟悉,有开发经验的也可以重新复习一下。

微信小程序列表渲染 小程序wxml列表渲染详解


  小程序wxml列表渲染详解:

  1.变量声明

  在页面js文件中声明要遍历的数组变量

  data: {

  list:['苹果','香蕉','西瓜'],

  person:{

  name:"小明",

  age:20

  }

  },

  2.语法

  在wxml文件的标签中插入 wx:for="{{list}}"

  循环数组时:

  index:索引

  item:循环项

  遍历对象时:

  index:key

  item:键值

  {{index}}:{{item}}

  3.为列表项绑定key

  类似于vue,微信小程序列表渲染是希望为每个列表项绑定一个key

  语法:wx:key="{{}}"

        

            {{index}}:{{item}}

        

        

            {{index}}:{{item}}

        

微信小程序列表渲染 小程序wxml列表渲染详解


  4.自定义下标名称和列表项名称

  语法:

  wx:for-index="自定义的下标名称"

  wx:for-item="自定义的列表项名称"

        

            {{key}}:{{value}}

        

  5.外层包裹的元素 block

  如果列表项内部有多个标签,而你不需要循环的时候都生成一个外层的view元素,可以使用block。他不会渲染成真正的dom元素,类似于vue的template。

        

            {{key}}:{{value}}

        

        

            {{key}}:{{value}}

        

微信小程序列表渲染 小程序wxml列表渲染详解


  以上就是今天为大家带来的关于“微信小程序列表渲染 小程序wxml列表渲染详解”全部内容,在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件,想要了解更多关于小程序列表渲染的内容,欢迎关注厦门在乎科技-专注小程序、app、网站开发

即刻联系「在乎科技」专业项目经理为您提供产品咨询和项目报价!

contact us

联系手机电子游戏网址

联系电话:

131-6399-9993

电子邮箱:

公司地址:

厦门市思明区湖滨南路388号国贸大厦34d单元

公司地址