微信小程序页面使内容充满整个屏幕(高度、宽度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万+

玩转ubuntu18 --机器视觉方面(yolo算法识别及摄像头和cmake问题解决)

玩转ubuntu18 --机器视觉方面(yolo v3算法识别) 1.YOLO的简介 工作原理 先前的检测系统重新调整分类器或本地化器以执行检测。他们将模型应用于多个位置和比例尺的图像。图像的高分区域被视为检测。 我们使用完全不同的方法。我们将单个神经网络应用于整个图像。该网络将图像划分为区域,并预测每个区域的边界框和概率。这些边界框按预测概率加权。 我们的模型比基于分类器的系统具有几个优势。它在测试时间查看整个图像,因此其预测由图像中的全球上下文提供信息。它还通过单一网络评估进行预测,这与R-CNN等系统

qq_53951823的博客 1556

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

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

码在当下的博客 5万+

易灵思Ti60F100 FPGA的HyperRAM实战:从硬件连接到Native接口时序调试

本文详细介绍了易灵思Ti60F100 FPGA内置HyperRAM控制器的实战应用。文章从硬件设计要点(如400MHz+信号完整性、等长匹配)切入,重点解析了如何通过Interface Designer配置高效的Native接口,并分享了其时序详解与调试技巧,为开发者提供了一份从硬件连接到软件调试的深度指南。

weixin_29168153的博客 456

OpenClaw 完整部署教程

版本:OpenClaw 2026.2.13更新日期:2026-02-26适用系统:Linux (Ubuntu/Debian/CentOS)

qq_39436086的博客 2318

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

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

weixin_33871366的博客 4773

高速接口电平标准互连设计:LVPECL、PECL与LVDS的实战解析

本文深入解析了LVPECL、PECL与LVDS三种高速接口电平标准的互连设计实战。针对信号共模电压、阻抗匹配等核心差异,详细对比了直流耦合与交流耦合两种主流方案,并提供了电阻网络计算、布局布线要点及光模块等特殊场景下的选型建议,帮助工程师解决高速信号间的“翻译”难题,确保信号完整性。

weixin_29198045的博客 537

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万+

生存网络与mlr3proba

通过结合生存网络和mlr3proba,可以使用生存网络模型来预测个体在给定时间点发生事件的概率,并使用mlr3proba提供的工具进行模型的训练、评估和选择最佳模型。iii)基本的机器学习(ML)方法,如重新排序和调整。在本文中,我们将只讨论前五种,因为它们在文献中得到了更好的建立,并且它们具有相同的接口,这简化了调优,我们将在下面看到。我们不会为模型指定自定义架构,而是使用默认架构,如果你熟悉PyTorch,那么你可以选择创建自己的架构,如果你愿意的话,通过将其传递给模型中的custom_net参数。

weixin_46587777的博客 1363

【Matlab】如何使用Simulink进行电池建模和SOC预估

“通过Simulink电池建模进行SOC预估,其实挺容易!” 1 声明 本文只描述一般性电池建模方法,文中出现的电池相关数据来自一些论文或者外文文献,对数据的真实性不做任何保证。 本文参考了不少国内高校的硕士论文和外文文献,所以本篇文章只作为学术性交流,未经...

wanff1204的博客 2万+

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

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

abs625的博客 3万+

【全局路径规划地图算法】Voronoi路径规划探索(附C++代码)

认知有限,望大家多多包涵,有什么问题也希望能够与大家多交流,共同成长!本文先对Voronoi路径规划探索做个简单的介绍,具体内容后续再更,其他模块可以参考去我其他文章提示:以下是本篇文章正文内容。

qq_35635374的博客 2240

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

flex布局

l_yilan的博客 2万+

【深度学习驱动流体力学】采集OpenFOAM仿真数据作为AI模型训练数据集与卷积神经网络搭建到预测(一站式完整代码实现)

采集OpenFOAM仿真数据作为AI模型训练数据集与卷积神经网络搭建到预测(一站式完整代码实现)

源代码杀手的博客 1414

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

微信小程序-婚礼邀请函

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

m0_63598142的博客 7161

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

微信小程序开发笔记

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

筱竹的博客 6908

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

清云小程序教程十二: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、付费专栏及课程。

余额充值