小程序 单选组件

wxml

<view id='screen'>
    <van-popup get-container="#screen" show="{{ visible }}" closeable round position="bottom" bind:close="close_pop" custom-style="height: 70%;width: 100%;z-index:9999999;" safe-area-inset-bottom>
        <view class="pop_fix">
            <view>选择{{title}}</view>
            <van-icon name="cross" bind:click="close_pop" />
        </view>
        <view class="pop_box">
            <view class="pop_inner">
                <view class="{{item.id==selectId ? 'pop_item active':'pop_item'}}" data-id="{{item.id}}" data-item="{{item}}" bind:tap="choose_item" wx:for="{{list}}" wx:key="index" wx:for-item="item">
                    {{item.name}}
                </view>
            </view>
        </view>
    </van-popup>
</view>

js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    visible: {
      type: Boolean,
      value: false,
    },
    title: {
      type: String,
      value: "",
    },
    selectId: {
      type: String,
      value: "",
    },
    list: {
      type: Array,
      value: [],
    },
    type:{
      type: Number,
      value: 1,
    },

  },
  // 使用全局样式
  options: {
    addGlobalClass: true
  },
  /**
  * 监听父组件的传值
  */
  observers: {

  },
  /**
   * 组件的初始数据
   */
  data: {

  },
  lifetimes: {
    attached() {
    },
  },
  /**
  * 组件的方法列表
  */
  methods: {
    // 弹窗 - 关闭
    close_pop() {
      this.triggerEvent('popCloseEvent')
    },
    choose_item(e) {
      let _item = e.currentTarget.dataset;
      this.triggerEvent('popItemEvent', _item)
    },
  }
})

css

.pop_box {
  height: 100%;
  width: 100%;
  z-index: 9999999;
}

.pop_tab_empty {
  font-size: 28rpx;
  margin-top: 40rpx;
  text-align: center;
  color: #909399;
}
.pop_dataItem {
  display: flex;
  align-items: center;
  padding: 20rpx 16rpx;
  border-bottom: 1px solid #e9e9e9;
}
.pop_dataItem:last-child {
  border-bottom: none;
}
.pop_dataItem_name {
  margin-left: 20rpx;
  font-size: 28rpx;
}
.pop_dataItem_box {
  margin-top: 16rpx;
}
.pop_inner {
  margin-top: 120rpx;
  padding: 0 32rpx 20px 32rpx;
}
.pop_item {
  height: 80rpx;
  line-height: 80rpx;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  background-color: #ffffff;
}
.active {
  background-color: #ecf5ff;
  color: #409eff;
  font-weight: bold;
}
.pop_fix {
  position: fixed;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 99999999999;
  line-height: 50px;
  padding: 0 14px;
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  font-weight: bold;
  font-size: 28rpx;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
}

父组件

<selectPop visible="{{visible}}" selectId="{{selectId}}" list="{{list}}" bind:popCloseEvent='closeEvent' bind:popItemEvent="onEvent" bind:popCloseEvent='closeEvent' title="标题"></selectPop>
visible: false,
//selectId 选中的回显值
selectId: "1",
list: [
  { name: 'test', ids: '1' },
  { name: 'test', ids: '2' },
],