小程序页面高度控制

page {
  background-color: #fbf9fe;
  height: 100%;
}

/*这个100%屏幕高度*/

.container {
  font-family: ‘Trebuchet MS‘,
                 ‘Lucida Sans Unicode‘,
                 ‘Lucida Grande‘,
                 ‘Lucida Sans‘,
                 Arial,
                 sans-serif,
                 sans-serif;
  font-size: 32rpx;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20rpx 0rpx;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #fbf9fe;
  position: relative;
}

  

/*这个auto高度*/

.containerLine {
  font-family: ‘Trebuchet MS‘,
                 ‘Lucida Sans Unicode‘,
                 ‘Lucida Grande‘,
                 ‘Lucida Sans‘,
                 Arial,
                 sans-serif,
                 sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 32rpx;
  height: auto;
  background-color: transparent;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  position: relative;
}

  

时间: 2024-10-09 23:49:33

小程序页面高度控制的相关文章

小程序页面高度不够用时,且无法改变高度

使用滚动视图(scroll-view): WXML页面: <scroll-view class="scroll_view_vertical" scroll-y> <view class="item">line1</view> <view class="item">line2</view> <view class="item">line3</view&

微信小程序——页面栈

刚开始用小程序的时候没怎么在意页面的跳转,也没仔细看文档中说的页面栈的内容.只要能跳转就行,wx.navigateTo,wx.redirectTo 这些方法一顿乱用.最后在做一个十层页面(以前页面栈是最多5个)的时候跳懵了.各种重复跳页,怎么改都不好使,于是安心下来仔细看看API,发现这个路由还是有学问的.因此分享一下,希望对做小程序的网友也有一定的帮助. 页面栈 首先我们要理解在小程序中页面的路由是小程序框架本身控制的我们不要去手动管理, 小程序框架通过一个页面栈的设计来管理所有的界面,为了便

小程序页面可以放置转发按钮,同时开放了微信运动步数背景音乐播放等更多基础能力

小程序页面可以放置转发按钮,同时开放了微信运动步数背景音乐播放等更多基础能力.小程序转发更简单了:小程序页面可以放置转发按钮.在小程序页面右上角“…”的转发功能基础上,新增在页面内放置转发按钮,用户点击后,即可将喜欢的内容分享给好友或群聊,体验更加流畅.开发者可以根据小程序的功能,展示最适合的按钮形式. 使用指引 转发按钮,旨在帮助用户更流畅地与好友分享内容和服务.转发,应是用户自发的行为,且在需要时触手可及.开发者在使用时若遵从以下指引,会得到更佳的用户体验. 含义清晰:明确.一目了然的图形按

微信小程序页面跳转

wx.navigateTo(OBJECT) 不销毁当前页面,仅将其隐藏,使用wx.navigateBack可以返回到原页面. wx.redirectTo(OBJECT) 销毁当前页面,跳转到应用内的其他页面. 微信小程序页面不跳转: 我们有时候会发现,其他的地方都好好的能跳转,可是为啥突然就无效那呢? 原因: 检查你要跳转的位置是否在app.js中注册过. 检查你要跳转的地址是否有误.经常都是因为少写或者多写使得跳转无效. 检查你要跳转的位置是否位于TabBar中,如果是的话,要使用wx.swi

微信小程序页面

[转]微信小程序页面-页面跳转失败WAService.js:3 navigateTo:fail url not in app.json 微信小程序新建页面的要素一是新建的文件名称和其子文件的名称最好一致,不然容易出问题,在小程序页面跳转中如果出现WAService.js:3 navigateTo:fail url not in app.json错误 要在app.json(公共文件中)建立页面跳转page.如下图 不管是跳转到哪个页面,必须在json里的pages数组里面填写路径,不然跳转失败 跳

微信小程序配置_小程序页面配置

微信小程序配置_小程序页面配置 我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了所有配置选项的简单配置app.json : { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": &q

让微信小程序页面之间的通信不在变得困难

一个开始 小程序开发者总会碰到各种页面之间的通信问题,实现方式也五花八门,比如... 场景还原 首先这是一个电商小程序. 有这样一个需求: 首页某个地方要展示购物车商品数量. 当我在其他页面加购了商品,首页数量刷新. 实现方式 方式一:onShow直接请求接口 Page({ onShow() { // ...一些逻辑 // 后端请求新的购物车数量 this.requestCartNum(); } }) 不足: 每次onShow都要请求接口,浪费资源. 方式二:globalData存储购物车数量,

微信小程序页面跳转方法总结

微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. // 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,但是 redirectTo wx.navigateTo({ url: 'page/home/home?user_id=111' }) // 关闭当前页面,返回上一页面或多级页面.可通过 getCurrentPages() 获取当

小程序——页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置.页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项.文件内容为一个 JSON 对象,有以下属性: 配置示例 { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText&