Vue开发微信公众号默认背景为灰色
最近公司有一个项目,使用Vue开发微信公众号,开发过程遇到一个问题,即设计图的整体背景是白色的,但是公众号里默认的背景是浅灰色,如果某个页面高度没能占满一屏,就会露出浅灰色的默认背景,会显得很不协调。 使用单纯的CSS没能解决这个问题,在网上查了些资料也没发现特别好的方法,最后还是采用了JS解决这个问题。
document.documentElement.style.backgroundColor = "#fff";
this.screenH = window.screen.availHeight;
this.pageH = document.documentElement.offsetHeight;
if (this.pageH < this.screenH) {
document.documentElement.style.height = this.screenH + "px";
document.documentElement.scrollTop = '0';
} else {
document.documentElement.style.height = 'auto';
document.documentElement.scrollTop = '0';
}
思路是,设置网页背景为白色,比较网页高度和屏幕高度,如果网页高度小于屏幕高度,就把网页高度设成屏幕高度。 Vue虽然不推荐直接操作DOM,但是在这个问题中,通过操作DOM能够最简便的解决问题,所以我觉得,该操作DOM的时候还是要用DOM,不要被“Vue中不推荐操作DOM”这句话局限了。
Vue开发微信公众号默认背景为灰色的更多相关文章
- vue开发微信公众号--开发准备
由于工作项目的原因,需要使用vue开发微信公众号,但是这种微信公众号更多是将APP套了一个微信的壳子,除了前面的授权和微信有关系以外,其他的都和微信没多大的关系了,特此记录 开发流程 首先需要在电脑上 ...
- 使用vue开发微信公众号下SPA站点的填坑之旅
原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...
- vue开发微信公众号--地图
在最近开发的微信公众号中,要实现一个打卡功能: 由于个人感觉微信SDK里面的地图不太好用,所以使用了腾讯地图. 在项目中引入腾讯地图 1,需要登录腾讯地图网站,注册一个账户,获得一个key. 2,然后 ...
- 使用vue开发微信公众号,解决微信缓存
1.页面加入标红的代码,让页面不缓存 <!DOCTYPE html> <html manifest="IGNORE.manifest"> <head& ...
- vux+vuex+vue+Es6开发微信公众号的坑
初次开发微信公众号遇到很多问题,可能是基础不怎么牢靠,最近几天一直在看vue的东西,现在就来慢慢介绍vux和vue这个骚东西的用法: 细看文档一步步来, npm install vux --save ...
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- vue+node.js+webpack开发微信公众号功能填坑——组件按需引入
初次开发微信公众号,整体框架是经理搭建,小喽喽只是实现部分功能,整体页面效果 整个页面使用两个组件:布局 FlexBox,搜索框 Search,demo文档 http://vue.ydui.org/d ...
- Java开发微信公众号(三)---微信服务器请求消息,响应消息,事件消息以及工具处理类的封装
在前面几篇文章我们讲了微信公众号环境的配置 和微信公众号服务的接入,接下来我们来说一下微信服务器请求消息,响应消息以及事件消息的相关内容,首先我们来分析一下消息类型和返回xml格式及实体类的封装. ( ...
- 小机器人自动回复(python,可扩展开发微信公众号的小机器人)
api来之图灵机器人.我们都知道微信公众号可以有自动回复,我们先用python脚本编写一个简单的自动回复的脚本,利用图灵机器人的api. http://www.tuling123.com/help/h ...
随机推荐
- Mysql 到 Hbase 数据如何实时同步,强大的 Streamsets 告诉你
很多情况大数据集群需要获取业务数据,用于分析.通常有两种方式: 业务直接或间接写入的方式 业务的关系型数据库同步到大数据集群的方式 第一种可以是在业务中编写代码,将觉得需要发送的数据发送到消息队列,最 ...
- Android近场通信---NFC基础(三)(转)
转自 http://blog.csdn.net/think_soft/article/details/8180203 过滤NFC的Intent 要在你想要处理被扫描到的NFC标签时启动你的应用程序,可 ...
- 解决“每次启动Access2010时都要求配置VS2008”的办法
我每次启动Access2010时都会要求配置VS2008,这大概是VS2008与office(Access2010)有冲突引起的.这里提供一种解决办法. 依次选择Access2010的文件-选项中-加 ...
- SpringBoot | Data Access
https://docs.spring.io/spring-boot/docs/current/reference/html/howto-data-access.html 配置数据源启动器.
- [題解](單調隊列dp)luogu_P1725琪露諾
比較簡單的單調隊列,但是有一些要注意的 維護單調隊列的時候裡面存的是入隊時間,而不是i,因為前面有l個沒有入隊(不可能走進),所以把i减一个l以达到延迟入队的效果 #include<bits/s ...
- java算法之冒泡排序
所有的冒泡排序算法都是一样的: 冒泡排序可以分为两种情况: 一种是将无序序列排序为由小到大的升序方式: 另一种情况是将无序序列转化成一种由大到小的降序排列:
- 转 JS 中的 this
转载至:https://segmentfault.com/a/1190000009215974 this的指向问题应该是让每一个前端er都头疼的问题,我也一样,曾经遇到甚至都是一顿乱猜.最近在研读一些 ...
- [已读]精通AngularJS
觉得可以看第二遍,内容其实还不错啦,就是翻译会有点生硬.
- java中 awt Graphics2D
Graphics2D ,Graphics 类,提供了对几何形状.坐标转换.颜色管理和文本布局更为复杂的控制.它是用于在 Java(tm) 平台上呈现二维形状.文本和图像的基础类.验证码生成可以用到此类 ...
- Linux 环境下安装 Nginx+php+mysql 开发环境
一直以来都没有养成记录学习的好习惯,我想从这么一天开始,把自己学习和工作中的经验和坑都记录下来.等到以后老的时候还有可以回忆的地方. 最近在学习linux,虽然已经玩linux很久了,但是没有怎么用心 ...