微信小程序 下拉列表的实现实例代码

微信小程序 下拉列表的实现实例代码

微信小程序 UYxxYTLNIM下拉列表

wxml代码：

{{firstPerson}}

//三目法判断图片要不要旋转180。

你好

他好

大家好

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需要同时存在，元素才能UYxxYTLNIM脱离文档。

}

.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(){

// 页面关闭

}

}）

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。