小程序 下拉框

wxml:

<view class="section">
              <picker bindchange="bindPickeru_house" value="{{i_name}}" range="{{house}}" range-key="i_name">
                <view class="picker">
                  <l-input label="户型"  required="{{true}}"  value="{{housenumber}}"    placeholder="户型"  />
                </view>
              </picker>
</view>

js 代码:

//获取循环数据
  
onLoad: function (options) {
    var _this = this;
    wx.request({
      url: 'http://www.showinent.com/Api/index/selController',
      success:function(res){
        console.log(res);
        //户型
      var house = res.data.date.house;
        //房源类型
      var type = res.data.date.type;
        //卧室类型
      var housing = res.data.date.bedroom
      //将值传递给data内
      _this.setData({
        house,
        type,
        housing
      })
      }
    })
  },
//下拉框取值
bindPickeru_house:function(dare){
  var _this=this;
  var id = dare.detail.value;
  console.log(_this.data.house[id].i_name);
  this.setData({
      housenumber:_this.data.house[id].i_name
  })
},

后台代码:

//查询出下拉框数据
public function selController()
    {
        //房源类型id
        $type_id = zname_property::where('enum','fang_type')->value('i_id');
        $date['type'] = zname_property::where('pid',$type_id)->select()->toArray();
        //户型id
        $house_id = zname_property::where('enum','fang_house')->value('i_id');
        $date['house'] = zname_property::where('pid',$house_id)->select()->toArray();
        //卧室类型id
        $bedroom_id = zname_property::where('enum','fang_bedroom')->value('i_id');
        $date['bedroom'] = zname_property::where('pid',$bedroom_id)->select()->toArray();
        return json(['date'=>$date]);
    }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在UniApp中,可以使用下拉框(Picker)组件来实现下拉选择功能。下面是对UniApp下拉框的介绍: 1. Picker组件:Picker组件是UniApp提供的一种用于选择的组件,可以通过设置数据源和事件监听来实现下拉选择功能。 2. 数据源:Picker组件的数据源可以是一个静态的数组,也可以是一个动态的数据源。静态数据源可以直接在组件中定义,而动态数据源可以通过绑定变量或者请求接口获取。 3. 事件监听:Picker组件提供了change事件,可以监听用户选择的变化。当用户选择某个选项时,change事件会触发,并传递选中的值或索引。 4. 自定义样式:UniApp的Picker组件支持自定义样式,可以通过设置class或style属性来修改组件的外观。 下面是一个示例代码,演示了如何在UniApp中使用Picker组件实现下拉选择功能: ```html <template> <view> <picker :value="selectedValue" @change="handleChange"> <view class="picker"> <text>{{ selectedText }}</text> </view> <picker-view-column> <view v-for="(item, index) in options" :key="index">{{ item }}</view> </picker-view-column> </picker> </view> </template> <script> export default { data() { return { options: ['Option 1', 'Option 2', 'Option 3'], selectedValue: 0, selectedText: 'Option 1' } }, methods: { handleChange(event) { this.selectedValue = event.detail.value; this.selectedText = this.options[event.detail.value]; } } } </script> <style> .picker { height: 50px; line-height: 50px; text-align: center; border: 1px solid #ccc; } </style> ``` 在上面的示例中,我们使用了Picker组件来实现一个下拉选择框。options数组定义了选项的数据源,selectedValue和selectedText分别用于保存用户选择的值和文本。当用户选择某个选项时,handleChange方法会被调用,更新selectedValue和selectedText的值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值