wx:if和hidden 的区别

这篇具有很好参考价值的文章主要介绍了wx:if和hidden 的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

wx:if和hidden都是用来控制微信小程序中的元素是否显示

wx:if和hidden的区别

一、

!wx:if

  wx:if 是惰性的,初始条件为false时,框架什么也不做,在条件第一次为true时才开始局部渲染。

   

wx:if和hidden的区别,微信小程序,小程序

此时如果isShow这个条件为false 那么图中的盒子将不会显示。

 !hidden

hidden:组件始终都会被渲染,只是根据变量来简单的控制显示与隐藏。

wx:if和hidden的区别,微信小程序,小程序

hidden的初始条件为false时也会进行渲染。

二、

wx:if是通过创建和销毁来达到显示和隐藏,hidden是直接控制的显示和隐藏。

如果频繁切换的话,使用wx:if会消耗更多的资源,因为每一次切换页面,他都会渲染,隐藏时就会销毁,如果切换不频繁的话,可以使用wx:if,可以避免一下渲染过多元素,造成页面加载速度缓慢,如果频繁切换可以使用hidden,避免浪费资源。文章来源地址https://www.toymoban.com/news/detail-616669.html

到了这里,关于wx:if和hidden 的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序的条件判断wx:if、wx:elif以及for循环wx:for

    微信小程序中的条件判断与vue的v-if、v-else语法相似,其语法格式为: 直接实战: 官方文档是这么定义的: **重点1:默认数组当前项的变量名为:item;默认数组当前项的下标变量名为index; **重点2:如果不想使用默认的名:按照以下操作自定义变量名 本人习惯使用默认,实

    2024年02月14日
    浏览(47)
  • 微信小程序---缓慢展开和收起效果(不需要wx:if控制实现)

    效果一: 点击中间问题,在中间缓慢展开 ,将下面往下撑开,点击再次收起效果 效果二: 点击添加商品,缓慢向下展开,点击收起,缓慢将下面收起效果 1、实现的原理: 通过height高度来控制展开或收起,当不需要展示时,高度为0,超过的部分用overflow: hidden;来隐藏,可

    2024年02月17日
    浏览(61)
  • 微信小程序之WXML 模板语法之数据绑定、事件绑定、wx:if和列表渲染

    学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需写作干货注入能量… 热爱写作,愿意让自己成为更好

    2024年01月22日
    浏览(61)
  • 微信小程序 wx.showModal

    微信小程序--wx.showModal_海轰Pro的博客-CSDN博客

    2024年02月15日
    浏览(53)
  • 微信小程序-支付(wx.requestPayment)

    (学习中,持续更新) 直接调用的接口为wx.requestPayment(小程序前端调用)。 官方文档的请求例子为: 其中paySign官方文档给出了一个例子: MD5(appId=wxd678efh567hg6787nonceStr=5K8264ILTKCH16CQ2502SI8ZNMTM67VSpackage=prepay_id=wx2017033010242291fcfe0db70013231072signType=MD5timeStamp=1490840662key=qazwsxedcrfvtg

    2024年02月12日
    浏览(40)
  • 微信小程序-登录(wx.login)

    用户微信登录小程序有两种情况,分别为弹出登录提示和不弹出登录提示两种。弹出登录提示的情况下,用户确定后会向后台传入更多参数,例如用户昵称等。不弹出登录提示只能获取到用户的临时登录凭证code。主要根据第二种情况进行描述。 这个code具有时效性,能用于区

    2024年02月15日
    浏览(55)
  • 微信小程序本地存储(wx.setStorage)和(wx.setStorageSync)

     在微信小程序中,可以使用本地存储来保存一些数据比如用户状态,姓名,性别等; 本地存储主要包括两种方式:缓存和本地数据存储。 缓存 缓存是一种快速访问内存的临时存储机制,可以有效地提高应用程序的响应速度。在微信小程序中,可以使用 wx.setStorage 方法和

    2023年04月18日
    浏览(100)
  • 微信小程序如何实现兼容----wx.getSystemInfoSync、 wx.getSystemInfo、wx.canIUse

    小程序的宿主环境一直在迭代更新,提供更多的能力给开发者去完成更多的事情,所以你的小程序会运行在不同版本的宿主环境下。为了让你的小程序在不同环境下都能提供相应的服务,我们需要来了解一下在小程序中如何实现兼容办法。 1.针对不同手机进行程序上的兼容

    2024年02月09日
    浏览(51)
  • 微信小程序wx:for 的使用以及wx:key绑定

    wx:for基本使用 wx:for-item和wx:for-index重新命名item和index wx:key两种绑定方式以及注意事项 wx:for基本使用 业务层数据 视图层 wx:for遍历时候每一项名称为 item 每一项索引名称为 index wx:for-item和wx:for-index实现item和index重命名 wx:for-item=\\\"str\\\" 将原来名称 item 修改成 str wx:for-index=\\\"i 将原来

    2024年02月11日
    浏览(79)
  • 微信小程序wx.getUserProfile的用法

    接触了以前开发的一个微信小程序,发现wx.getUserInfo这个官方接口不能获取用户的信息,我重新创建了一个新的项目,发现可以用wx.getUserProfile这个官方接口来获取用户信息,具体操作如下:1.首先在xxxx.jslim里面定义初始值,isAuthorization是为了解决每次登陆都需要获取用户信息

    2024年02月14日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包