微信小程序自定义select下拉选择组件

微信小程序自定义select下拉选择组件

微信小程序原生开发中，常用到的是从底部弹起的滚动选择器（picker),而有些项目需要用到下拉选择，话不多说，下面就可以把下拉选择封装成一个自定义组件：

1.在components文件夹下新建自定义组件select;
2.select文件对应的wxml、wxss、js如下：
wxml

<view class='select-box'>
    <view class='select-con' bindtap='selectTap'>
        <view class='select-txt'>{
  {nowText}}</view>
        <text class="font a-xiangxia1x select-img" animation="{
    {animationData}}"></text>
    </view>
    <view class='select-list' wx:if="{
    {selectShow}}">
        <view wx:for="{
    {selectArray}}" data-index="{
    {index}}" wx:key='item' class='select-item' bindtap='setText'>{
  {item.text}}</view>
    </view>
</view>

以上wxml代码中，下拉选择图标我是用到字体图标iconfont，可以改成自己想要的图片（替换成image）

wxss

.select-box {
   width: 100%;position: relative