微信小程序下拉框开发代码

　　开发一个微信小程序要考虑很多问题，尤其是小程序用户使用过程是否便捷，下拉框的设置就是其中一项。今天小编就给出了微信小程序下拉框的具体代码，希望帮到大家。

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

　　}

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

　　// 页面关闭

　　}

　　})

　　以上就是关于微信小程序下拉框的开发代码了，只需要复制粘贴，你就可以进行相应的下拉框的设置了，有没有很简单呢?想要获取更多相关小程序代码就请关注微信小程序素材网。

　　微信小程序搜索框实现代码

　　关于微信小程序开发框架，微信小程序框架搭建

　　微信小程序显示多项选择框样式教程