小程序 单选、多选组件 selectTypeVue

index.wxml

根据isSelected判断选中状态
<view id='screen'>
    <van-popup get-container="#screen" show="{{ visible }}" class="pact_pop" round position="bottom" bind:close="close_pop" custom-style="height: 70%;width: 100%;" safe-area-inset-bottom>
        <view class="pop_fix">
            <view>选择{{title}}</view>
            <van-button color="#1ABC9C" size="small" bind:click="close_pop">确认已选</van-button>
        </view>
        <view class="pop_box">
            <view class="pop_inner">
                <view wx:if="{{typeid == 4}}">
                    <view class="{{item.isSelected==true ? 'pop_item active':'pop_item'}}" data-id="{{item.id}}" data-index="{{index}}" data-name="{{item.name}}" bind:tap="choose_item" wx:for="{{list}}" wx:key="index" wx:for-item="item">
                        {{item.name}}
                    </view>
                </view>
                <view class="" wx:else>
                    <view class="{{item.id==single_select.id ? 'pop_item active':'pop_item'}}" data-id="{{item.id}}" data-index="{{index}}" data-name="{{item.name}}" bind:tap="choose_item_single" wx:for="{{list}}" wx:key="index" wx:for-item="item">
                        {{item.name}}
                    </view>
                </view>
            </view>
        </view>
    </van-popup>
</view>

index.js

const App = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    visible: {
      type: Boolean,
      value: false,
    },
    typeid: {
      type: String,
      value: "",
    },
    title: {
      type: String,
      value: "",
    },
    selectId: {
      type: String,
      value: '',
    },

  },
  // 使用全局样式
  options: {
    addGlobalClass: true
  },
  /**
  * 监听父组件的传值
  */
  observers: {
    typeid: function (val) {
      if (val != '') {
        this.setData({ type: val })
        this.getData()
      }
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    type: "",
    pop_select: [],
    pop_selectId: [],
    pop_selectName: [],
    single_select: {
      name: "",
      id: null
    },
    single_selectNmae: "",
    list: [],
  },
  lifetimes: {
    attached() {
    },
  },
  /**
  * 组件的方法列表
  */
  methods: {
  //获取数据，给数据添加isSelected 值
    getData() {
      let _data = res.data.data
      _data.forEach(item => {
        item.isSelected = false
      });
    },
    // 弹窗 - 关闭 - 回显选中值
    close_pop() {
      if (this.data.type == 4) {
        this.data.pop_select = [];
        let _str = this.data.pop_selectName.join(', ');
        this.data.pop_select.push(this.data.pop_selectId, _str)
        this.setData({ visible: false })
        this.triggerEvent('selectEvent', this.data.pop_select)
      } else {
        this.setData({ visible: false })
        this.triggerEvent('selectEvent', this.data.single_select)
      }
    },
    choose_item(e) {
      let _id = e.currentTarget.dataset.id;
      let _name = e.currentTarget.dataset.name;
      let _index = e.currentTarget.dataset.index;
      let list = this.data.list;
      if (list[_index].isSelected == true) {
        list[_index].isSelected = false;
        let _idPosition = this.data.pop_selectId.indexOf(_id);
        let _namePosition = this.data.pop_selectId.indexOf(_name);
        this.data.pop_selectId.splice(_idPosition, 1);
        this.data.pop_selectName.splice(_namePosition, 1);
      } else {
        list[_index].isSelected = true;
        this.data.pop_selectId.push(_id)
        this.data.pop_selectName.push(_name)
      }
      this.setData({
        list: list,
      });
    },
    choose_item_single(e) {
      this.setData({
        'single_select.id': e.currentTarget.dataset.id,
        'single_select.name': e.currentTarget.dataset.name,
      })
    },
  }
})

index.wxss

.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 {
  padding: 20rpx 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;
}
.pact_pop .van-popup {
  padding: 0 30rpx;
}
.pop_fix {
  position: fixed;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 9999999;
  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);
}