微信小程序控制view隐藏显示的5种方法汇总

目录
  • 一、使用wx:if指令
  • 二、使用opacity属性
  • 三、使用display属性
  • 四、还有一种方式可以使用绝对定位
  • 五、使用hidden属性
  • 总结

一、使用wx:if指令

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签，我们可以使用一个标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<view wx:if="{{3>2}}">我是wx:if</view>

因为 wx:if 之中的模板也可能包含数据绑定，所有当 wx:if 的条件值切换时，小程序框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

　　同时 wx:if 也是惰性的，如果在初始渲染条件为 false，小程序框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

　　相比之下，hidden 就简单的多，组件始终会被渲染。

　　一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

二、使用opacity属性

<view style="opacity:{{opacity}}">我是opacity属性</view>

三、使用display属性

<view style="display:none">每个组件都有的display属性</view>//元素不显示
　　
<view style="display:block">每个组件都有的display属性</view>//元素显示
　　
<view hidden="{{'adfad'=='adf'}}">每个组件都有的dy属性</view>//当然在{{}}表达式中也可以使用一些简单的运算。

四、还有一种方式可以使用绝对定位

使元素脱离文档流，通过改变元素的top和left属性值控制元素的显示与否

五、使用hidden属性

在页面的js文件中通过修改hidden值来控制，

<view hidden="true">每个组件都有的hidden属性</view>
　　
<view hidden='false'>每个组件都有的hidden属性</view>
　　
<view hidden="{{hiddenn}}">每个组件都有的hidden属性</view>

总结

到此这篇关于微信小程序控制view隐藏显示的5种方法的文章就介绍到这了,更多相关小程序控制view隐藏显示内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解微信小程序 通过控制CSS实现view隐藏与显示

    详解微信小程序 通过控制CSS实现view隐藏与显示

    详解微信小程序 通过控制CSS实现view隐藏与显示 实现效果图: 视图代码,使用变量控制隐藏类名 <scroll-view scroll-y="true" > <view class="user_freeback"> <view class="txt"> <text> 为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码,以便管理员给你答复.</text> </view&g

  • 微信小程序控制view隐藏显示的5种方法汇总

    目录 一.使用wx:if指令 二.使用opacity属性 三.使用display属性 四.还有一种方式可以使用绝对定位 五.使用hidden属性 总结 一.使用wx:if指令 因为 wx:if 是一个控制属性,需要将它添加到一个标签上.但是如果我们想一次性判断多个组件标签,我们可以使用一个标签将多个组件包装起来,并在上边使用 wx:if 控制属性. <view wx:if="{{3>2}}">我是wx:if</view> 因为 wx:if 之中的模板也可能

  • 微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

    微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

    本文实例讲述了微信小程序获取用户信息的两种方法wx.getUserInfo与open-data.分享给大家供大家参考,具体如下: 在此之前,小程序获取微信的头像,昵称之类的用户信息,我用的都是wx.getUserInfo,例如: onLoad: function (options) { var that = this; //获取用户信息 wx.getUserInfo({ success: function (res) { console.log(res); that.data.userInfo

  • js控制页面控件隐藏显示的两种方法介绍

    javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visibility="visible"; 方法二: 复制代码 代码如下: document.all["panelsms&

  • 详解微信小程序的不同函数调用的几种方法

    一.调取参数 直接调取当前js中的方法, 调取参数that.bindViewTap(); 二.跳转页面 navigateTo: function () { wx.navigateTo({ url: '../page4/page4' }); }, 全局变量使用方法 a.js var app = getApp() Page({ data: { hex1: [], })} //设置全局变量 if (hex1 != null) { app.globalData.hex1 = hex1; } b.js 接

  • 微信小程序页面返回传值的4种解决方案汇总

    目录 使用场景 解决方案 1.使用globalData实现 2.使用本地缓存Storage实现 3.使用小程序的Page页面栈实现 4.使用wx.navigateTo API的events实现 总结 使用场景 小程序从A页面跳转到B页面,在B页面选择一个值后返回到A页面,在A页面使用在B页面选中的值.例如:在购买订单页面跳转到地址列表,选择完地址以后回退到订单页面,订单页面的配送地址需要同步更新. 解决方案 常见的比容要容易解决的方案是使用小程序的全局存储globalData.本地缓存stora

  • 微信小程序 传值取值的几种方法总结

    微信小程序 传值取值的几种方法总结

    微信小程序 传值取值 小程序里常见的取值有以下几种,一个完整的项目写下来,用到的概率几乎是100%. 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可 1.1 生成值 <image src="../../../images/icon_delete.png" /><text>删除&l

  • 微信小程序 跳转页面的两种方法详解

    微信小程序 跳转页面的两种方法详解

    微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: 1,在wxml页面中: <navigator url="../index/index">跳转到新页面</navigator> <navigator url="../index/index" open-type="redirect">在当前页打开</navigator> <navigator url="../i

  • Jquery实现点击切换图片并隐藏显示内容(2种方法实现)

    我们的电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢? 我们应该给用户足够的选择权,当他们想要看某些内容的时候可以很快的看到,不想看的时候就把他隐藏.于是就有了题目说的这个问题. 其实这个问题很简单,那么,之所以拿出来跟大家分享,一方面我们大家相互交流,另一方面,也是对自己的学习的一种总结. 这里我想到了两种方法,给大家分享一下. 好了不多说,下面看代码: 第一种,是常规的方法: [javascript] 复制代码 代码如下: $(function(){ var images = ['

  • 微信小程序 设置启动页面的两种方法

    微信小程序 设置启动页面的两种方法

     微信小程序 设置启动页面 在开发微信小程序的时候,除了tabBar上设置的页面之外,想进入肯定要走跳转之类的进入,但是我们开发的时候肯定想要直接看到该页面,那么我们就需要设置一下启动页面了有两种方法. 方法一 在app.json文件中,pages数组,设置在第一个的页面就是默认启动页面,所以你只需要调整你当前开发的页面顺序就好了. 方法二 在编译的地方设置,你只需要设置页面的路径,勾选上"使用以上条件编译",如果页面需要参数,那可以把参数也传上.这样启动的就是你设置的页面. 感谢阅读

  • 微信小程序实现传参数的几种方法示例

    前言 首先说点什么呢, 因为公司需求, 我也开始跳到小程序的坑里了, 填坑之路艰辛而凄凉, 好啦虽然有很多坑, 但毕竟小程序才出现不久, 有坑也正常, 哈哈哈不扯淡了, 来说说小程序的传参数,话不多说了,来一起看看详细的介绍吧. 一.navigator 跳转时 wxml页面(参数多时可用"&") <navigator url='../index/index?id=1&name=aaa'></navigator> 或者添加点击事件,js用navig

随机推荐