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

Java 简易版 UDP 多人聊天室

【代码】Java 简易版 UDP 多人聊天室。

nmy15570188135的博客 1187

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

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

码在当下的博客 5万+

Zigbee通信(CC2530终端 + ESP32-C6协调器)

实现了CC2530 zigbee终端与ESP32-C6 zigbee协调器的通信交互。

Ecsply的博客 2564

Ubuntu 20.04 + CARLA 0.9.13 长时运行崩溃?手把手教你定位和缓解Segmentation fault

本文详细解析了Ubuntu 20.04环境下CARLA 0.9.13仿真平台长时运行崩溃问题,提供了从内存监控到核心转储分析的系统级诊断方法,并分享内存泄漏缓解、稳定性优化配置等实用解决方案,帮助开发者构建更稳定的自动驾驶仿真环境。

weixin_28362173的博客 253

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

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

weixin_33871366的博客 4773

扣子(coze)实战 | 一键生成爆款书单视频

摘要:本文介绍了一个基于DeepSeek和Coze平台实现短视频高效生成的工作流方案。该方案耗时仅1-2分钟即可完成"假如书籍会说话"类短视频制作,包含书籍内容深度解读、对话台词生成、自动配音、素材合成等环节,支持通过剪映进行二次编辑。作者分享了完整开发思路和8个工作模块,并开放了包含该工具在内的100+智能体共享空间,提供会员专属服务。该方案为非真人出镜短视频的批量化生产提供了可行方案。

yueyehuguang的博客 2395

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

黑暗中的爆破(船讯网Ais爬虫暨爬虫实战js逆向学习经验分享)

船讯网 爬虫 js逆向 python

returnadsss的博客 1576

STM32F103跑LVGL,用DMA加速刷屏,800*480大屏也能丝滑

本文详细介绍了如何在STM32F103芯片上通过DMA加速和内存优化,实现800*480大屏的LVGL流畅运行。通过FSMC+DMA硬件架构优化、双缓冲机制和LVGL参数调优,显著提升了界面刷新率和响应速度,适用于嵌入式GUI开发中的高性能需求场景。

weixin_30357231的博客 376

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

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

abs625的博客 3万+

智能小车避障功能的实现(cpp,ubuntu)

智能小车避障功能的实现(cpp,ubuntu)

weixin_62135607的博客 4376

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

flex布局

l_yilan的博客 2万+

UG二次开发GRIP刻字

UG二次开发GRIP刻字

qq285503851的博客 1138

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

微信小程序-婚礼邀请函

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

m0_63598142的博客 7161

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

微信小程序开发笔记

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

筱竹的博客 6908

efm32 入门.pdf

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

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

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

余额充值