위 챗 애플 릿 드 롭 다운 목록 의 인 스 턴 스 코드
wxml 코드:
<view class="phone_one" bindtap="clickPerson">
<view class="phone_personal">{{firstPerson}}</view>
<image src="../../image/v6.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image> // 180。
</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>
wxss 코드:
.phone_personal{
width: 100%;
color:rgb(34, 154, 181);
height:100rpx;
line-height:100rpx;
text-align: center;
}
.phone_one{
display: flex; // flex 。
position: relative;
justify-content: space-between;
background-color:rgb(239, 239, 239);
width:90%;
height:100rpx;
margin:0 auto;
border-radius: 10rpx;
border-bottom:2rpx solid rgb(255, 255, 255);
}
.person_box{
position: relative;
}
.phone_select{
margin-top:0;
z-index: 100;
position: absolute; // z-index absolute , 。
}
.select_one{
text-align: center;
background-color:rgb(239, 239, 239);
width:676rpx; // width 。
height:100rpx;
line-height:100rpx;
margin:0 5%;
border-bottom:2rpx solid rgb(255, 255, 255);
}
.personal_image{
z-index: 100;
position: absolute;
right:2.5%;
width: 34rpx;
height: 20rpx;
margin:40rpx 20rpx 40rpx 0;
transition: All 0.4s ease;
-webkit-transition: All 0.4s ease;
}
.rotateRight{
transform: rotate(180deg); //180° 。
}
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(){
//
}
})
읽 어 주 셔 서 감사합니다. 여러분 에 게 도움 이 되 기 를 바 랍 니 다.본 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.