和弦查询

本文档展示了如何使用微信小程序开发一个和弦查询应用,通过点击按钮显示不同和弦对应的图片。此外,还包含了一个简单的诉讼费计算器功能,用户输入标的金额后,程序会计算出相应的诉讼费用。最后,还提到了一个仿菜谱的专题页面,展示了一系列菜谱图片和详细信息。整个应用涵盖了用户交互、数据显示和简单计算等基本功能。
摘要由CSDN通过智能技术生成

第三章:和弦查询
App.json:
“pages/uk/uk”

App.js 空

Uk.js:
Page({
//初始赋值
data:{
src:’…/images/c.png’,
btnc:‘active’,
btnd:‘inactive’,
btne:‘inactive’,
btnf:‘inactive’,
btng:‘inactive’,
btna:‘inactive’,
btnb:‘inactive’

    },

//点击按钮C触发事件,加进图片和定义按钮
c:function(){
this.setData({
src:’…/images/c.png’,
btnc:‘active’,
btnd:‘inactive’,
btne:‘inactive’,
btnf:‘inactive’,
btng:‘inactive’,
btna:‘inactive’,
btnb:‘inactive’
})
},

d:function(){
this.setData({
src:’…/images/d.png’,
btnc:‘inactive’,
btnd:‘active’,
btne:‘inactive’,
btnf:‘inactive’,
btng:‘inactive’,
btna:‘inactive’,
btnb:‘inactive’
})
}
})

Uk.wxml:(class动态)
<viewclass=“body”>
<viewclass=“flex-row”>
<viewbindtap='c’class="{ {btnc}}">C
<viewbindtap='d’class="{ {btnd}}">D
<viewbindtap='e’class="{ {btne}}">E
<viewbindtap='f’class="{ {btnf}}">F
<viewbindtap='g’class="{ {btng}}">G
<viewbindtap='a’class="{ {btna}}">A
<viewbindtap='b’class="{ {btnb}}">B


<imagemode=“scaleToFill"src=”{ {src}}">



<viewclass=“foot”>
制作人易伟

Uk.wxss:
/* pages/uk/uk.wxss /
/
主体页面布局,两边留白*/
.body{margin:0rpx10rpx25rpx25rpx;

}
/*flew水平布局 */
.flex-row{
display:flex;
flex-direction:row;

}
/未激活按钮/
.inactive{
display:inline-block;
padding:9.6rpx16rpx;
background-image:linear-gradient(#ddd, #bbb);
border:2rpxsolidrgba(0,0,0,.2);
border-radius:9.6rpx;

text-align:center;

color:white;
font-weight:bold;
width:100rpx;
}
/激活按钮/
.active{

display:inline-block;
padding:9.6rpx16rpx;
background-image:linear-gradient(#ddd, #bbb);
border:2rpxsolidrgba(0,0,0,.2);

background:#bbb;
border-radius:9.6rpx;

text-align:center;

color:white;
font-weight:bold;
width:100rpx;
}
/尾部样式/
.foot{
text-align:center;
font-family:SimSun;
font-size:40rpx;
background-color:lightgray;

}

第四章:诉讼费计算
App.josn:
{
“pages”:[
“pages/index/index”,
“pages/divorce/divorce”
],
“window”:{
“backgroundTextStyle”:“light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “诉讼费计算器”,
“navigationBarTextStyle”:“black”
},
“tabBar”:
{
“list”(带值跳转): [{
“pagePath”: “pages/index/index”,
“text”: “财产”,
“iconPath”:“pages/images/m2.png”,
“selectedIconPath”:“pages/images/m1.png”
},
{
“pagePath”: “pages/divorce/divorce”,
“text”: “离婚”,
“iconPath”:“pages/images/n2.png”,
“selectedIconPath”:“pages/images/n1.png”
}]
}
}

Index.wxml:
<viewclass=“page”>

<viewclass=“body”>

财产标的金额(单位元):
<formbindsubmit="formSubmit"bindreset=“formReset”>
<viewclass=“input”>
<inputname="input"placeholder="标的金额"type=“number”/>

\n

<buttonformType="submit"type=“primary”>计算
\n
<buttonformType=“reset”>重置

Index.wxml:
/index.wxss/
.page {
margin-top:40rpx;
margin-left:40rpx;
margin-right:40rpx;
font-size:47rpx;
}
.body{
font-size:45rpx;
background-color:mintcream;

}
.input{
font-size:43rpx;
background-color:lightgrey;
}

.foot{
font-size:38rpx;
position:relative;
left:25%;
}

Index.js:
Page({
//初始化赋值
data: {
fei:’’,
fei2:’’,
},

formSubmit: function(e) {
var a=Number(e.detail.value.input)//标的,强转为数值
var b=0//诉讼费
var c=0//减半
//显示计算结果
this.setData({
fei: b.toFixed(2),//两位小数
fei2:c.toFixed(2),
})
},
//重置功能
formReset: function() {
this.setData({
fei:’’,
fei2:’’,
})
}
})

divorce.wxml:
<switchbindchange=“switch1Change”/>是否涉及财产分割
viewwx:if="{ {condition}}"

divorce.js:
switch1Change: function (e){
this.setData({
condition:e.detail.value,
fei3:’’,
fei4:’’,
})
},

第二章:仿菜谱
底部导航:
App.josn:
“window”:{
“backgroundTextStyle”:“light”,
“navigationBarBackgroundColor”: “#494949”,
“navigationBarTitleText”: “专题”,
“navigationBarTextStyle”:“white”
},
“tabBar”: {
“backgroundColor”: “#303133”,
“color”: “#ffffff”,
“selectedColor”: “#CC1004”,
“list”: [{
“pagePath”: “pages/subject/subject”,
“text”: “专题”,
“iconPath”: “pages/images/tab/subject-0.jpg”,
“selectedIconPath”: “pages/images/tab/subject-1.jpg”
},{
“pagePath”: “pages/classify/classify”,
“text”: “分类”,
“iconPath”: “pages/images/tab/classify-0.jpg”,
“selectedIconPath”: “pages/images/tab/c

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值