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

码猿杂谈

于 2019-06-26 11:29:01 发布

阅读量1.2w

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/kevin_lp/article/details/93723736

版权

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

7 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以计算器中单位换算为例，点击按钮后跳转到相关页面。
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.csdn.net/download/kevin_lp/11931364