微信小程序开发--宽为百分百,页面仍可左右滑动
这段时间小程序开发时,很多时候,希望内容充满整个屏幕(高度、宽度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后,页面层级会有三层 ... 
- 微信小程序开发系列七:微信小程序的页面跳转
		微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ... 
随机推荐
- 用AOP思想改造一个服务器的数据存储
			背景是有一个游戏服务器一直以来都是写SQL的, 后来改过一段时间的redis, 用的是别的员工写的类orm方式将实体类型映射成各种key-value对进行写入, 但是仍有一个缺点就是需要在增\删\改的 ... 
- 一眼看穿flatMap和map的区别
			背景 map和flatmap,从字面意思或者官网介绍,可能会给一些人在理解上造成困扰[包括本人],所以今天专门花时间来分析,现整理如下: 首先做一下名词解释---------------------- ... 
- Javac常量池的解读
			interface IA{ public void md(); } public class Test07 implements IA{ final double d = 2.0d; final fl ... 
- wordpress谷歌字体
			wordpress插件:disable google fonts wordpress插件:Remove Open Sans font from WP core 在主题的functions.php添加 ... 
- 【Java初探02】——Java语言基础
			本篇博文就Java语言的一些基本元素进行一些记录和阐述,主要讲解一下Java语言的一些基本构成元素和Java的主类结构. Java语言基础的大致组成 java主类结构 基本的数据类型 变量与常量 运算 ... 
- 07 - JavaSE之容器
			本章宗旨:1136 -- 1个图 1个类 3个知识点 6个接口 容器 J2SDK 所提供的容器 API 位于 java.util 包内. 容器 API 的类图如下: Collection 接口的子接口 ... 
- windows系统  PHP安装Redis扩展
			cmd开启/关闭redis redis所在路径: D:\redis\Redis-x64-3.2.100 启动: start cmd /k "cd /d D:\redis\Redis-x64- ... 
- 网络之Json生成解析
			// // ViewController.m // Json // // Created by City--Online on 15/4/28. // Copyright (c) 2015年 CYW. ... 
- C# 字符串首字符大写
			我找到一些把字符串首字符大写的方法. 假如需要把字符串 "red" 转换为 "Red",把 "red house" 转为 "Red ... 
- JS  对话框  语法
			javaScript 是个脚本语言,没有能力独立执行,必须要有宿主文件 html, 作用 进行数据运算 控制浏览器的一些功能(对一下高级浏览器的影响有限) 控制元素(属性,样式,内容等) 一 用法 ... 
