ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

form组件

2026/9/24 6:56:21 拓冰建站 浏览量
form组件 开始界面显示如下图所示此时光标自动出现在第一个输入框中并在屏幕下方弹出数字键盘在三个输入框中输入数据数据满足三角形的构成规则任意两条边的长度之和大于第三条边的长度点击 计算 按钮下面显示三角形的面积index.wxss文件page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } input, button { font-size: 40rpx; margin: 40rpx 0; } input { border-bottom: 2rpx solid blue; } .result { font-size: 40rpx; color: blue; }app.wxss文件/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid silver; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }index.js文件Page({ data: { visible: false, sideA: , sideB: , sideC: , area: 0 }, formSubmit(e) { console.log(e); let visible this.data.visible; let sideANum parseFloat(e.detail.value.a); let sideBNum parseFloat(e.detail.value.b); let sideCNum parseFloat(e.detail.value.c); let area 0; if ((sideANum sideBNum sideCNum) || (sideANum sideCNum sideBNum) || (sideBNum sideCNum sideANum)) { this.clear(); wx.showToast({ title: 问题三角形的两条边之和小于等于第三条边, icon: none, duration: 2000 }) return; } else { const s (sideANum sideBNum sideCNum) / 2; area Math.sqrt(s * (s - sideANum) * (s - sideBNum) * (s - sideCNum)); } if (area 0) { visible true; } else { visible false; } this.setData({ area, visible }) }, clear() { this.setData({ sideA: , sideB: , sideC: , visible: false }) }, resetBtn() { this.clear() } })navigation-bar titleform组件 back{{false}} colorblack background#fff/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle三角形面积计算器/view form bindsubmitformSubmit input typedigit placeholder请输入三角形第一条边长 namea focustrue value{{sideA}}/ input typedigit placeholder请输入三角形第二条边长 nameb value{{sideB}}/ input typedigit placeholder请输入三角形第三条边长 namec value{{sideC}}/ button typeprimary form-typesubmit计算/button button bindtapresetBtn重置/button /form view wx:if{{visible}} classresult三角形的面积为{{area}}/view /view /scroll-view本文实现了一个三角形面积计算器小程序。用户在三个输入框中输入边长系统验证是否满足三角形构成条件任意两边之和大于第三边若不满足则提示错误否则使用海伦公式计算并显示面积。界面采用flex布局支持数字键盘输入具备提交与重置功能交互友好逻辑清晰。