这段时间小程序开发时,很多时候,希望内容充满整个屏幕(高度、宽度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. oralce11g RAC 启动后 CRS-0184: Cannot communicate with the CRS daemon.

    很奇怪的一个问题! ORACLE数据库服务器,系统启动之后,查看集群状态,发现CRS实例不可用,然后网上查找资料: 隔了几分钟之后,再次查询相关集群服务状态,发现正常了!!! 暂时得出的结论:操作系统 ...

  2. 课程一(Neural Networks and Deep Learning),第四周(Deep Neural Networks) —— 3.Programming Assignments: Deep Neural Network - Application

    Deep Neural Network - Application Congratulations! Welcome to the fourth programming exercise of the ...

  3. 继承extends、super、this、方法重写overiding、final、代码块_DAY08

    1:Math类的随机数(掌握) 类名调用静态方法.  包:java.lang 类:Math 方法:public static double random(): Java.lang包下的类是不用导包就可 ...

  4. JDK提供的四种线程池代码详解

    一.线程池什么时候使用,会给我们带来什么好处? 如果很多用户去访问服务器,用户访问服务器的时间是非常短暂的,那么有可能在创建线程和销毁线程上花费的时间会远远大于访问所消耗的时间,如果采用线程池会使线程 ...

  5. (转)【深度长文】循序渐进解读Oracle AWR性能分析报告

    原文:https://dbaplus.cn/news-10-734-1.html https://blog.csdn.net/defonds/article/details/52958303 作者介绍 ...

  6. webgl之3d动画

    之前的几篇文章都是静态的,而这里主要介绍如何使物体动起来,并且学会使用性能监视器来监测性能. 而如果要让物体动起来,实际上我们是有两种方法的,第一种是让物体真的动起来,另外一种是让摄像机动起来这样物体 ...

  7. java重点知识

    一.java基本知识点 java是由SUN公司在1995年推出的,在2009年SUN公司又被甲骨文公司收购,所以甲骨文公司获得java版权.其底层是由C语言写的,java分为三个体系: JavaSE, ...

  8. Ubuntu 安装配置最新版 PostgreSQL

    环境:Ubuntu Xenial (16.04)     !!! CentOS 参考这里 #安装 PostgreSQL sudo apt-get updatesudo apt-get upgradea ...

  9. Sublime Text3 一些实用设置

    字体大小 "font_size": 14 高亮编辑中的那一行 "highlight_line": true 当你把脑袋扭过到显示器以外的地方后再回头看编辑器,光 ...

  10. LeetCode 169. Majority Element解题方法

    题目: Given an array of size n, find the majority element. The majority element is the element that ap ...