微信小程序开发--宽为百分百,页面仍可左右滑动
这段时间小程序开发时,很多时候,希望内容充满整个屏幕(高度、宽度100%),如下图

但是在设置 .followrecords-container{width:100%;} 后发现 手机在横向上虽然页面完全展示了,但是部分手机的页面却可以左右滑动(好像是溢出了一样,页面的右边总有一块白色区域),这肯定不是我们需要的。你上下滑动是正常功能,如果是左右页面切换,能滑动也是正常的,但是你这不是页面切换,纯粹就是右边溢出了一部分,多出一条莫名的白色区域,导致的滑动,肯定是不允许的。
解决办法就是在样式 .followrecords-container{width:100%;} 类里面添加
position: fixed;
写成 :
.followrecords-container{
width: 100%;
height: auto;
flex-direction:column;
display:flex;
position: fixed; /*就这特殊*/
background-color:#ffffff;
}
wxml文件
<view class="followrecords-container">
<view class="followrecords-textarea">
<view class="followrecords-textarea-area">
<textarea placeholder="请输入跟进记录......" maxlength="200" placeholder-style="color:red;" class="" value="{{textareaValue}}" bindblur="getData"/>
</view>
</view>
<button bindtap="sureSubmit">确定</button> <view class="shadowMask-modalDlg" wx:if="{{photoAlbum}}">
</view>
<view class="shadowMask-mask" id="3" bindtap="cancelMask" wx:if="{{photoAlbum}}"></view>
</view>
wxss文件
page {
font-size:16px;
font-family:-apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}
.followrecords-container{
width: 100%;
height: auto;
flex-direction:column;
display:flex;
position: fixed; /*就这特殊*/
background-color:#ffffff;
}
微信小程序开发--宽为百分百,页面仍可左右滑动的更多相关文章
- 微信小程序开发06-一个业务页面的完成
前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
- 微信小程序开发--路由切换,页面重定向
这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1 wx.navigat ...
- 微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...
- 微信小程序开发(四)页面跳转
承接上篇博客. 通过点击按钮跳转到新的页面. 先创建新页面home: 代码如下: // home.js Page({}) // 注册页面 // home.json {} // home.wxml &l ...
- 微信小程序开发 如何退出当前页面
默认是在首页 wx.navigateBack({ delta: -1 }); 详情参考. https://mp.weixin.qq.com/debug/wxadoc/dev/api/u ...
- 微信小程序开发07-列表页面怎么做
接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有7 ...
- 微信小程序开发 [02] 页面注册和基本组件
1.页面注册 既然我们希望跳转到新的页面,那自然要新建页面相关的文件才行.在开篇已经讲过,一个小程序页面由四个文件组成,假如我们的页面名为welcome,那么这四个文件则是: welcome.js w ...
- 微信小程序开发:学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
- 微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
随机推荐
- Mac下使用Typora的一些简单操作
说明: 以下方法并不是唯一的,我只是选择了我验证成功或者比较喜欢的一种 以下基本所有操作符都是在英文输入法下进行的,中文输入法有时下达不到所要的效果 如果您在浏览本博文的时候发现有侵权行为,请及时与博 ...
- sizeof()与Marshal.SizeOf()的不同
在.NET中一般都是通过sizeof()或Marshal.SizeOf()来获取数据类型的大小,来简要地看一下它们二者有何不同. sizeof() sizeof()在MSDN中的介绍是,在编译时获得一 ...
- JVM(二)JVM的结构
1.JVM的结构包括 (1)类加载器 (2)执行引擎 (3)运行时数据区 (4)本地库接口 类加载器:包括启动类加载器.扩展类加载器.应用程序类加载器.自定义加载器. 执行引擎:在执行JAVA代码的时 ...
- 处理 Maven 项目名称红色感叹号的问题
问题描述: maven 本地仓库位置移动 ,重启IDE,项目出现感叹号. 解决方案: 附加: 其它原因,造成项目感叹号,且pom.xml和Build Path下又没有相应的错误的提示的情况下. 那么选 ...
- Python学习--11 面向对象高级编程
多重继承 Python里允许多重继承,即一个类可以同时继承多个类: class Mammal(Animal): pass class Runnable(object): def run(self): ...
- linux中为什么cpu使用率会超过100见解
linux的cpu使用频率是根据cpu个数和核数决定的 top,然后你按一下键盘的1,这就是单个核心的负载,不然是所有核心的负载相加,自然会超过100 如上面 cpu个数是4个,那么cpu可以占到40 ...
- 从nsq中学习如何优雅的退出go 网络程序
退出运行中的程序,可以粗暴的kill -9 $PID,但这样会破坏业务的完整性,有可能一个正在在执行的逻辑半途而费,从而产生不正常的垃圾数据. 本文总结在go语言中,如何能优雅的退出网络应用,涉及的知 ...
- gradle 转 maven
1. 预备 1.1. java 环境 验证 java -version 1.2. gradle 安装, 参考, 这里列举下windows下的安装 b.1 下载包:https://gradle.org/ ...
- windows开机提示文件损坏
今早按部就班的开机,然后准备吃热干面,很多时候事情都是同步进行的... 然后眼前出现这样一个界面 心情果断灰暗下来,按照提示一步步操作,点enter进入高级选项,试过了安全模式启动.最后一次正确配置启 ...
- java权限控制以及变量的初始化
知识是靠积累的,不断的温习会帮你让你遇到许多问题,解决完这些问题之后,会收获许多,233333333333333. 1.java访问控制符 2.java变量初始化问题 默认构造方法的名字与类名相同,它 ...