この記事では主に WeChat アプレット シミュレーション ドロップダウン メニューの開発例を共有し、皆様のお役に立てれば幸いです。
1. 知識のポイント
1.特定のコントロールの動的表示と非表示を実現する
data:{ open:false }, showitem:function(){ this.setData({ open:!this.data.open }) },
.display_show{ display: block; } .display_none{ display: none; }
2.作成者: data-*
data-*
和 e.target.dateset
および
this.setData({ firstPerson:e.target.dataset.me, })
3. フレキシブルボックスワード: display:flex;
<view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/i.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image> </view>
display:flex; justify-content:space-between;
このようにして、サブセットが並列されます。 justify-content:space-between; このようにして、サブセットが両端になります
(1)。 <view class="page">
<view class="page_bd">
<view class="body_head" bindtap="showitem">点击我显示下拉列表</view>
<navigator url="pages/list/list">
<view class="{{open?'display_show':'display_none'}}">列表1</view>
</navigator>
<navigator url="pages/scroll-view/index">
<view class="{{open?'display_show':'display_none'}}">列表2</view>
</navigator>
<navigator url="pages/scroll-view/index">
<view class="{{open?'display_show':'display_none'}}">列表3</view>
</navigator>
</view>
</view>
.page_bd{
padding: 10px;
background-color: snow;
}
.body_head{
border: 1px solid;
border-color: beige;
padding: 10px;
}
.display_show{
display: block;
border: 1px solid;
border-color: beige;
padding: 10px;
}
.display_none{
display: none;
}
3.js
Page({ data:{ open:false }, showitem:function(){ this.setData({ open:!this.data.open }) }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } })
(2) ドロップダウンメニュー
1.wxml。
rreee
<view class="phone_one" bindtap="clickPerson">
<view class="phone_personal">{{firstPerson}}</view>
<image src="../../image/i.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image>
</view>
関連推奨事項: JavaScript シミュレーション ドロップダウン メニュー code_form 効果 以上がWeChat アプレット シミュレーション ドロップダウン メニューの開発例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。phone_personal{
width: 100%;
color:rgb(34, 154, 181);
height:100rpx;
line-height:100rpx;
text-align: center;
}
.phone_one{
display:flex;
position:relative;
justify-content:space-between;
background-color:rgb(239, 239, 239);
width:90%;
height:100rpx;
margin:22px auto;
border-radius:10rpx;
border-bottom:2rpx solid rgb(255, 255, 255);
line-height:51px;
padding-left:10px;
}
.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:676rpx;
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);
}