这段时间小程序开发时,很多时候,希望内容充满整个屏幕(高度、宽度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;
}

微信小程序开发--宽为百分百,页面仍可左右滑动的更多相关文章

  1. 微信小程序开发06-一个业务页面的完成

    前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...

  2. 微信小程序开发--路由切换,页面重定向

    这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1  wx.navigat ...

  3. 微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由

    前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...

  4. 微信小程序开发(四)页面跳转

    承接上篇博客. 通过点击按钮跳转到新的页面. 先创建新页面home: 代码如下: // home.js Page({}) // 注册页面 // home.json {} // home.wxml &l ...

  5. 微信小程序开发 如何退出当前页面

    默认是在首页 wx.navigateBack({     delta: -1 });     详情参考. https://mp.weixin.qq.com/debug/wxadoc/dev/api/u ...

  6. 微信小程序开发07-列表页面怎么做

    接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有7 ...

  7. 微信小程序开发 [02] 页面注册和基本组件

    1.页面注册 既然我们希望跳转到新的页面,那自然要新建页面相关的文件才行.在开篇已经讲过,一个小程序页面由四个文件组成,假如我们的页面名为welcome,那么这四个文件则是: welcome.js w ...

  8. 微信小程序开发:学习笔记[8]——页面跳转及传参

    微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...

  9. 微信小程序开发系列七:微信小程序的页面跳转

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

随机推荐

  1. ElasticSearch入门2: 基本用法

    基本用法:  一.索引创建 (启动集群和索引请看上一篇文章:http://www.cnblogs.com/liuxiaoming123/p/8081883.html) 1.打开浏览器,输入请求:htt ...

  2. 多线程编程——ANR

    1.为什么要用多线程 这里列出几个原因: 提高用户体验或者避免ANR:在事件处理代码中需要使用多线程,否则会出现ANR(Application is not responding),或者因为响应较慢导 ...

  3. 关于Android系统的启动流程

    当按下Android设备电源键时究竟发生了什么?Android的启动过程是怎么样的?什么是Linux内核?桌面系统linux内核与Android系统linux内核有什么区别?什么是引导装载程序?什么是 ...

  4. linux-centos使用 wget命令获取jdk

    1, 首先去官网看下地址是否变化了 2, 然后输入以下命令即可 wget --no-check-certificate --no-cookies --header "Cookie: orac ...

  5. 线上问题定位--CPU100%

    服务器CPU突然告警,如何定位是哪个服务进程导致CPU过载,哪个线程导致CPU过载,哪段代码导致CPU过载? 步骤一.找到最耗CPU的进程 工具:top 方法: 执行top -d 1 -c,每秒刷新一 ...

  6. TDSQL“相似查询工具MSQL+”入选VLDB论文

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云数据库 TencentDB发表于云+社区专栏 作者介绍:王晓宇,腾讯数据库TDSQL团队成员,目前参与TDSQL数据库内核研发工 ...

  7. intellij idea 怎么全局搜索--转

    https://jingyan.baidu.com/article/29697b9163ac7dab20de3cbf.html intellij idea是一款智能,功能强大的ide,对比eclips ...

  8. springboot 单体架构之shiro集成

    这里使用的是eclipse 开发工具 1.springboot 版本是2.0的,引入了2个shiro 的依赖,如下 <parent> <groupId>org.springfr ...

  9. 如何判断JavaScript数据具体类型

    昨晚做了阿里的题目,让我写一个函数,可以判断数据的具体类型.其实题目很简单的...但是真的是自己不太注意吧,写的很糟糕啊. 然后今天就自己写了一个,然后又到晚上搜了下,看看别人的写法,结果发现自己有点 ...

  10. UVA 227 Puzzle(基础字符串处理)

    题目链接: https://cn.vjudge.net/problem/UVA-227 /* 问题 输入一个5*5的方格,其中有一些字母填充,还有一个空白位置,输入一连串 的指令,如果指令合法,能够得 ...