码迷,mobileinhere.cn
首页 > 微信 > 详细

[微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式

时间:2017-12-17 12:20:09      阅读:5418      评论:0      收藏:0      [点我收藏+]

标签:class   9.png   页面   方式   www   小程序   图片   需要   bsp   

微信小程序下拉滚动选择器picker绑定数据的两种方式  本地数据绑定和wx.request(object) json数据绑定

1.本地数据绑定 (对象数组)

技术分享图片

 

page({
    data:{
     户型   这是一个本地的对象,然后绑定到页面上
    pic_array: [
      { id: 13, name: ‘1室1厅1卫‘ },
      { id: 14, name: ‘1室2厅1卫‘ },
      { id: 15, name: ‘2室1厅1卫‘ },
      { id: 16, name: ‘3室1厅2卫‘ },
      { id: 17, name: ‘4室1厅2卫‘ },
      { id: 18, name: ‘5室1厅3卫‘ },
      { id: 19, name: ‘6室1厅3卫‘ },
      { id: 20, name: ‘7室以上‘ },
    ],
 hx_index: 0; },
 
     bindpickerchange_hx: function (e) {
     console.log(‘picker发送选择改变,携带值为‘, e.detail.value);
     this.setdata({   给变量赋值
     hx_index: e.detail.value,  每次选择了下拉列表的内容同时修改下标然后修改显示的内容,显示的内容和选择的内容一致
    })
     console.log(‘自定义值:‘, this.data.hx_select);
    },
})
 <!--户型  -->
      <picker name="picker_hx" class="cybm_pic_1" value="{{pic_array[hx_index].id}}" data-selecthx="{{pic_array[hx_index].name}}" range="{{pic_array}}" range-key="{{‘name‘}}"  bindchange="bindpickerchange_hx"  >
        <view class="picker" >
         户型:  {{pic_array[hx_index].name}} 指定数组中指定下标的name键对应的值 
        </view>
      </picker>

属性名range 类型array/object array 存放你的本地数据数组或者对象数组,需要加载的数据
属性名range-key  类型string  当 range 是一个 二维object array 时,通过 range-key 来指定 object 中 key 的值作为选择器显示内容
属性名value  类型array  value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始)
属性名data-  类型自定义属性后更的属性名字可以自定义 当你需要设置其他值得时候可以使用  可选
 

 

2.网络请求得到的json数据绑定下拉选择器

首先得到后台传过来的json数据

data:{

}
onload: function () { var that = this; wx.request({ url: "www.************", data: { a: "" 参数 }, header: { "content-type": "applicatison/x-www-form-urlencoded" }, method: "post", success: function (res) { that.setdata({

pic_array: res.data.data.exp_hx, 把json数据赋值给变量pic_array_hx
}) } }) }
技术分享图片
 <!--户型  -->  绑定的方式一样,只是改动一下变量名既可以了,这是比较简单的方式
      <picker name="picker_hx" class="cybm_pic_1" value="{{pic_array[hx_index].id}}" data-selecthx="{{pic_array[hx_index].name}}" range="{{pic_array}}" range-key="{{‘name‘}}"  bindchange="bindpickerchange_hx"  >
        <view class="picker" >
         户型:  {{pic_array[hx_index].name}} 指定数组中指定下标的name键对应的值 
        </view>
      </picker>

 

[微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式

标签:class   9.png   页面   方式   www   小程序   图片   需要   bsp   

原文地址:www.cnblogs.com/mibear/p/8051370.html

(0)
(1)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
2014 mobileinhere.cn 版权所有 京icp备13008772号-2
华人娱乐注册