微信小程序案例一：成绩计算

效果图

2.WXML文件

属性 bindinput 的类型为 handlerEvent 除了date/time 类型的输入框，当键盘输入时触发 input 事件，e.detail = {value:value} 除了函数可以直接 return 一个字符串，替换input中的内容。

<input placeholder="请输入你的名字" placeholder-class="placeholder" bindinput='nameInput'></input>
<input placeholder="请输入语文成绩" placeholder-class="placeholder" bindinput='chineseInput' type='number'></input>
<input placeholder="请输入数学成绩" placeholder-class="placeholder" bindinput='mathInput' type='time'></input>
<button bindtap='mysubmit'>提交</button><view hidden='{{flag}}' class='content'><view class='content-item'>姓名:{{name}}</view><view class='content-item'>语文成绩：{{chinese_score}}</view><view class='content-item'>数学成绩:{{math_score}}</view><view class='content-item'>评价分:{{avrage}}</view>
</view>

3 WXSS 文件

page{background: #f1f0f6
}.placeholder{font-size: 15px;
}input{background: #fff;height: 120rpx;margin-bottom: 1px;padding-left: 8px;
}button{margin: 30rpx 50rpx;background-color: red;color: white;
}.content{background: #fff;padding: 10px;color:#f00
}
.content-item{padding: 3rpx;font-size: 16px;line-height: 30px;
}

4 WXJS 文件

// pages/case1/case1.js
Page({/*** 页面的初始数据*/data: {flag:true,name:'',chinese_score:'',math_score:'',avrage:''},nameInput:function(e){this.setData({name:e.detail.value});},chineseInput:function(e){this.setData({chinese_score:e.detail.value});},mathInput:function(e){this.setData({math_score:e.detail.value});},/*** 提交事件*/mysubmit:function(){if(this.data.name == ''||this.data.chinese_score==''||this.data.math_score==''){return;}else{var avg = (this.data.chinese_score*1 + this.data.math_score*1 )/2;this.setData({avrage : avg,flag: false});}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

参考地址：http://www.51zxw.net/show.aspx?id=66808&cid=657

微信小程序案例一成绩计算相关推荐

微信小程序案例TODO备忘录
微信小程序案例TODO备忘录微信小程序案例TODO备忘录本节展示一个制作todo备忘录的案例讲解代码:https://github.com/Harryjun/WeChatPrj/tree/mas ...
微信小程序云开发成绩查询小程序的制作过程。
微信小程序云开发成绩查询小程序的制作过程. 如果觉得我讲的好可以点个关注. 明确自己的目的,到底要做一个怎么样的小程序. 我先上效果图: 确定后就可以开始自己布局.主要是用css 1.先看首页,首页主 ...
微信小程序案例——简易前端与云数据库的使用
实现内容--英语一成绩分析小师Version1.0.0 首页显示云数据库的储存数据. 记录页储存数据. 文件夹/文件功能 images 储存用到的图片 pages 包括首页和记录页的配置文件 app ...
小程序加入人脸识别_人脸识别微信小程序案例：11.案例概述
1案例介绍本项目将应用python.mongodb.tornado.pymongo.ip2region.dlib.pillow.opencv.werkzeug.wtforms.wxss/wxml/j ...
《微信小程序案例5》仿小米Lite小程序分类板块-两个纵向滚动区域独立互不影响
一.小米Lite分类板块图二.技术分解 1.布局是分为左右两个纵向滚动区域,使用 <scroll-view> 2.每个小菜单的如图片标题等内容使用js里面的data来保存 3.如此 ...
微信小程序案例：获取微信访问用户的openid
在微信开发项目中,获取openid是项目常遇的问题,本文通过主要讲解实现在微信小程序中如何获取用户的openid,案例实现非常简单具体实现方法是通过登录接口获取登录凭证,然后通过request请求微 ...
微信小程序案例源码-cocos creator跨平台开发小游戏案例
前言本人一直想学习游戏开发,以前做过Android游戏开发,但电脑坏了,所有源码都没有了,后面也就没有开发了,近来下班之余又想开发游戏了.开发游戏之前,需要考虑开发平台及语言,以前基于Android ...
微信小程序案例php,微信小程序实现删除处理的案例
这篇文章主要为大家详细介绍了微信小程序删除处理的相关代码,用小程序里的模态框实现删除,具有一定的参考价值,感兴趣的小伙伴们可以参考一下没有 confrim 那怎么实现这个效果呢? 可以使用小程序里的 ...
《微信小程序案例12》图片识别功能
一.实现效果二.查看百度AI开发平台文档该功能是直接使用百度AI开发平台的动物识别接口,这个接口有两个重要的参数,一是需要获取access_token.二是需要把上传的图片编码为base64.而获 ...

微信小程序案例一成绩计算

微信小程序案例一：成绩计算

微信小程序案例一成绩计算相关推荐

最新文章

热门文章

微信小程序案例一 成绩计算

微信小程序案例一 ：成绩计算

微信小程序案例一 成绩计算相关推荐

最新文章

热门文章

微信小程序案例一成绩计算

微信小程序案例一：成绩计算

微信小程序案例一成绩计算相关推荐