最近搜索

小程序 多选 实现

浏览:86
管理员 2026-07-04 10:02


image.pngimage.png


    <view class="form-item">
      <text class="form-label">房型</text>
      <view style="display: flex; padding-top: 5rpx; gap: 15rpx; flex-wrap : wrap; ">
        <block wx:for="{{fang_list}}" wx:key="id">
          <view class="data_item_text {{item.selected ? 'data_item_text_act' : ''}}" bindtap="click_fang"
            data-index="{{index}}">
            {{item.name}}
            <image wx:if="{{item.selected}}" class="select_icon" src="/assets/images/arrow_icon.png"></image>
          </view>
        </block>
      </view>
    </view>

    
    
/* 房型多选 */
.data_item_text{
  font-size: 28rpx;    
   background-color: #eaeaea;
  color: #2d2d2d;
   border-radius: 8rpx;
    padding: 8rpx 25rpx 8rpx 25rpx;
    position: relative;
}
.data_item_text_act{
  background-color: #007AFF;
  color: #fff;
}
.select_icon {
  position: absolute;
  right: 0rpx;
  bottom: 0rpx;
  height: 30rpx;
  width: 30rpx;
  z-index: 10;    /* 保证显示在最上面 */
  pointer-events: none; /* 不影响点击 */
}
/* 房型多选 */

data{

    fang_list: [],//房型  {id,name}
    

}


  init_fang(){
    const fang_list = [
       { id: 1, name: "双床房",selected:false },
      { id: 2, name: "大床房" ,selected:false },
      { id: 3, name: "三人房",selected:false  },
      { id: 4, name: "单人房",selected:false  }
    ];
    this.setData({
      fang_list
    })
  },

  
      // 点击房
    click_fang(e) {
      const {
        index
      } = e.currentTarget.dataset;
      const {
        fang_list
      } = this.data;
      const item = fang_list[index];
      const isSelected = item.selected;
      // 更新选中状态
      fang_list[index].selected = !isSelected;
      this.setData({
        fang_list
      });
    },




如果想价格全部 这样加

  async load_project() {
    var obj = {};
    obj.page = 1;
    obj.limit = 100;
    project_list(obj).then(res => {
      let projectList = res.data.data || [];
      projectList.unshift({
        id: 0, // 空字符串
        name: "全部", // 显示文字
        selected: true
      });
      this.setData({
        project_list: projectList
      })
    }).catch(err => {
      this.setData({
        loading: false
      });
      console.error('网络失败', err);
    });
  },


联系站长

站长微信:xiaomao0055

站长QQ:14496453