小程序折叠菜单【标题内容】

版权声明:菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/80894662

<!--WXML-->
< view style= 'padding-top:20rpx;' >
< view class= 'head_cont' >
< view class= 'head_write' ></ view >
< label class= 'head_title' >猜您想问 </ label >
</ view >
< view class= "names hide{{showView?'show':''}}" bindtap= "onChangeShowState" >
< label class= 'hide_name' >< image class= 'ques_img' src= '../../image/Q.png' ></ image >{{showView?'新用户如何登录?':'新用户如何登录?'}} </ label >
< image class= 'shows_img' src= '../../image/eee.png' ></ image >
</ view >
< view class= "names hide{{showView?'':'show'}}" bindtap= "onChangeShowState" >
< label class= 'hide_name' >< image class= 'ques_img' src= '../../image/Q.png' ></ image >{{showView?'新用户如何登录?':'新用户如何登录?'}} </ label >

< image class= 'shows_img' src= '../../image/[email protected]' ></ image >
</ view >
< view class= "hide{{showView?'show':''}}" >
< view class= 'cutab_two' >
< image class= 'anser_img' src= '../../image/[email protected]' ></ image >< label class= 'cutab_two_name' >1.通过扫码或搜索e车家族进去小程序。 </ label >
</ view >
< view class= 'cutab_two' >
< label class= 'cutab_two_names' >2.输入手机号获取验证码。 </ label >
</ view >

</ view >
<!--新用户如何让登录-->
<!--挪车二维码如何领取-->
< view >
< view class= "names show_hide{{showViews?'show_show':''}}" bindtap= "btn_show" >
< label class= 'hide_name' >< image class= 'ques_img' src= '../../image/Q.png' ></ image > {{showView?'如何领取挪车码?':'如何领取挪车码?'}} </ label >
< image class= 'shows_img' src= '../../image/eee.png' ></ image >
</ view >
< view class= "names show_hide{{showViews?'':'show_show'}}" bindtap= "btn_show" >
< label class= 'hide_name' >< image class= 'ques_img' src= '../../image/Q.png' ></ image >{{showView?'如何领取挪车码?':'如何领取挪车码?'}} </ label >
< image class= 'shows_img' src= '../../image/[email protected]' ></ image >
</ view >
</ view >
< view class= "show_hide{{showViews?'show_show':''}}" >
< view class= 'cutab_two' >
< image class= 'anser_img' src= '../../image/[email protected]' ></ image >< label class= 'cutab_two_name' >1.拨打客服电话,留下您的邮寄地址和电话,我们为您邮寄到家。 </ label >
</ view >
< view class= 'cutab_two' >
< label class= 'cutab_two_names' >2.拨打客户电话,了解与您最近的发放点,上门领取。 </ label >
</ view >
</ view >
<!--挪车二维码如何领取-->

<!--挪车服务如何领取 -->
< view >
< view class= "names show_tab3_hide{{show_tab3?'show_tab3_show':''}}" bindtap= "show_tab3" >
< label class= 'hide_name' >< image class= 'ques_img' src= '../../image/Q.png' ></ image >{{show_tab3?'挪车服务怎么使用?':'挪车服务怎么使用?'}} </ label >
< image class= 'shows_img' src= '../../image/eee.png' ></ image >
</ view >
< view class= "names show_tab3_hide{{show_tab3?'':'show_tab3_show'}}" bindtap= "show_tab3" >
< label class= 'hide_name' >< image class= 'ques_img' src= '../../image/Q.png' ></ image >{{show_tab3?'挪车服务怎么使用?':'挪车服务怎么使用?'}} </ label >
< image class= 'shows_img' src= '../../image/[email protected]' ></ image >
</ view >
</ view >
< view class= "show_tab3_hide{{show_tab3?'show_tab3_show':''}}" >
< view class= 'cutab_two' >
< image class= 'anser_img' src= '../../image/[email protected]' ></ image >< label class= 'cutab_two_name' >1.进入挪车服务,点击扫码挪车。 </ label >
</ view >
< view class= 'cutab_two' >
< label class= 'cutab_two_names' >2.扫描挪车车辆二维码。 </ label >
</ view >
< view class= 'cutab_two' >
< label class= 'cutab_two_names' >3.输入挪车车牌号。 </ label >
</ view >
< view class= 'cutab_two' >
< label class= 'cutab_two_names' >4.拨打电话. </ label >
</ view >
</ view >
<!--挪车服务如何领取 -->

<!--次卡如何办理 -->
< view >
< view class= "names show_tab4__hide{{show_tab4?'show_tab4_show':''}}" bindtap= "show_tab4" >
< label class= 'hide_name' >< image class= 'ques_img' src= '../../image/Q.png' ></ image >{{show_tab4?'次卡如何办理?':'次卡如何办理?'}} </ label >
< image class= 'shows_img' src= '../../image/eee.png' ></ image >
</ view >
< view class= "names show_tab4__hide{{show_tab4?'':'show_tab4_show'}}" bindtap= "show_tab4" >
< label class= 'hide_name' >< image class= 'ques_img' src= '../../image/Q.png' ></ image >{{show_tab4?'次卡如何办理?':'次卡如何办理?'}} </ label >
< image class= 'shows_img' src= '../../image/[email protected]' ></ image >
</ view >
</ view >
< view class= "show_tab4__hide{{show_tab4?'show_tab4_show':''}}" >
< view class= 'cutab_two' >
< image class= 'anser_img' src= '../../image/[email protected]' ></ image >< label class= 'cutab_two_name' >1.进入我的,找到会员卡模块点击立即办理。 </ label >
</ view >
< view class= 'cutab_two' >
< label class= 'cutab_two_names' >2.选择要办理的种类。 </ label >
</ view >
</ view >
<!--次卡如何办理 -->
< view class= 'bottom' >
< view class= 'submit_tell' bindtap= 'btn_sub' >
拨打电话 </ view >
</ view >
</ view >


样式自己可以随意调整

/*WXSS */

page {
background-color: #f5f5f5 ;
display: flex ;
flex-direction: column ;
height: 100% ;
}

/*顶部 */
.head_cont {
position: relative ;
width: 100% ;
height: 90 rpx ;
line-height: 90 rpx ;
background-color: #fff ;
}
/*左边距线段 */
.head_write {
position: absolute ;
top: 15 rpx ;
width: 10 rpx ;
height: 60 rpx ;
background-color:#b09648 ;
}
.head_title {
position: absolute ;
left: 30 rpx ;
font-size: 30 rpx ;
color:#2a2a2a ;
}
/*新用户如何登录 */
.hide {
display: none ;
}
.show {
display: block ;
}
/*挪车二维码如何领取 */
.show_hide {
display: none ;
}
.show_show {
display: block ;
}

/*挪车服务如何使用 */
.show_tab3_hide {
display: none ;
}
.show_tab3_show {
display: block ;
}

/* ↓↓↓↓↓↓↓↓↓↓↓挪车服务↓↓↓↓↓↓↓↓↓↓↓ */
.show_tab4__hide {
display: none ;
}
.show_tab4__show {
display: block ;
}
/*↑↑↑↑↑↑↑↑挪车服务↑↑↑↑↑↑↑↑ */

/*列表 */
.names {
width: 100% ;
height: 120 rpx ;
line-height: 120 rpx ;
background-color: #fff ;
position: relative ;
border-bottom: 1px solid #EAEAEA ;
}
.hide_name {
position: absolute ;
left: 30 rpx ;
color: #2a2a2a ;
font-size: 30 rpx ;
}

.num_img {
position: absolute ;
right: 230 rpx ;
width: 28 rpx ;
height: 28 rpx ;
top: 46 rpx ;
}

.shows_img {
position: absolute ;
right: 30 rpx ;
width: 24 rpx ;
height: 14 rpx ;
top: 55 rpx ;
}
.cutab_two {
width: 100% ;
height: 115 rpx ;
position: relative ;
background-color: #fff ;
/* border-bottom: 1px solid #EAEAEA; */

}
/*问题ICON */
.ques_img {
position: relative ;
top: 3 rpx ;
padding-right: 18 rpx ;
width: 34 rpx ;
height: 27 rpx ;
}
.anser_img {
position: relative ;
top: 28 rpx ;
padding-right: 18 rpx ;
left: 30 rpx ;
width: 34 rpx ;
height: 27 rpx ;
}
/*回答 */
.cutab_two_name {
position: absolute ;
left: 80 rpx ;
top: 38 rpx ;
width: 80% ;
color: #868686 ;
font-size: 28 rpx ;
text-align: left ;
}
/* */
.cutab_two_names {
position: absolute ;
left: 80 rpx ;
top: 35 rpx ;
color: #868686 ;
font-size: 28 rpx ;
}
/* */

/*拨打电话 */
.bottom {
position: fixed ;
bottom: 0 rpx ;
font-size: 30 rpx ;
width: 100% ;
color: #fff ;
height: 90 rpx ;
line-height: 90 rpx ;
text-align: center ;
}
/* */
.submit_tell {
position: relative ;
width: 100% ;
text-align: center ;
line-height: 90 rpx ;
height: 90 rpx ;
background-color: #323232 ;
display: inline-block ;
border-radius: 5 rpx ;
}



JS

Page ({
data : {
// 新用户如何让登录
showView : false ,
//挪车二维码如何领取
showViews : false ,
// 挪车服务如何领取
show_tab3 : false ,
// 次卡如何办理
show_tab4 : false ,
},

onLoad : function (options ) {
// 生命周期函数--监听页面加载

// 新用户如何让登录
showView : (options .showView == "true" ? true : false );
//挪车二维码如何领取
showViews : (options .showViews == "true" ? true : false );
// 挪车服务如何领取
show_tab3 : (options .show_tab3 == "true" ? true : false );
// 次卡如何办理
show_tab4 : (options .show_tab4 == "true" ? true : false );
},
// 新用户如何让登录
onChangeShowState : function () {
var that = this ;
that .setData ({
// 1
showView : (!that .data .showView ),
// 2
showViews : false ,
// 3
show_tab3 : false ,
// 4
show_tab4 : false
})
},
//挪车二维码如何领取
btn_show : function () {
var that = this ;
that .setData ({
// 2
showViews : (!that .data .showViews ),
// 1
showView : false ,
// 3
show_tab3 : false ,
// 4
show_tab4 : false
})
},
// 挪车服务如何领取
show_tab3 : function () {
var that = this ;
that .setData ({
// 3
show_tab3 : (!that .data .show_tab3 ),
// 2
showViews : false ,
// 1
showView : false ,
// 4
show_tab4 : false
})
},
// 次卡如何办理
show_tab4 : function () {
var that = this ;
that .setData ({
// 4
show_tab4 : (!that .data .show_tab4 ),
// 3
show_tab3 : false ,
// 2
showViews : false ,
// 1
showView : false ,
})
},

// 拨打电话
btn_sub : function () {
wx .showModal ({
content : '400-3735324' , confirmText : "呼叫" , cancelColor : "#2F79A5" , confirmColor : "#2F79A5" , success : function (res ) {
if (res .confirm ) {
wx .makePhoneCall ({
phoneNumber : '400-3735324' ,
success : function () {
console .log ( "拨打电话成功!" )
},
fail : function () {
console .log ( "拨打电话失败!" )
}
})
} else {

}

}
})
}
})





猜你喜欢

转载自blog.csdn.net/qq_35695041/article/details/80894662