微信小程序> 微信小程序普通下拉选择器picker

微信小程序普通下拉选择器picker

浏览量:401 时间: 来源:路飞不吃肉索隆不迷路

需求:从接口获取数据,数据为json,需要实现如下所示的下拉选择

查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

首先在page/index/index.js中添加定义初始数据:

从接口请求数据:

根据文档视图代码如下:

view class="c-minheight wx-view_jJ3eba"     view class="section"        view class="section__title"校区/view         picker bindchange="bindPickerChange" value="{{index}}"  range="{{school}}"             view class="picker"                学校:{{school[index].name}}             /view         /picker    /view/view

得到如下效果:

 

修改代码:

view class="c-minheight wx-view_jJ3eba"     view class="section"        view class="section__title"校区/view        picker bindchange="bindPickerChange" value="" range-key="{{'school_name'}}" range="{{school}}"            view class="picker"                学校:{{school[index].name}}            /view         /picker    /view /view

实现效果:

绑定事件:

bindPickerChange: function (e) {    console.log('picker发送选择改变,携带值为', e.detail.value)    this.setData({      index: e.detail.value    })  },

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎