微信小程序中hidden不生效原因的解决办法

微信小程序中hidden不生效原因的解决办法

例如如下布局：

  <view hidden="true" style="display:flex;flex-direction: row;">
    <text>text1</text>
    <text>text2</text>
  </view>

你会发现hidden没生效。经我实验发现hidden元素对块状布局才生效，所以这段代码里导致hidden没生效的罪魁祸首是display:flex。把这个去掉就可以了。

如果一定要用flex布局怎么办？

其实这里想用hidden无非就是想影藏这个布局，display:none也能做到隐藏。这里可以用一个取巧的方法，动态设置display属性，示例如下：

  <view hidden="true" style="display:{{hideview ? none : flex}};flex-direction: row;">
    <text>text1</text>
    <text>text2</text>
  </view>

这里的hideview是在对应的js里是一个变量，由js来动态控制。

后话

hidden 隐藏布局，虽然隐藏了，但是还是会占空间。

display:none 隐藏不占据空间。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 微信小程序 wx.request(接口调用方式)详解及实例

    微信小程序 wx.request(接口调用方式)详解及实例

    微信小程序 wx.request----接口调用方式 最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口 官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实例. wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' },

  • 微信小程序 实现列表刷新的实例详解

    微信小程序 实现列表刷新的实例详解

    微信小程序 列表刷新: 微信小程序,最近自己学习微信小程序的知识,就想实现现在APP 那种列表刷新,下拉刷新,上拉加载等功能. 先开看一下界面 1.wx.request (获取远程服务器的数据,可以理解成$.ajax) 2. scroll-view的两个事件 2.1 bindscrolltolower(滑到页面底部时) 2.2 bindscroll (页面滑动时) 2.3 bindscrolltoupper (滑倒页面顶部时) 然后我们看代码,详细描述. index.js var url = "

  • 微信小程序 input输入框控件详解及实例（多种示例）

    微信小程序 input输入框控件详解及实例（多种示例）

    微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下: <!--index.wxml--> <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添

  • 微信小程序 实战小程序实例

    微信小程序 实战小程序实例

    微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start. 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳转传值使用 等等等.... app.json全局配置文件 { "pages":[ "page

  • 微信小程序 参数传递详解

    微信小程序 参数传递详解

    微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切. 微信小程序-参数传递 这里我找到两种小程序上的参数传递方式,为了方便,我单独拿出来和大家分享下. 一.通过事件进行参数传递 先来看眼小程序对事件的定义: #什么是事件? 这里是列表文本事件是视图层到逻辑层的通讯方式. 这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理. 这里是列表文本事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数

  • 微信小程序（应用号）简单实例应用及实例详解

    微信小程序（应用号）简单实例应用及实例详解

    Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正

  • 微信小程序 for 循环详解

    微信小程序 for 循环详解

    1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: <view wx:for="{{items}}"> {{index}}: {{item:one}} </view> js文件: Page({ items:[{ one: "test1", },{ one: "test2&qu

  • 微信小程序中hidden不生效原因的解决办法

    微信小程序中hidden不生效原因的解决办法 例如如下布局: <view hidden="true" style="display:flex;flex-direction: row;"> <text>text1</text> <text>text2</text> </view> 你会发现hidden没生效.经我实验发现hidden元素对块状布局才生效,所以这段代码里导致hidden没生效的罪魁祸

  • 微信小程序 setData使用方法及常用错误解决办法

    微信小程序 setData使用方法及常用错误解决办法 最近在弄微信小程序,类似于共享单车用来练练手,基本原理就是小程序发送经纬度给服务器,服务器从数据库中检索经纬度附近的单车传给小程序. 就在这里..没错就是这里,传回来的值是以jsonarray格式传过来的. 我需要将jsonarray进行解析获取经纬度,ID等车辆信息,然后赋值给小程序地图上的mark,一般我的思路时直接用个for循环给每个mark进行赋值然后再Setdata一下就ok, 结果没想到小程序setData()设置数组对象的某个元

  • 微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解 button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值. 如果设置了Button的背景色,没有用:after设置边框的颜色,则button的四个角会出现模糊的尖角.如下图所示: 如上图四个角会模糊..wxss代码如下: .clickEncryptBtn{ width:130px; border-radius: 3px; margin:20px auto; padding-to

  • 详解如何愉快的在微信小程序中使用SVG图标

    SVG近几年因各种优势被大量的应用,遗憾的是到目前为止微信小程序并不支持以XML的形式使用SVG,这使得SVG的灵活性大大下降,大多数人选择放弃在微信小程序中使用SVG图标方案. 那么,真的就没有办法在微信小程序中愉快的使用SVG图标了吗?我们先来分析一下,对于使用SVG图标我们有哪些需求: 能够引入使用 能够调整颜色 首先第一点是没有问题的,微信小程序支持以Image.src的形式引入SVG.接下来就是本文的重点部分了,如何让使Image形式的SVG可以改变颜色. 在最近对CSS的学习中,我发

  • 微信小程序中使用自定义字体的实现与体验优化

    微信小程序中使用自定义字体的实现与体验优化

    目录 前言 技术难点 1.微信限制 2.机型兼容 文档说明 体验优化 附微信小程序设置全局字体 结尾 前言 前段时间,甲方爸爸提出一个比较个性化的需要:要在他们的小程序中使用他们购买过版权的特殊字体.好家伙,我瞬间万马奔腾,我三十米的大刀呢?奈何甲方爸爸就是上帝,甲方爸爸想到的我们要尽量是实现,甲方爸爸没有想到的我们要提前实现. 怎么实现呢? 开撸之前,先研究一下,探索一下技术方案. 技术难点 1. 微信限制 大家开发过微信小程序的应该都知道,微信平台对小程序的体积大小有限制: 整个小程序所有分

  • 微信小程序中的swiper组件详解

    微信小程序中的swiper组件 微信小程序中的swiper组件真的是简单方便 提供了页面中图片文字等滑动的效果 <swiper> <swiper-item></swiper-item> <swiper-item></swiper-item> <swiper-item></swiper-item> </swiper> 这里的就是一个滑块视图容器:而就是你希望滑动的东西,可以是文字也可以是image 其中swipe

  • 微信小程序中顶部导航栏的实现代码

    微信小程序中顶部导航栏的实现 实例代码: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> <view class="swiper-tab-list {{curre

  • 微信小程序中的onLoad详解及简单实例

    微信小程序中的onLoad onLoad是一个生命周期函数,表示页面加载 onLoad默认有一个Object类型的参数,是指其他页面打开当前页面所调用的 query 参数 举个栗子~ 当我们在页面first的js脚本中有一个点击方法onTap 当点击时页面跳转到second页面,用?id = secondId的形式为second页面传递一个值(这里的secondId是一个已经获取过的值) onTap: function(){ wx.navigateTo({ url: "second?id=&qu

  • 微信小程序中做用户登录与登录态维护的实现详解

    微信小程序中做用户登录与登录态维护的实现详解

    总结 大家都知道,在开发中提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户登录,标识用户和获取用户信息,以用户为核心提供服务,是大部分小程序都会做的事情.我们今天就来了解下在小程序中,如何做用户登录,以及如何去维护这个登录后的会话(Session)状态.下面来看看详细的介绍: 在微信小程序中,我们大致会涉及到以下三类登录方式: 自有的账号注册和登

  • 微信小程序中吸底按钮适配iPhone X方案

    微信小程序中吸底按钮适配iPhone X方案

    随着第二三批iPhone X的陆续到货,身边的土豪们纷纷用了起来,因为iPhone X的齐刘海导致的适配问题很多,所以这群土豪更沉浸在各种找bug中,不出所料,豌豆公主小程序在一些地方也出现了一丢丢体验不好的地方,主要是商品详情页和购物车的吸底按钮栏,会与 Home Indicator 横条重叠,这样在点击下方按钮时很容易误触发手势操作,如下图: 截图来自网络,侵删 是bug就得修,是体验问题就得优化,于是立马搞了一台iPhone X开始研究. 网页端的适配还好,有 viewport meta

随机推荐