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

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

条件渲染：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本身是一个唯一的字符串或数字。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序学习笔记之函数定义、页面渲染图文详解

    微信小程序学习笔记之函数定义、页面渲染图文详解

    前面一篇介绍了微信小程序目录结构.基本配置.这里再来介绍一下函数定义.页面渲染. 小程序逻辑app.js:定义App函数用来注册一个小程序,包含全局数据和函数,指定小程序的生命周期回调等.整个小程序只有一个 App 实例,全部页面共享使用. //app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStor

  • 微信小程序使用for循环动态渲染页面操作示例

    微信小程序使用for循环动态渲染页面操作示例

    本文实例讲述了微信小程序使用for循环动态渲染页面操作.分享给大家供大家参考,具体如下: 先来看看运行效果: 这种列表效果可以说是最常见的一种,肯定不是我们一个一个写上去,这就用到了我们这次要说的for循环渲染了 其实也很简单,我就直接上代码了 wxml部分: <view wx:for='{{languageList}}' class='hua' data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'> <text

  • 微信小程序遇到修改数据后页面不渲染的问题解决

    微信小程序遇到修改数据后页面不渲染的问题解决 前言: 去年从小程序一开始出来到现在,我一直是比较看好和保持一定的关注度的,小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的,这是我第一次有意识的亲眼目睹了一个新技术的发展,还是感觉比较荣幸的. 唱衰小程序?我的观点是肯定不可能,因为现在每天提交审核的小程序还在继续增加,而且有些小程序确实很好用,比如摩拜的扫码骑车,还有我上周去KTV,直接用小程序扫屏幕上的二维码,就可以绑定房间,然后通过小程序点歌,切歌,发表情包等方便好玩的事情,所以,

  • 微信小程序渲染性能调优小结

    网页的性能优化是前端开发老生常谈的热门话题,其中微信小程序因其页面双线程架构设计,所以性能优化的手段跟传统的 H5 应用不太一样.今天主要介绍一下微信小程序页面双线程架构的特性给页面渲染带来的一些影响,以及应对的一些渲染性能调优策略.为了叙述方便,下文会把微信小程序简称为小程序. 小程序的双线程架构 与传统的浏览器Web页面最大区别在于,小程序的是基于 双线程 模型的,在这种架构中,小程序的渲染层使用 WebView 作为渲染载体,而逻辑层则由独立的 JsCore 线程运行 JS 脚本,双方并不

  • 微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例

    微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例

    本文实例讲述了微信小程序使用wx.request请求服务器json数据并渲染到页面操作.分享给大家供大家参考,具体如下: 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可.现在给大家讲一下,微信小程序的wx.request进行服务器数据请求的用法: 官方文档给出了示例代码,但是我这边自己进行了简单的处理: index.js Page({ data: { }, onLoad: fun

  • 微信小程序调用天气接口并且渲染在页面过程详解

    微信小程序调用天气接口并且渲染在页面过程详解

    前两天写了关于组件库 iView Weapp的教程,其实也就是把文档上的例子拿出来体验了一遍,今天写一个具体的例子,调用一个免费的天气接口的api,并且把所获取的内容展示在前端的界面,前端界面与 iView Weapp结合,展示的一个小的demo. 先上效果 开始写代码: 1:找打一个免费的天气接口 免费接口api: https://www.apiopen.top/api.html#top https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%

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

    这篇文章主要介绍了微信小程序页面渲染实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 条件渲染:wx:if, wx:elif, wx:else <view wx:if="{{list.length > 5}}" >1</view> <view wx:elif="{{list.length > 2}}">2</view> <view wx:els

  • 微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图 从左边的列表页调到右边的详情页 二.页面之间的跳转 首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi

  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

  • 微信小程序页面传多个参数跳转页面的实现方法

    这里举例跳转两个参数 传递多少个也可以 这里传参数 我写作 data-item data-id 来绑定 同事加了点击事件bindtap 在index.js 在 data 里我写的是假数据 在跳转页面的函数里传e 后面定义的东西根据e来确定 可以在console打印 console.log(e) 这样我们就拿到了 传递的数据 然后进行定义等 这里跳转详情页的函数 wx.navigateTo 这是一种跳转的方法 tabBar页面要用wx.switchTab 路径后面加上 jsonStr 等 在跳转的

  • 详解微信小程序「渲染层网络层错误」的解决方法

    详解微信小程序「渲染层网络层错误」的解决方法

    问题描述: 情况是这样的,我需要在小程序中通过image标签显示三张我的图片,毫无疑问,其重点部分肯定在image的src属性上,请看思路分析: 我们可以新建一个专门放图片的文件夹,然后将我们项目所需要的图片文件全部放到这里.但是这会引发一个问题:微信官方对上线的小程序有大小的限制,所以如果你只是本地跑跑,那无可厚非,你开心就好:如果要做上线,这种方法的可行度不高: 使用外部链接.成功发布过小程序的小伙伴们都知道,外部链接必须使用https协议,且所使用域名必须设置在request合法域名列表中

  • 微信小程序页面间值传递的两种方法

    微信小程序页面间值传递的两种方法

    一:url带参数传递 与前端语言一样,小程序页面间的传递可以通过在路由url后接参数,路由的同时会将参数一并传递到新的页面. index.wxml: <!--index.wxml--> <view class="container"> <!-- 使用navigator组件 --> <navigator url="../demo/demo?title=参数传递">title=参数传递</navigator>

  • 微信小程序页面间传递数组对象方法解析

    这篇文章主要介绍了微信小程序页面间传递数组对象方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 方法1:A页面跳转链接添加参数,B页面onLoad 接收 方法2:设置全局变量 globalData,用的少,一般适用于全局共享的一份信息,如用户open_id等 // A页面 // 数组.对象都需要stringify var listData = JSON.stringify(that.data.listData) var taskArray

  • 微信小程序页面间传值的实现方法示例

    小程序页面间传值 大家晚上好,说晚上好是因为是在晚上写的,说这句话是因为这句话开篇不那么突然.那么小程序的页面间传值,在我使用这段时间里,我就非常的主观的把它们分为wx.navigateTo和非wx.navigateTo的,因为wx.navigateTo有一个事件参数event,我从当前页跳转到下一页,如果需要能返回,我都用的wx.navigateTo,那这个event作用嘛就是可以接收,下一页返回回来的参数的.像

  • 微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值 微信小程序导航有两种形式:一种是在写在js中进行跳转,另一种是写在wxml页面中进行跳转. 1.js导航 (1).wx.navigateTo(OBJECT) :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navigateTo({ url: 'test?id=1' }) 获取传递的值: //test.js Page({ onLoad: function(option){ console.log(option.id)

  • 微信小程序 页面传值详解

    微信小程序 页面传值详解

    微信小程序 页面传值详解 一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如 这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受. 如果需要传多个参数, 用 & 链接即可 如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递. 注 : 如果转化的字符串中 有"?"这个符号, 则只会传递"?"以前的字符串, 这个问题我猜想可能

随机推荐