云豹直播小程序，自定义下拉选择框简单说明

云豹直播小程序开发中加入了自定义下拉选择框功能，多选项选择查看，可是小程序并没有select组件，小程序自带的滚动选择器picker是从底部弹起的滚动选择器，这个是小程序内置组件，相关弹框的样式及内容格式我们没办法进行修改，这就需要我们自定义开发来实现相同的功能，下面就简单介绍下云豹直播小程序如何实现下拉框功能的说明。

一、云豹直播小程序，组件wxml界面代码

1、下面是界面展示下拉框组件的代码设置，其中的if条件是为了控制未选择选项时的显示内容，可根据自身需要调整或移除。其中{{}}内的为动态变量，在下文会介绍

<view class='select_box'>
    <view class='select'>
       <block wx:if="{{index==-1}}">
          <text class='select_text'>选择物流公司</text>
       </block>  
       <block wx:else> 
          <text class='select_text'>{{selectDatas[index].name}}     </text>
       </block>
       <image class='select_img {{show&&"select_img_rotate"}}' src='../image/buyer/down.png'></image>   
     </view>
 </view>

效果图如下：

2、以下为点击组件显示的下拉框实现代码，其中{{}}内的为动态变量，在下文会介绍

<!--下拉框内容-->
<view class='option_box  {{show&&"box_border"}}' style='height:{{show?(selectDatas.length>7?300:selectDatas.length*60):0}}rpx;'>
     <view class='option' style='{{index==selectDatas.length-1&&"border:0;"}}' wx:for='{{selectDatas}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'>
<image class='select_img' src='{{item.thumb}}'></image>   {{item.value}}
</view>
</view>
<!--下拉框内容-->

效果图如下：此段代码还附带左侧显示图标的功能

二、组件数据初始化获取代码获取文件js

1、初始化数据如下：云豹直播小程序的初始化界面中，会将这些数据会传递到界面显示，点击下拉框显示组件，列表内容就展示出来了。

    data: {
      show:false,//控制下拉列表的显示隐藏，false隐藏、true显示
      index:-1,//选择的下拉列表下标
      selectDatas: [//下拉列表内容
           {name: '顺丰速运', value: '顺丰速运          ', thumb: '../image/buyer/kuaidi/express_1.png'},
           {name: '韵达速递', value: '韵达速递          ', thumb: '../image/buyer/kuaidi/express_2.png'},
          {name: '中通快递', value: '中通快递          ', thumb: '../image/buyer/kuaidi/express_3.png'},
           {name: '圆通快递', value: '圆通快递          ', thumb: '../image/buyer/kuaidi/express_4.png'},
           {name: '申通快递', value: '申通快递          ', thumb: '../image/buyer/kuaidi/express_5.png'},
           {name: '中国邮政', value: '中国邮政          ', thumb: '../image/buyer/kuaidi/express_6.png'},
           {name: '百世快递', value: '百世快递          ', thumb: '../image/buyer/kuaidi/express_7.png'},
           {name: '宅急送', value: '宅急送           ', thumb: '../image/buyer/kuaidi/express_8.png'},
         ],
     },

2、点击下拉框组件的效果事件，选中后，下拉列表隐藏，选中值显示到下拉框显示组件上。

   optionTap(e){
      let Index=e.currentTarget.dataset.index;//获取点击的下拉列表的下标
      this.setData({
         index:Index,
         show:!this.data.show
       });
    },

选中下拉内容后效果图如下：

三、下拉框样式wxss文件部分代码如下：

可根据项目需要自行调整

/**下拉框**/
.select_box{
  width: 100%;
  position: relative;
 }
 .select_text{
  flex: 1;
 }
 .select_img{
  width: 40rpx;
  height: 40rpx;
  display: block;
  transition:transform 0.3s;
 }
 .select_img_rotate{
  transform:rotate(180deg);
 }
 .box_border{
  border: 1px solid #dcdcdc;
 }
 .option_box{
  position: absolute;
  width: 91%;
  overflow-y: auto;
  background: #fff;
  transition: height 0.3s;
  z-index: 999;
  text-align: left;
  padding-left: 12px;
  font-size: 28rpx;
  height: 90%;
  border-radius: 5px;
 }
 .option{
  display: flex;
  line-height: 40rpx;
  font-size: 28rpx;
  padding: 15rpx;
  align-items: center;
 }
 .option image{
  margin-right: 10px;
  width: 55rpx;
  height: 55rpx;
  border-radius: 3px;  
 }

 对于云豹直播小程序下拉框功能，方便了用户们选择添加自己常用的小程序软件，同时也方便了用户之间互相分享小程序。云豹直播小程序支持观看直播，自然也会有很多用户采用这种方式观看、分享直播，能有效提高平台的吸粉率。

声明：以上内容为云豹科技作者本人原创，未经作者本人同意，禁止转载，否则将追究相关法律责任www.yunbaokj.com