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

主界面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）

转载于:https://www.cnblogs.com/liushiqiang123/p/8516420.html

四则运算计算器的微信小程序_1 界面相关推荐

微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
微信小程序初始界面设置密码
如何在微信小程序初始界面输入密码,看到网上给出了很多方法,较为常见的是如何输入一个六位密码.这里介绍一种觉得比较可行的方法,具体实现如下: 最终效果: 代码实现: wxml: <input cl ...
php欢迎界面代码,分享微信小程序欢迎界面开发的实例代码
这篇文章主要分享微信小程序欢迎界面开发的实例代码的相关资料,这里实现欢迎界面的简单实例和实现代码及实现效果图,需要的朋友可以参考下微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将 ...
微信小程序之界面交互API07
微信小程序之界面交互API07 关于界面交互,在官方文档上提供了API来 wx.showToast(Object object) 土司(只有提示,会在延迟时间过后消失)! 显示消息提示框参数 Obj ...
视频教程-微信小程序商城-界面设计实战教学(含源代码)-微信开发
微信小程序商城-界面设计实战教学(含源代码) 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥90.00 ...
微信小程序科学计算器（微信小程序+java+python）
微信小程序之科学计算器 (微信小程序+java+python) 先把自己的小程序和页面贴出来 1.前后端实现步骤: 1.前端采用的就是微信小程序开发工具,后端采用的是以springboot为基础,调用 ...
微信小程序开发界面介绍
这里是引用主要是简单的介绍一下微信小程序开发界面的各个文件先看下这个图片这是最简单的目录了 pages: 所有的页面都要在这里面创建,在这里面创建的页面需要在app.json里面添加一下路径如下 ...
2、微信小程序开发界面
2.微信小程序开发界面针对于上节需要补充的点在新建微信小程序时,要注意区分微信公众号IP和微信小程序IP.我们在开发小程序的时候是要用微信小程序IP不然编译不了哈哈哈. 左边是模拟器的视图,右边是 ...
如何让小程序页面更顺滑_微信小程序|实现界面滑动切换
问题描述在许多用户体验效果较好的微信小程序中,用户通过左右滑动界面也能实现页面的切换,方便了用户使用,那它们是如何实现的呢? 解决方案图 1 标签页切换在图1中,顶部的 3 个标签页标题用 ...

四则运算计算器的微信小程序_1 界面

四则运算计算器的微信小程序_1 界面相关推荐

最新文章

热门文章