主界面wxml文件：
page{
height:100%;
}
.content{
min-height:100%;
display:flex;
flex-direction:column;
align-items:center;
box-sizing:border-box;
position:relative;
}
.main-bg{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:-1;
}
.screen-container{
padding-top:30rpx;
padding-left:5rpx;
padding-right:5rpx;
}
.screen{
">#fff;
border-radius:3px;
text-align:right;
width:720rpx;
height:100rpx;
line-height:100rpx;
padding-left:10rpx;
padding-right:10rpx;
margin-bottom:30rpx;
 
}
.btnGroup{
display:flex;
flex-direction:row;
}
.item{
width:160rpx;
min-height:10rpx;
margin:10rpx;
text-shadow:0 1px 1px rgba(0,0,0,.3);
border-radius:5px;
text-align:center;
line-height:150rpx;
display:inline-block;
}
.green{
color:#d9eef7;
border:solid 0px #da7c0c;
background:#99cc66;
}
.blue{
color:#d9eef7;
border:solid 0px #0076a3;
background:#0095cd;
}
 
主界面wxss文件：
page{
height:100%;
}
.content{
min-height:100%;
display:flex;
flex-direction:column;
align-items:center;
box-sizing:border-box;
position:relative;
}
.main-bg{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:-1;
}
.screen-container{
padding-top:30rpx;
padding-left:5rpx;
padding-right:5rpx;
}
.screen{
">#fff;
border-radius:3px;
text-align:right;
width:720rpx;
height:100rpx;
line-height:100rpx;
padding-left:10rpx;
padding-right:10rpx;
margin-bottom:30rpx;
 
}
.btnGroup{
display:flex;
flex-direction:row;
}
.item{
width:160rpx;
min-height:10rpx;
margin:10rpx;
text-shadow:0 1px 1px rgba(0,0,0,.3);
border-radius:5px;
text-align:center;
line-height:150rpx;
display:inline-block;
}
.green{
color:#d9eef7;
border:solid 0px #da7c0c;
background:#99cc66;
}
.blue{
color:#d9eef7;
border:solid 0px #0076a3;
background:#0095cd;
}

（原项目作者：忽如寄 （简书）

原文链接：https://www.jianshu.com/p/47c1a65009a7）

四则运算计算器的微信小程序_1 界面的更多相关文章

  1. 四则运算计算器的微信小程序_2 运算

    js文件: function isOperator(value) {   var operatorString = '+-*/()×÷';   return operatorString.indexO ...

  2. 微信小程序的界面下拉刷新

    小程序的下拉刷新的值设置:需要设置app.json的window中 "navigationBarTextStyle":true  

  3. 微信小程序--分享界面自定义图片

    一般小程序页面都会大于等于1页,每个页面右上角都会有分享功能,建议把以下方法封装到app.js文件,在页面直接调用该方法,避免重复代码,提高性能.(代码用到ES6语法,若不支持,请自行还原js) // ...

  4. 微信小程序之界面交互反馈

    交互反馈就是在用户出发某事件之后,给用户一个反馈信息,这要是一个很友好的习惯. 在小程序中是通过一下几种方式实现的: 1.wx.showToast()方法 showToast: function (p ...

  5. 微信小程序 API 界面（1）

    界面 有关屏幕的api 交互: wx.showToast() 显示消息提示框 参数:object object的属性: title:类型 字符串 提示的内容(文本最多7个汉字) icon:类型 字符串 ...

  6. 微信小程序 API 界面 （2）

    由于每个 API 参数:对象的属性都有 success,fail,complete,所以在这个提前介绍,就不再每个API 上写了 success:类型 函数 接口调用成功的回调函数 fail:类型 函 ...

  7. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  8. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. 从零开始学做微信小程序，看这些就够了！

    随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中.小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序?此文,将列出OSC上 ...

随机推荐

  1. 本地创建的项目使用版本管理(git)推送至远端。

    1.创建项目 mkdir nidexiangmu cd nidexiangmu touch README.md 2.使用 git 命令管理 git init // 建立本地仓库 git add . / ...

  2. Ansible常用模块之命令类模块

    Command模块 在远程节点上执行命令 [root@tiandong ~]# ansible all -m command -a "ls" 在远程主机上执行ls命令. [root ...

  3. 教程：myeclipse在线安装svn插件

    SVN 版本控制,相信开发过程中都很多有用到,今天在myeclipse 在线安装了SVN插件.下面是具体步骤,记录下,希望对有需要的朋友提供帮助. 要求: Myeclispe,电脑能连接互联网 步骤: ...

  4. sublime tab转4个空格配置

    打开Sublime Text3,选择菜单Preferences->Settings-User,打开用户配置文件 然后在大括号里加上下面两行代码: "tab_size": 4, ...

  5. Word文档怎么从第二页加页码

    1.首先将光标放到首页的最后位置 2.“页面布局”—“分隔符”—“下一页” 3.“插入”—“页码”—选一种样式的页码 4.将光标定位到第二页的页脚处,“设计”—取消“链接到前一条页眉” 5.将第二页的 ...

  6. TCP之11种状态变迁

    1. TCP 之11种状态变迁 TCP 为一个连接定义了 11 种状态,并且 TCP 规则规定如何基于当前状态及在该状态下所接收的分节从一个状态转换到另一个状态.如,当某个应用进程在 CLOSED 状 ...

  7. 设置Chart.js默认显示Point点的值不用鼠标经过才显示

    Chart.js默认的显示方式是鼠标经过Point点的时候才会显示这个点的值,代码如下: var testdata: { periodNum: ["2018121","2 ...

  8. linux中的i2c控制器驱动应该做些什么？

    答:完成读写功能即可,不要涉及任何针对从设备的特殊操作,这样就可以避免与从设备的代码产生冗余,linux中的i2c控制器驱动就做的特别棒,做好最简单的读写,然后其它的从设备驱动就是直接调用这些最简单的 ...

  9. Find Method Sign Line Number

    package java9; import java.io.IOException; import java.nio.file.Files; import java.nio.file.Paths; i ...

  10. re 模块， 正则表达式 \w+\d+ 的重复问题引发的题目解析

    题目 计算以下代码的结果 s = "?!.18)dajslj$12.15613sdadw.123sdasda35615.168sndsda$15.6sdasd.sdfsdgw123.156s ...