微信小程序页面使内容充满整个屏幕(高度、宽度100%),并使内容水平和竖直都居中

微信小程序-屏幕高度分析详解 微信小程序高度 阅读详情

很多时候,我们会希望将内容充满整个屏幕(高度、宽度100%),如下图

这里写图片描述

代码如下

  • wxml页面代码
    <view class="empty_tip ">
      <image class="" src="../../image/empty_cart.png" mode="widthFix"></image>
      <view class="classname">购物车竟然是空的</view>
      <view class="color_888888">快去首页瞧瞧吧</view>
    </view>
  • wxss样式代码
.empty_tip{
  position: fixed;
  height: 100%;
  width: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
}
【知识整理】微信小程序-图片在容器中等比缩放至垂直、水平居中,并计算缩放后真实宽高 一.对于微信小程序页面中的图片,官方提供了image组件进行支持。根据官方文档,image组件用法如下: 例:图片水平、垂直居中布局代码如下: 注1:如不了解rpx,请查看开发文档 注2:image组件的mode属性值为aspectFile:保持纵横比缩放图片,使图片的长边能完全显示出来。 1.自此上述代码实现了图片的水平垂直居中效果图如下: 阅读详情

相关推荐

【愚公系列】《微信小程序与云开发从入门到实践》020-多媒体组件

在微信小程序的开发中,多媒体组件为应用增添了丰富的交互体验和视觉效果。无论是音频、视频,还是图片展示,这些多媒体元素不仅能够吸引用户的注意力,还能有效传达信息和情感。随着用户对内容质量和互动性的要求不断提高,掌握多媒体组件的使用显得尤为重要。本篇文章将深入探讨微信小程序中的多媒体组件,详细介绍每种组件的特性、使用方法和最佳实践。我们将展示如何通过这些组件实现动态的内容展示,提升用户的参与感和体验,同时分享一些实用的开发技巧和注意事项。

愚公智库 15万+

微信小程序高度height设置百分比无效,只需一步搞定

错误分析:设置父元素.father高度为100%无效,子元素高度设置百分比也无效。即可,page是整个页面的父元素,相当于html内的body。

weixin_73318685的博客 3921

微信小程序开发02(组件介绍和使用)

本文介绍了微信小程序开发中的基础视图组件和滚动视图组件。主要内容包括:1) view、text、image等基础组件的使用方法和特性,其中重点讲解了image组件的多种mode属性;2) swiper滑块视图容器的实现方式,包括属性配置和数据绑定;3) scroll-view滚动视图区域的使用,展示了水平和垂直滚动的实现方法。文章通过代码示例详细演示了各组件的具体应用,并提供了相关的样式设置建议,为小程序开发者提供了实用的组件使用指南。

qq_44838729的博客 425

微信小程序全屏

微信小程序全屏微信小程序全屏的宽度width: 100%;微信小程序全屏的高度height: 100vh;测试代码.myView{ width: 100%; height: 100vh; background: red; }效果图

Markslin的专栏 1万+

基于微信平台的论坛小程序(源码)

基于微信平台的论坛小程序(源码)

微信小程序中使元素占满整个屏幕高度实现方法

主要介绍了微信小程序中使元素占满整个屏幕高度实现方法的相关资料,需要的朋友可以参考下

小程序( rpx、px、rem )

rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度,拿iPhone6来讲,屏幕宽度为375px,把它分为750rpx后, 1rpx = 0.5px。微信小程序同时也支持rem尺寸单位, rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx

starleejay的博客 2万+

pytorch gpu运行安装重点(CUDA12.3)

pytorch gpu加速

weixin_45597212的博客 3万+

微信小程序设置全屏的方法

也许有些人没有发现,其实微信小程序是支持设置为全屏显示的。官方文档上没有直接提出 全屏 这个字眼。但是这个配置属性可以将页面全屏显示:即: navigationStyle: 'custom'不使用官方提供的默认导航栏: 而自己适用背景图或者文档元素自定义制作一个。但是右上角的 ··· 依然会存在,需要保留最基本的功能。...

码在当下的博客 5万+

哨兵2植被参数反演避坑指南:SNAP中10m/20m分辨率选择与缺失波段处理

本文深入解析了使用SNAP软件进行哨兵2号植被参数反演时的关键操作与决策。核心在于理解SNAP生物物理处理器NNET10m与NNET20m的架构差异,根据是否需要反演冠层叶绿素含量(Cab)等参数,明智选择10米或20米分辨率工作流。文章详细指导了大气校正、波段重采样及处理L2A数据中B01波段“缺失”等常见问题的解决方案,为生态监测与精准农业应用提供清晰的避坑指南和完整实战流程。

wdx01234567的博客 262

DELL服务器BIOS下配置RAID阵列

dell服务器配置raid阵列

weixin_58250887的博客 1万+

如何将微信小程序页面内容充满整个屏幕

修改该页面的wxss文件 /* pages/weather/weather.wxss */ .weather{ position: fixed; height: 100%; width: 100%; display:flex; flex-direction:column; /*纵向显示...

weixin_33871366的博客 4773

基于深度强化学习的柔性作业车间动态调度

在追求敏捷和灵活的生产调度方面,处理不可预测的动态事件的能力变得越来越重要。与此同时,生产系统中的网络-物理融合产生了大量需要实时挖掘和分析的工业数据。为了便于这种实时控制,本研究提出了一种分层分布式的体系结构来解决动态柔性作业车间调度问题。采用双深度Q网络算法(DDQN)训练调度智能体,捕捉生产信息与调度目标之间的关系,为具有恒定任务到达的柔性作业车间实时做出调度决策。为了处理动态调度中问题的可变规格说明,提出了专门的状态和动作表示法。此外,还提出了一种代理奖励整形技术(surrogate reward

太剧烈的快乐与太剧烈的悲哀是有相同之点的——同样地需要远离人群! 1万+

flex布局:垂直、水平方向-自动填充满剩余空间

常见的flex布局中,可设置flex:1,相当于设置父盒子display:flex,即伸缩布局,flex为1,是子盒子占了一份,自动放大填满剩余的空间。2.flex:0 0 auto,等同于flex:none,子元素的长度决定它的长度,当整体空间不足时,它也不会缩小,有剩余空间也不放大。假设页面高度为100%,第一部分的高度为200rpx,那么剩余的部分填充满剩余空间。1.flex:1,也就是flex-grow:1,也就是上面说的自动放大填充满剩余空间,若有其他子盒子设置flex,则平分。

乔的博客 1万+

科技与伦理的平衡点:人类计算的伦理

科技与伦理的平衡点:人类计算的伦理 关键词 科技与伦理 人类计算 隐私问题 道德决策自动化 公平性与偏见 法律与社会责任 摘要 本

AI天才研究院 1162

库存管理系统项目部署方案(基于jdk17)

不需要安装到服务器,运维本地安装就行,主要是用来编译前端代码的。构建完成后将dist文件夹复制到服务器内。

程序员诚哥 6372

微信小程序布局技巧(一)

微信小程序布局技巧前言小程序布局方式Block布局方式flex布局方式wxss添加样式wxml应用样式效果flex布局种类justify-content属性align-items属性flex-wrap 属性应用尾巴 前言 友情提示,阅读本文之前,可能需要有一点微信小程序开发基础。本文旨在为那些刚入坑微信小程序(文中后面统称小程序)或者入坑后对页面UI布局有困难的开发者,老鸟和大神请无视。如果你还没...

abs625的博客 3万+

第3讲:单端传输线的时域TDR仿真(基于实战的第一次仿真视角切换)

本文为CST仿真系列教程的第3讲,主要介绍传输线阻抗(TDR)的两种仿真方法:基于S参数的频域计算和基于高斯脉冲的时域计算。文章详细演示了在CST PCB Studio中修改电容参数、设置TDR仿真参数(包括截止时间和采样点数)的操作步骤,并通过对比实验展示TVS寄生电容对阻抗曲线的影响。最后将两种TDR方法的结果进行对比,验证了两种方法的一致性。本教程适合硬件工程师通过时域波形直观分析传输线阻抗特性,是信号完整性分析的重要技能。

一只豌豆象的博客 227

微信小程序-flex布局:垂直、水平方向-自动填充满剩余空间

flex布局

l_yilan的博客 2万+

FFMPEG音频开发: Linux下采集摄像头(使用V4L2框架)数据录制成MP4视频保存到本地

一、环境介绍 操作系统介绍:ubuntu 18.04 FFMPEG版本: 4.4.2 摄像头: USB摄像头、虚拟机挂载本机自带摄像头 二、FFMPEG与X264下载编译 X264下载地址: http://www.videolan.org/developers/x264.html FFMPEG下载地址:https://ffmpeg.org/download.html Yasm ...

8871

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

微信小程序-婚礼邀请函

启动后台Node服务,才能访问视屏资源。里添加图像组件,设置背景图片。查看"邀请函"压面的导航栏。配置美好时光页面的导航栏。编写宾客信息页面的导航栏。配置邀请函页面的导航栏。配置照片页面的导航栏。

m0_63598142的博客 7161

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

微信小程序开发笔记

0、杂记 0.1、在实际的开发中,图片资源不会存储在小程序的目录中,因为小程序的大小不能超过1MB(现在改为2M)。超过则无法真机运行和发布项目。我们应该将图片都存放在服务器上,让小程序通过网络来加载图片资源。 0.2、在wxss中,本地资源是无法使用的,比如:background-image,如果使用本地的图片是无法显示的,可以使用网络图片来代替本地图片,同时要加上background-size...

筱竹的博客 6908

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

清云小程序教程十二:reverse倒序排序

原文链接:http://www.0575yun.com/articledetail/id/55.html 上节课给大家留了一个思考题:3个小方块在列方向上的颠倒,以前和现在都是从我们的导航条开始排列的;但是行方向上的排列却是之前是顶在左边的,颠倒之后却是顶在右边了,这是为什么呢?按照我们的之前的思路,竖直排列的色块它在做了倒叙之后应该是顶在最下方的,可是它怎么没有到下面去呢?这是因为整个容器的高...

king3062211087的专栏 1035

微信小程序框架(二)-全面详解(学习总结---从入门到深化)

小程序的主要开发语言是 JavaScript ,小程序的开发同普通的网页 开发相比有很大的相似性。但是二者还是多少有些许区别的,例如:小程序提供了一系列的视图组件代替中的标签。

1495

微信小程序 布局经常用到的一些属性?

一、flex布局方式 1.大家都知道小程序样式的控制是通过wxss文件来控制,实现复杂的布局一般我们都是通过flex布局方式来实现的,要使用flex布局的话需要显示的声明:display:flex;。接下来看样式布局 flex布局种类 首先我们不管是横向布局还是纵向布局,要设置属性flex-driection,它有4个可选值: row:从左到的水平方向为主轴 row-reverse:从右到左的水平方向为主轴 column:从上到下的垂直方向为主轴 column-reverse:从下到上的垂

yyxhzdm的博客 1273

微信小程序学习 --- 第三天、第四天

微信小程序学习 — 第三天 主要学习 css 的基本使用 CSS (cascading style sheets) 层叠样式表 一: 引入方式 行内样式 直接写在标签里面, 用作 style 属性。 可重用度低。 内部样式 写在 head 标签里,用作 style 标签。 <style type="text/css"> ... </sytle> 只能在一个页面内重用。 外部样式 写在 head 标签里,用作 link 标签。 <link rel="s

weixin_43201538的博客 202
上一篇: 微信小程序引用同一js文件中的方法函数(function)
下一篇: 微信小程序,使用scroll-view实现下拉加载更多(下一页)源码
Qssn丶
博客等级 码龄11年 88粉丝 113原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值