1、封装一个下拉弹窗选择列表组件

效果图：

首先新建一个component文件–dropdown-list：

dropdown-list.js代码：

// 下拉弹窗选择列表
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    selectData: {
      type: Array,
      value: [],
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    show: false,
    index: 0 //选择的下拉列表下标
  },

  /**
   * 组件的方法列表
   */
  methods: {

    //展示或隐藏弹框
    selectTap: function () {
      console.log("显示==》")
      this.setData({
        show: !this.data.show
      })
    },

    /*
     * 内部私有方法建议以下划线开头
     * triggerEvent 用于触发事件
     */
    _optionTap(e) {
      //触发取消回调
      // console.log("回调optionTap==》", e.currentTarget.dataset.index)
      this.setData({
        index: e.currentTarget.dataset.index
      })
      this.selectTap() //展示或隐藏弹框
      // 为了能在indes里面拿到选择了哪个项而加入  selectId
      this.triggerEvent("optionTap",{'selectId':e.currentTarget.dataset.index})
    },

  }
})

dropdown-list.json代码：

{
  "component": true,
  "usingComponents": {}
}

dropdown-list.wxml代码：

<!--下拉选择框 dropdownlist-->
<view class='select_box'>
  <view class='select' catchtap='selectTap'>
    <text class='select_text'>{{selectData[index]}}</text>
    <!-- 画的三角形 -->
    <view class='view-triangle {{show&&"select_img_rotate"}}'></view>
  </view>

  <view class='option_box' style='height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;'>
    <text class='option' style='{{index==selectData.length-1&&"border:0;"}}' wx:for='{{selectData}}' wx:key='this'
      data-index='{{index}}' catchtap='_optionTap'>{{item}}</text>
  </view>
</view>
<!--下拉选择框-->

dropdown-list.wxss代码：

/* 弹层下拉选择框 begin */
.select_box {
  background: #fff;
  width: 80%;
  margin: 30rpx auto;
  position: relative;
}

.select {
  box-sizing: border-box;
  width: 100%;
  height: 70rpx;
  border: 1px solid #efefef;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.select_text {
  font-size: 30rpx;
  flex: 1;
}

.select_img {
  width: 30rpx;
  height: 30rpx;
  display: block;
  transition: transform 0.3s;
}

.select_img_rotate {
  transform: rotate(180deg);
}

.option_box {
  position: absolute;
  top: 70rpx;
  width: 100%;
  border: 1px solid #efefef;
  box-sizing: border-box;
  height: 0;
  overflow-y: auto;
  border-top: 0;
  background: #fff;
  transition: height 0.3s;
}

.option {
  display: block;
  line-height: 40rpx;
  font-size: 30rpx;
  border-bottom: 1px solid #efefef;
  padding: 10rpx;
}
/* css画的三角形 */
.view-triangle{
  display: block;
  transition: transform 0.3s;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgb(85, 83, 83);
}

2、使用封装好的弹窗下拉组件

index.json代码：

{
  "usingComponents": {
    "dropdown-list": "../components/dropdown-list/dropdown-list"
  }
}

index.wxml代码：

<dropdown-list selectData='{{selectData}}' bind:optionTap="_optionTap"></dropdown-list>

index.js代码：

const app = getApp()

Page({
  data: {
    selectData: ['1', '2', '3', '4', '5', '6'], //下拉列表的数据
  },

  onl oad: function (options) {

  },

  _optionTap(e) {
    console.log("选择了:", e.detail.selectId)
  }

})

标签：index,封装,dropdown,微信,list,selectData,optionTap,border,弹窗
来源： https://blog.csdn.net/wy313622821/article/details/115332160