专栏首页sktj微信小程序 加法计算器

微信小程序 加法计算器

1、新建目录calc 2、pages加上 "pages/calc/calc",

3、 calc.wxml <view class="container"> <input placeholder="被加数" bindinput="bindInput1" /> <input placeholder="加数" bindinput="bindInput2" /> <button type="primary" bindtap="bindAdd">计算</button> <input placeholder="结果" value="{{result}}" disabled /> </view>

4、calc.wxss /* pages/calc/calc.wxss */ .container{ justify-content: flex-start; padding: 30rpx 0; }

.container input{ background-color: #eee; border-radius:3px; text-align:left; width:720rpx; height:100rpx; line-height:100rpx; margin:20rpx; }

.container button{ width:80%; }

5、calc.json { "navigationBarBackgroundColor":"#00ff00", "navigationBarTitleText":"加法计算器", "navigationBarTextStyle":"white", "usingComponents": {} }

6、calc.js // pages/calc/calc.js Page({

/**

  • 页面的初始数据 / data: { num1:"", num2:"", result:"" }, bindAdd:function(e){ var r=this.data.num11+this.data.num2*1; this.setData({ result:r }); }, bindInput1:function(e){ var n=e.detail.value; if(!isNaN(n)){ this.setData({ num1:n }); } }, bindInput2: function (e) { var n = e.detail.value; if (!isNaN(n)) { this.setData({ num2: n }); } } })

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • python dropwhile跳过开头的几行

    用户5760343
  • flask 使用flask_moment

    //不要和bootstrap同时使用,会冲突 from flask import Flask from flask import render_templa...

    用户5760343
  • flask avatars设置头像(flask 80)

    from flask import Flask, render_template, request from flask_avatars import Ava...

    用户5760343
  • CSS calc() 函数

    做了几年的移动开发,写UI界面时,总是受移动端影响,喜欢拿屏幕的宽度-固定值,在刚开始写CSS样式时,适配各种屏幕大小总是在JS中来动态改变控件的宽高,用了ca...

    honey缘木鱼
  • calc

    super.x
  • 自定义属性--和calc

    最近在弄练习写demo11,写到有关于 --XXX的自定义属性,calc,平时很少用,比较生面口,于是将它mark下来。

    张炳
  • Docker适合哪些场景

    Docker 不是万能的,我们不能够期盼在 Docker 容器中运行所有的东西。符合 Heroku 公司 12 要素 ( https://12factor.ne...

    后场技术
  • 深度:女版“乔布斯”覆灭记!硅谷美女CEO被曝百亿美元大骗局

    你有没有想过,如果在 2019 年,你可以心想事成,那你的人生巅峰最好可以混成什么样子?

    量子位
  • SQL使用(一):如何使用SQL语句去查询第二高的值

    初看了一眼题时,脑子还有一点迷糊,对于数值最大的和最小的,可以使用max和min去查询出来,但对于第N的就不好找了,思考了一会儿了,心里大致有二个思路:

    王豆豆
  • 如何解决容器网络性能及复杂网络部署问题?

    近两年,容器已经随着 Docker 技术的传播火遍全球,现在已经有越来越多的企业用户在开发、测试甚至生产环境中开始采用 Docker 等容器技术。 然而,目前主...

    CSDN技术头条

扫码关注云+社区

领取腾讯云代金券