主界面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. ACM-ICPC 2018 沈阳赛区网络预赛 I 题 Lattice's basics in digital electronics

    原题链接:https://nanti.jisuanke.com/t/31450 附上队友代码:(感谢队友带飞) #include <bits/stdc++.h> using namespa ...

  2. clone的fork与pthread_create创建线程有何不同&pthread多线程编程的学习小结(转)

    进程是一个指令执行流及其执行环境,其执行环境是一个系统资源的集合,这些资源在Linux中被抽 象成各种数据对象:进程控制块.虚存空间.文件系统,文件I/O.信号处理函数.所以创建一个进程的 过程就是这 ...

  3. 关于MapReduce的测试

    题目:数据清洗以及结果展示 要求: Result文件数据说明: Ip:106.39.41.166,(城市) Date:10/Nov/2016:00:01:02 +0800,(日期) Day:10,(天 ...

  4. VS下创建网站发布到IIS

    http://www.51zxw.net/show.aspx?id=27297&cid=410

  5. js移动端触屏事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  6. koa2环境搭建

    npm install -g koa-generator koa2 ssy-koa2 cd ssy-koa2 npm install

  7. [ASP.NET应用到的时间处理函数]

    第一种形式: System.DateTime.Now.ToString("D");         //2017年6月2日 System.DateTime.Now.ToString ...

  8. GLSL语法入门

    变量 GLSL的变量命名方式与C语言类似.变量的名称可以使用字母,数字以及下划线,但变量名不能以数字开头,还有变量名不能以gl_作为前缀,这个是GLSL保留的前缀,用于GLSL的内部变量.当然还有一些 ...

  9. stm8问题记录

    sprintf 错误 现象:打印不出来数字 需要包含#include<stdio.h>

  10. LC 807. Max Increase to Keep City Skyline

    In a 2 dimensional array grid, each value grid[i][j] represents the height of a building located the ...