js
Page({
data: {
selectPerson: true,
firstPerson: '个人',
selectArea: false,
},
//点击选择类型
clickPerson: function () {
var selectPerson = this.data.selectPerson;
if (selectPerson == true) {
this.setData({
selectArea: true,
selectPerson: false,
})
} else {
this.setData({
selectArea: false,
selectPerson: true,
})
}
},
//点击切换
mySelect: function (e) {
this.setData({
firstPerson: e.target.dataset.me,
selectPerson: true,
selectArea: false,
})
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
},
onReady: function () {
// 页面渲染完成
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
}
})
wxss
/* page/test/test.wxss */
.phone_personal{
width:
100%;
color:
rgb(
34,
154,
181
);
height:
100
rpx;
line-height:
100
rpx;
text-align:
center;
}
.phone_one{
display:
flex;
position:
relative;
justify-content:
space-between;
background-color:
rgb(
239,
239,
239
);
width:
90%;
height:
100
rpx;
margin:
0
auto;
border-radius:
10
rpx;
border-bottom:
2
rpx
solid
rgb(
255,
255,
255
);
}
.person_box{
position:
relative;
}
.phone_select{
margin-top:
0;
z-index:
100;
position:
absolute;
}
.select_one{
text-align:
center;
background-color:
rgb(
239,
239,
239
);
width:
676
rpx;
height:
100
rpx;
line-height:
100
rpx;
margin:
0
5%;
border-bottom:
2
rpx
solid
rgb(
255,
255,
255
);
}
.personal_image{
z-index:
100;
position:
absolute;
right:
2.5%;
width:
34
rpx;
height:
20
rpx;
margin:
40
rpx
20
rpx
40
rpx
0;
transition:
All
0.4s
ease;
-webkit-transition:
All
0.4s
ease;
}
.rotateRight{
transform:
rotate(
180deg
);
}
wxml
<!--page/test/test.wxml-->
<
view
class=
"phone_one"
bindtap=
"clickPerson">
<
view
class=
"phone_personal">{{firstPerson}}
</
view
>
<
image
src=
"../../image/green_tri.png"
class=
"personal_image {{selectArea ? 'rotateRight' :''}}"></
image
>
</
view
>
<
view
class=
"person_box">
<
view
class=
"phone_select"
hidden=
"{{selectPerson}}">
<
view
class=
"select_one"
bindtap=
"mySelect"
data-me=
"你好">你好
</
view
>
<
view
class=
"select_one"
bindtap=
"mySelect"
data-me=
"他好">他好
</
view
>
<
view
class=
"select_one"
bindtap=
"mySelect"
data-me=
"大家好">大家好
</
view
>
</
view
>
</
view
>