微信小程序点击按钮切换页面

最新推荐文章于 2025-10-21 19:37:27 发布

原创最新推荐文章于 2025-10-21 19:37:27 发布 · 1.2w 阅读

23 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个基于微信小程序的计算器单位换算功能实现过程，包括按钮布局、响应函数及跳转页面的具体代码示例。通过点击不同类型的换算按钮（如长度、速度、重量、热量），可以跳转至相应的换算页面。

以计算器中单位换算为例，点击按钮后跳转到相关页面。
1、calc.wxml，按钮布局
在这里插入图片描述

长度
速度

重量
热量

2、长度界面，跳转后的页面

3、calc.js，响应点击函数
Page({
data: {
id1: “length”,
id2: “speed”,
id3: “weight”,
id4: “heat”,
},

clickBtn: function (event) {
var id = event.target.id;
if (id == this.data.id1) { //长度
wx.navigateTo({
url: ‘/pages/mypages/calc/length/length’,
})
}

else if (id == this.data.id2) { //速度
wx.navigateTo({
url: ‘/pages/mypages/calc/speed/speed’,
})
}

else if (id == this.data.id3) { //重量
wx.navigateTo({
url: ‘/pages/mypages/calc/weight/weight’,
})
}
else if (id == this.data.id4) { //热量
wx.navigateTo({
url: ‘/pages/mypages/calc/heat/heat’,
})
}
}
})
4、具体功能可参考：
在这里插入图片描述
5、源码下载链接
https://download.youkuaiyun.com/download/kevin_lp/11931364