微信小程序的页面渲染(if/for)
下面,粗略的介绍一下微信小程序的条件渲染、列表渲染、数据绑定等,详细的内容大家可以去看微信小程序的API,在此只做简单描述,希望能帮助到大家
条件渲染
<!--wxml--> <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA </view>// page.js Page({data: {view: 'MINA'} })
block wx:if
block和template差不多,在控制台不可见标签
因为 wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。
<block wx:if="{{true}}"><view> view1 </view> <view> view2 </view> </block>
注意: <block/>
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
列表渲染
<!--wxml-->1.<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>//自定义数组循环<view wx:for="{{array}}"> {{item}} </view>// page.js Page({data: {zero:6,array: [1, 2, 3, 4, 5]} })
数据绑定
<!--wxml--> <view> {{message}} </view>// page.js Page({data: {message: 'Hello MINA!'} })
模板:
此处的template是虚拟的标签,在控制台的标签元素是看不到的,所以向该标签
内写内容是无法显示的只能通过如下方法用is调用
1.1<!--wxml--><template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}}</view></template>//表示控制以上name=staffName下的view的视图,其中data调用对象时用三个点表示<template is="staffName" data="{{...staffA}}"></template> <template is="staffName" data="{{...staffB}}"></template> <template is="staffName" data="{{...staffC}}"></template>// page.js Page({data: {staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}} })
1.2//is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板:
<template name="odd"><view> odd </view> </template> <template name="even"><view> even </view> </template><block wx:for="{{[1, 2, 3, 4, 5]}}"><template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/> </block>
2. <templateis="objectCombine"data="{{for: a, bar: b}}"></template>
Page({data: {a: 1,b: 2 } })
最终组合成的对象是 {for: 1, bar: 2}
3. 如果对象的 key 和 value 相同,也可以间接地表达。
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({data: {foo: 'my-foo',bar: 'my-bar' } })
最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}
转载于:https://www.cnblogs.com/Dark-fire-liehuo/p/9593406.html
微信小程序的页面渲染(if/for)相关推荐
- 微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义 以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
- 微信小程序列表数据渲染无效问题
我实在是太菜了隔了2,3个月没做,微信小程序的数据渲染竟然都不会用了 记住要让修改的数据立即生效只能用setData方法!! 下面转了一篇文章里面的内容,方便大家比较 转自:http://www.jb ...
- 微信小程序webview、渲染富文本
先说点题外话,本来是写在简书上面的文章,现在简书不支持发布了,只能在csdn上上传了.... WebView对于前端开发的小伙伴来讲肯定不陌生,功能是很轻大的,就是一个而普通的html界面.今天主要讲 ...
- 微信小程序之页面打开数量限制
微信小程序之页面打开数量限制 无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页 ...
- 微信小程序:页面传递中文出现乱码
微信小程序:页面传递中文 decodeURIComponent() 参考 微信小程序页面中文传参Option获取参数乱码问题
- 微信小程序 某个页面直接返回首页(微信小程序回退到首页)
微信小程序 某个页面直接返回首页(微信小程序回退到首页) 打开小程序后,到三级页面后点击左上角的返回按钮,能够直接返回到首页 正常 A -> B -> C 都是通过 wx.navigate ...
- 微信小程序富文本渲染(rich-text)换行失效
微信小程序富文本渲染(rich-text)换行失效 给rich-text标签加css 样式 white-space: pre;
- 微信小程序tabar页面不触发onShow
微信小程序tabar页面不触发onShow [场景]: 开发中,原本js里面没有onShow方法,后面加上了onShow, 除了第一次页面加载调用了onShow方法,之后切换页面都没有触发. [解决办 ...
- uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动 本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
最新文章
- dnf剑魂buff等级上限_剑魂完美换装BUFF!远古遗愿的用处很大么?
- UNIX再学习 -- XSI IPC通信方式
- python tqdm记录dataframe使用iterrows或iteritems循环行或循环列时的进度
- java中各种时间格式的转化
- Visual Entity 手册(二)安装
- LINUX下查看CPU使用率的命令[Z]
- XGBoost算法解析(非常详细)
- HBase跨版本数据迁移总结
- c语音10的n次方_在C语言中,10的n次方怎么表示?
- PDF免费压缩、在线压缩
- win10熄屏时间不对_Win10系统何如设置自动锁屏时间,教程来啦,windows10怎样设置熄屏时间...
- 电脑如何双开两个微信
- Javaweb学生信息管理系统(Mysql+JSP+MVC+CSS)
- ThinkPad E450 Fn键设置为传统方式
- Unity | 动画那些事儿
- Dremel和Hadoop
- 助力数据运营 | 京东支付-猎户数据监控平台
- 按头安利 好看又实用的婚礼婚庆ppt模板素材看这里
- 蚂蚁金服Java岗三面(电面.现场面.HR面)经验总结和分享
- 谷歌引擎表达式aviator简单demo
热门文章
- 互联网移动支付技术_安全架构图(安全技术/安全协议/加密技术)——转载图片...
- 20145227鄢曼君《网络对抗》Web安全基础实践
- React Native 常见问题集合
- ‘仿微信发表朋友圈’项目中登录功能的业务逻辑
- 五分钟带你摸透 Vue组件及组件通讯
- javaweb学习总结(四十五)——监听器(Listener)学习二
- 关于两个jar包中存在包名和类名都完全相同的jar包冲突问题
- 怎样下载C/C++的免费、开源且跨平台IDE——Code::Blocks
- 使用git pull文件时和本地文件冲突怎么办?
- linux下时间同步的两种方法分享