• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序之wxml的基本使用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

概览:

基本功能

我们一般用到的就是:页面布局,引用数据

引用数据

一般引用的数据是js中声明的data块的数据

引用方式是通过使用 “{{…}}”

比如:

列表渲染(wx:for)

一般的控件渲染就不说了,这里说列表渲染主要是在控件中用到了for循环

wx:key与wx:key="*this"

参考

一般的,wx:key是跟着wx:for的,值一般是item的唯一标识,一般这个属性是item中唯一的且不会改变的字符串或者数字

wx:key="*this"也就是在item自己就是字符串和数字的时候使用,表示用自己来当这个唯一标识

使用wx:key和不使用wx:key的区别可以看下博客,简单来说,就是:

  1. 使用了wx:key的时候,当列表发生改变的时候,老的item不会重绘,保留老item的内容和状态
  2. 不使用wx:key的时候,当列表发生改变的时候,所有列表重绘,老item的状态不会保留
  3. 最明显的表现应用就是在item中进行了状态切换的时候

复杂列表(block配合wx:for)

再命名(wx:for-index和wx:for-item)

比如:

wx:for-index表示用idx命名当前角标

wx:for-item表示用itemName来命名当前的item

不声明的话,默认item的引用就是item

条件渲染(wx:if)


只会展示符合条件的View,比如上面的例子中,只会展示第三个View

复杂布局(block配合wx:if)

参考上面的

隐藏和显示(hidden配合wx:if)

比如:

模板(template)

这个模板是针对组件的重用的

模板的声明

定义一个wxml文件,作为公用的wxml,内容标签是template,特点是有一个name属性

模板的引用

在需要引用模板的页面,也就是page.wxml引入模板文件,引用方式是import

然后在填充模板的地方使用template标签,使用is指定模板的名称,data传递数据

举例

我们先看一下数据:

模板的声明:

在页面,也就是page.wxml中使用import引入模板文件,然后在填充控件的地方:

is指定了模板的名称

data指定也传递的data中的数据,注意表示方式

多模板选择

比如:


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
【Uni-App社区小程序】006-引入CSS动画库发布时间:2022-07-18
下一篇:
小程序view标签内容 文本过长,自动换行的问题发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap