第三章:和弦查询
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”/>
<buttonformType="submit"type=“primary”>计算
<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