页面效果

页面样式

/**index.wxss**/view {margin: 50rpx;
}input {width: 600rpx;margin-top: 20rpx;border-bottom: 2rpx solid #ccc;
}button {margin: 50rpx;
}button {color: #fff;background: #FF6000;letter-spacing: 12rpx;
}

页面设计

<!--index.wxml-->
<view><text>请输入第1个数字：</text><input type="number" bindchange="num1change" />
</view>
<view><text>请输入第2个数字：</text><input type="number" bindchange="num2change" />
</view>
<button bindtap="compare">比较</button>
<view><text>比较结果：{{result}}</text>
</view>

页面逻辑

// index.js
// 获取应用实例
const app = getApp()Page({/*** 页面的初始数据*/data: {result: ''},num1: 0, // 保存第1个数字num2: 0, // 保存第2个数字num1change: function(e) {this.num1 = Number(e.detail.value)//e.detail.value获取用户输入的值，Number()将字符串转移为数字类型console.log('第1个数字为' + this.num1)},num2change: function(e) {this.num2 = Number(e.detail.value)console.log('第2个数字为' + this.num2)},compare: function(e) {var str = '两数相等'if (this.num1 > this.num2) {str = '第1个数大'} else if (this.num1 < this.num2) {str = '第2个数大'}this.setData({result: str})// this.data.result = str // 这种方式无法改变页面中的{{result}}的值}
})

微信小程序案例——比较数字大小案例相关推荐

《微信小程序：开发入门及案例详解》—— 3.4 小结
本节书摘来自华章出版社<微信小程序:开发入门及案例详解>一书中的第3章,第3.4节,作者李骏边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.4 小 ...
微信小程序canvas2d使用封装与案例使用
微信小程序canvas2d使用封装与案例使用,看一下这边封装效果 canvas2d文档:https://www.canvasapi.cn/ 下载地址:https://download.csdn.net ...
第7课微信小程序实现图片搜索器案例：
第7课微信小程序实现图片搜索器案例: 效果图如下: 手机运行效果: 来我们来看看代码的全局样式: 首先在app.json内的pages把需要的index1.index2页面注册之后我们只需写ind ...
微信小程序js把数字转化成字母
微信小程序 js 把数字转化成字母微信小程序 js 把数字转化成字母 for (let i = 0; i < 26; i++) {list[i] = {};list[i].name = Str ...
微信小程序：限制上传图片大小
微信小程序:限制上传图片大小 page({data:{Size:2*1024*1024,//定义大小}, )} //限制上传图片大小(2M)for(let i=0;i<res.tempFiles ...
uniapp 、微信小程序 text 字母数字不换行
uniapp . 微信小程序 text 字母数字不换行设置css 试试 word-break: break-all; word-wrap: break-word;
微信小程序input为数字键盘
微信小程序input为数字键盘微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点 ...
微信小程序动态计算图片大小
微信小程序动态计算图片大小方法一使用图片的mode属性手动计算给图片绑定事件bind:load,回调函数名为onImgLoad 编写回调函数,width为340是图片容器的宽度 method ...
c语言京东购物系统,仿京东商城: 自主使用微信小程序实现的网上商城案例（包括前端和后台），利用了微信小程序的云数据库...
仿京东网上商城介绍自主使用微信小程序实现的仿京东网上商城案例(包括前端和后台),数据库利用了微信小程序的云数据库软件架构软件架构说明数据库表设计本系统数据库主要用了微信小程序自带的云数据库 ...
“喜茶Go”微信小程序新零售商业实战案例经验分享－概述
作者介绍:郝天翔,10年移动互联网软件行业经验,全栈高级软件工程师,微信生态开发先行者,主要参与智慧城市新零售电商领域方案的设计与实施,本次分享商业案例"喜茶Go"已落地于全国多座 ...

微信小程序案例——比较数字大小案例

页面效果

页面样式

页面设计

页面逻辑

微信小程序案例——比较数字大小案例相关推荐

最新文章

热门文章