小程序下拉框

此博客链接：https://www.cnblogs.com/ping2yingshi/p/13191421.html

右键这个文件夹，新建下面的这个Component。然后输入需要创建的名称，我这里为了方便就取了select的名字。然后就会自动创建4个文件，js、json、wxml、wxss。

组件样式

组件的wxml

<view class='com-selectBox'>
    <view class='com-sContent' bindtap='selectToggle'>
        <view class='com-sTxt'>{{nowText}}</view>
        <image src='../../public/img/local/down.png'  class='com-sImg'  animation="{{animationData}}"></image>
    </view>
    <view class='com-sList' wx:if="{{selectShow}}">
        <view wx:for="{{propArray}}" data-index="{{index}}" wx:key='' class='com-sItem' bindtap='setText'>{{item.text}}</view>
    </view>
</view>

组件的js

// Componet/Componet.js

Component({

/**

* 组件的属性列表

properties: {

propArray:{

type:Array,

}

/**

* 组件的初始数据

data: {

selectShow:false,//初始option不显示

nowText:'',//初始内容

animationData:{}//右边箭头的动画

/**

* 组件的方法列表

methods: {

　　　//option的显示与否

selectToggle:function(){

var nowShow=this.data.selectShow;//获取当前option显示的状态

//创建动画

var animation = wx.createAnimation({

timingFunction:"ease"

})

this.animation=animation;

if(nowShow){

animation.rotate(0).step();

this.setData({

animationData: animation.export()

})

}else{

animation.rotate(180).step();

this.setData({

animationData: animation.export()

})

}

this.setData({

selectShow: !nowShow

})

//设置内容

setText:function(e){

var nowData = this.properties.propArray;//当前option的数据是引入组件的页面传过来的，所以这里获取数据只有通过this.properties

var nowIdx = e.target.dataset.index;//当前点击的索引

var nowText = nowData[nowIdx].text;//当前点击的内容

//再次执行动画，注意这里一定，一定，一定是this.animation来使用动画

this.animation.rotate(0).step();

this.setData({

selectShow: false,

nowText:nowText,

animationData: this.animation.export()

})

var nowDate={

id:nowIdx,

text:nowText

}

this.triggerEvent('myget', nowDate)

}

})

组件的wxss

.com-selectBox{
     200px;
}
.com-sContent{
    border: 1px solid #e2e2e2;
    background: white;
    font-size: 16px;
    position: relative;
    height: 30px;
    line-height: 30px;
}
.com-sImg{
    position: absolute;
    right: 10px;
    top: 11px;
     16px;
    height: 9px;
    transition: all .3s ease;
}
.com-sTxt{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding:0 20px 0 6px;
    font-size: 14px;
}
.com-sList{
    background: white;
     inherit;
    position: absolute;
    border: 1px solid #e2e2e2;
    border-top: none;
    box-sizing: border-box;
    z-index: 3;
    max-height: 120px;
    overflow: auto;
}
.com-sItem{
    height: 30px;
    line-height: 30px;
    border-top: 1px solid #e2e2e2;
    padding: 0 6px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.com-sItem:first-child{
    border-top: none;
}

引入组件（下面代码都是在你要加入组件的额页面中添加）

1,在你引入组件的页面的json文件中配置

"usingComponents": {
    "Select": "/Componet/select/select"
}

2.在wxml中需要引入的位置插入下面代码

 <Select prop-array='{{selectArray}}' bind:myget='getDate'></Select>

3.在js中插入

 selectArray: [{
    "id": "0",
    "text": "100ml"
}, {
    "id": "1",
    "text": "200ml"
},
{
  "id": "2",
  "text": "300ml"
},
{
  "id": "3",
  "text": "400ml"
},
{
  "id": "4",
  "text": "500ml"
},
{
  "id": "5",
  "text": "1000ml"
},
{
  "id": "6",
  "text": "1500ml"
},
{
  "id": "7",
  "text": "2000ml"
},

通信

你加入组件的页面wxml中，插入的下面代码是用来对组件的数据进行绑定。

<Select prop-array='{{selectArray}}' bind:myget='getDate'></Select>

在你加入组件的页面js中，加入的新函数是为了获取选择的值。（需要复制下面代码），你可以在下面这个函数中，对选择的值做处理。

getDate:function(e){
    console.log(e.detail)
}

效果如下

参考链接：https://www.cnblogs.com/zjjDaily/articles/9548433.html