主界面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. noi.ac #546 分组

    题目链接:戳我 题目描述 现在有n个字符串,你需要从中选出一些字符串,使得选出的字符串能被分组,满足每组大小为2,且可以从每组选出该组的两个字符串的一个非空公共后缀,使得每组选出的串互不相同. 输入格 ...

  2. 11-ajax

    Ajax   1.什么是ajax Asynchronous JavaScript and XML(异步JavaScript和XML) 节省用户操作,时间,提高用户体验,减少数据请求 传输获取数据 特点 ...

  3. CodeForces–830A--二分，贪心

    Office Keys time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...

  4. HDU6140--Hybrid Crystals（思维）

    Hybrid Crystals Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  5. 1.Linux常用命令大全

    系统信息 arch 显示机器的处理器架构uname -m 显示机器的处理器架构uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS / DMI) h ...

  6. linux vmware 安装步骤

    一.下载vmware软件 二.下载centos镜像文件 三.安装步骤 以上相当于于硬件设备已经准备ok,接下来安装软件

  7. （十七）C语言之变量

  8. 黑马vue---10-11、Vue实现跑马灯效果

    黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件   v-on   @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...

  9. How to intercept any postback in a page? - ASP.NET

    How to intercept any postback in a page? - ASP.NET There's a couple of things you can do to intercep ...

  10. 转载 筛子算法之golang实现求素数解析

    package main import "fmt" // Send the sequence 2, 3, 4, ... to channel 'ch'. func generate ...