记录微信小程序 height: calc(xx - xx)；无效问题

遇到一个小问题，记录一下

问题：在微信小程序中使用scroll-view标签时，用height:cale(xx - xx)设置高度无效，在page中设置高度为百分百依旧无效

解决办法：直接在最大的view标签中设置高度为百分百即可

<view style="height:100%;">
  <!-- 视频列表 -->
  <scroll-view class="videoList" scroll-y>
  </scroll-view>
</view>
page {
  height: 100%;
}
.videoList {
  height: calc(100% - 480rpx);
}

知识扩展：jquery点击添加样式，再次点击移除样式

$("#divSetting").on("click", function () {
  $(this).toggleClass("open");
 });

总结

以上所述是小编给大家介绍的记录微信小程序 height: calc(xx - xx)；无效问题，希望对大家有所帮助！

赞 (0)

相关推荐

  • 记录微信小程序 height: calc(xx - xx)；无效问题

    遇到一个小问题,记录一下 问题:在微信小程序中使用scroll-view标签时,用height:cale(xx - xx)设置高度无效,在page中设置高度为百分百依旧无效 解决办法:直接在最大的view标签中设置高度为百分百即可 <view style="height:100%;"> <!-- 视频列表 --> <scroll-view class="videoList" scroll-y> </scroll-view&g

  • 微信小程序 视图层（xx.xml)和逻辑层(xx.js)详细介绍

    微信小程序 视图层（xx.xml)和逻辑层(xx.js)详细介绍

    微信小程序可以理解为云OS的概念,微信生态本身就是一个OS.加上微信公众平台和微信开发平台本身已经是非常成熟的架构,能够完美媲美App的功能,同时在交互体验方面也能够做到极致,大有取代App之势.苹果App Store模式的意义在于为第三方软件的提供者提供了方便而又高效的一个软件销售平台.用户购买应用所支付的费用由苹果与应用开发商3:7分成.如果微信小程序商城也采用类似的分佣模式,那8亿多的用户将是一个非常大的无形资产,成为腾讯继游戏.会员.广告后的另一个掘金源. 微信小程序允许人们无需进行下载

  • 微信小程序中使用wxss加载图片并实现动画效果

    记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; animation: a 1s steps(12) infinite; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bW

  • 微信小程序wx.request实现后台数据交互功能分析

    本文实例讲述了微信小程序wx.request实现后台数据交互功能.分享给大家供大家参考,具体如下: 记录微信小程序wx.request这个api在跟后台交互时遇上的问题. 1.根据资料,完成第一步,请求发送,代码如下: wx.request({ url: 'https://localhost:8443/xiaochengxu/addBill.do', data: e.detail.value, method: 'POST', success:function(res) { console.log

  • 微信小程序使用setData修改数组中单个对象的方法分析

    本文实例讲述了微信小程序使用setData修改数组中单个对象的方法.分享给大家供大家参考,具体如下: 微信小程序已经出来挺久的时间了,之前只是在文档上粗略的看了一下,最近稍得空闲,便利用微信小程序平台写一个练手的项目,顺便学习一下小程序开发,感觉大体跟前端开发基本类似,但是因为是在微信的平台上运行,具体还是要根据小程序的规则来编写代码的,其中还是有部分的内容跟前端中常见的有所不同,于是接下来的博客里,也会顺手记录微信小程序开发过程中的一些坑,帮助后来的小程序开发者少踩一些坑,当然我踩的坑大部分都

  • 微信小程序+ECharts实现动态刷新的过程记录

    微信小程序+ECharts实现动态刷新的过程记录

    前言 最近遇到了一个需求,就是要在小程序中实时刷新图表,最开始选择的是wx-chart,然后发现不能满足我的需求,最后选择了ECharts,也踩了一些坑,通过在网上收集资料,终于弄出来了,记录下我实现的过程. 方法实例 1.首先到ECharts官网下载它的例子,然后把ec-canvas文件拷贝下来放到你自己的项目中: 2.然后在你需要用的页面引入,在xxx.json中加入,这里要注意路径,我的页面统一是放在pages文件夹中的: "usingComponents": { "e

  • 微信小程序购物车、父子组件传值及calc的注意事项总结

    微信小程序购物车、父子组件传值及calc的注意事项总结

    前言 在做微信小程序时,觉得小组里对购物车的实现不是很完美,就自己尝试的写了下,然后用到了父子组件传值,父子组件传值的话,和vue框架上是非常相似的,以及calc这个css函数,calc有个注意点,自己不怎么用,一时间有差点忘了,这里记录下 下面话不多说了,来一起看看详细的介绍吧 1.效果图 2.子组件实现 要实现图中删除的效果,使用组件的形式更好做点,我当时本想直接在pages里实现,不过结果就是,滑动时,所有的商品都显示了删除按钮,除非用数组将每个商品要移动的距离存储起来,不过这样的话就很麻

  • 微信小程序开发篇之踩坑记录

    微信小程序开发篇之踩坑记录

    最近参与开发了公司的第一款小程序,开发体验基本类似于基于webview的混合式开发,可以调用官方强大的api,但也有一些坑或者说不习惯的地方.这篇文章从实用性出发,记录了开发过程中的一些问题: 1. 样式优先级混乱 在使用button组件时,发现在class中设置width不生效,下面贴上代码: .my-button{ width: 140rpx; height: 60rpx; line-height: 60rpx; padding: 0; } 经过微信调试工具排查后,发现user agent的

  • 微信小程序骨架屏的应用与实现步骤详细记录

    微信小程序骨架屏的应用与实现步骤详细记录

    目录 什么是骨架屏 小程序骨架屏的实现 1. 生成页面骨架 2. 骨架屏的应用 3. 使用注意 4. 思考后的封装 总结 什么是骨架屏 骨架屏是作为一种首次渲染加载优化的一种方法 我们打开一个应用后,应用会通过ajax来请求数据,而在这段空缺的时间,没有数据,内容缺失,这对于用户的感觉很不好,所以我们需要在这个时间段内通过骨架屏来填充这个空缺. 如上图所示,一个是没有内容,一个是骨架屏的填充,所以在加载的这一秒内给用户以骨架屏形式的填充是很有必要的. 小程序骨架屏的实现 1. 生成页面骨架 微信

  • 关于微信小程序bug记录与解决方法

    微信小程序bug记录 textarea 1.textarea在模拟器上没有padding,可是在真机上会自带padding,而且在外部改不了,并且在安卓和IOS上padding还不一样 第一张图是在开发工具上的,第二张图是在IOS真机上的.从上图可以看出来,在开发工具上显示很正常,而且没有padding,可是在真机上左上角就出现了padding,并且无论你在外部对textarea的padding做任何处理,都无法覆盖. 目前有一种解决方式是根据ios和android的不同平台来给teaxarea

随机推荐