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


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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
dess中一个简单的多路委托的实现
Jul 20 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
微信小程序页面间传递数组对象方法解析
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截取指定2个字符之间字符串的方法
2015/04/15 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
广告显示判断
2006/08/31 Javascript
javascript 写类方式之一
2009/07/05 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
javascript验证身份证号
2015/03/03 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
OpenCV 边缘检测
2019/07/10 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
师德模范事迹材料
2014/06/03 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
离婚协议书格式
2014/11/21 职场文书
公司股份合作协议书
2014/12/07 职场文书