微信小程序页面渲染实现方法


Posted in Javascript onNovember 06, 2019

这篇文章主要介绍了微信小程序页面渲染实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

条件渲染:wx:if, wx:elif, wx:else

<view wx:if="{{list.length > 5}}" >1</view>
<view wx:elif="{{list.length > 2}}">2</view>
<view wx:else>3</view>

由于wx:if是一个控制属性,需要将它添加到一个标签上,如果要一次性判断多个组件标签,可以使用<block></block>标签将多个组件包装起来,并在上边使用wx:if 控制属性,

<block>
<view wx:if="{{list.length > 5}}" >1</view>
<view wx:elif="{{list.length > 2}}">2</view>
<view wx:else>3</view>
</block>

blcok 是一个包装元素,不会在页面做任何渲染。

hidhen:

在小程序中,hidden = "{{condition}}" 也能控制元素的显示和隐藏。为true隐藏,为false显示

<view hidden = "{{condition}}" >123</view>

列表渲染: wx:for

如果没有指定参数, 默认索引是index, 值是item

<view wx:for="{{userList}}" wx:key="index">索引是: {{index}}, 值是: {{item}}</view>
 
 data: {
  userList :['zhangsan', "lisi", 'wnagwu']
 }

手动指定索引和当前项的变量名:

<view wx:for="{{userList}}" wx:key="index" wx:for-index="i" wx:for-item="it">
 索引是: {{i}}, 值是: {{it}}
</view>
 
data: {
  userList :['zhangsan', "lisi", 'wnagwu']
 }

block wx:for 列表渲染

<block wx:for="{{userList}}" wx:key="index" wx:for-index="i" wx:for-item="it">
 <view>索引是: {{i}}, 值是: {{it}}</view>
</block>

key 在列表循环中的作用:

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如<input />)中输入内容,<checkbox/>的选中状态,徐奥使用 wx:key来指定列表中项目的唯一标识符。

当数据改变触发渲染层重新渲染的时候,会校正带有key的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身状态,并且提高列表渲染时的效率。

key值的注意点:

key值必须具有唯一行,且不能动态改变。

key的值必须是数字或字符串

保留关键子*this代表在for循环中的item本身,它也可以充当key值,但是有以下限制,需要item本身是一个唯一的字符串或数字。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js substr、substring和slice使用说明小记
Sep 15 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
微信小程序页面间传递数组对象方法解析
Nov 06 #Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 #Javascript
对vuex中getters计算过滤操作详解
Nov 06 #Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 #Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 #Javascript
vuex actions异步修改状态的实例详解
Nov 06 #Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 #Javascript
You might like
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
使用angular写一个hello world
2015/01/23 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
Python中设置变量访问权限的方法
2015/04/27 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
python实现按首字母分类查找功能
2019/10/31 Python
Python线程指南分享
2019/11/19 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
物业工程部岗位职责
2015/02/11 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python