微信小程序picker下拉绑定数据

页面部分,wxml中写入以下代码

<picker mode = "selector" bindchange="bindPickerChange" value="{{project[idx].id}}" range="{{project}}" range-key="{{‘val‘}}">
    <view class="picker picker1">
      {{project[idx].val}}<text class=‘down‘></text>
    </view>
</picker>

js部分

data: {
    idx:0,
    project:[
      {
        id: 0,
        val: ‘互联网‘
      },
      {
        id: 1,
        val: ‘建材‘
      },
      {
        id: 2,
        val: ‘法律‘
      },
    ]
},
// 改变下拉选项
bindPickerChange: function (event){
    this.setData({   //给变量赋值
      idx: event.detail.value,
    })
},
let id = this.data.project[this.data.idx].id

原文地址:https://www.cnblogs.com/isuansuan/p/11698294.html

时间: 2024-10-07 22:57:50

微信小程序picker下拉绑定数据的相关文章

微信小程序 - (下拉)加载更多数据

注意和后端配合就行了,前端也只能把数据拼接起来! 无论是下拉加载还是加载更多,一样的道理! 注意首次加载传递参数 注意每次加载数据数 wxml <view class='table-rank'> <view class='tables center' wx:for="{{ranklist}}" wx:for-index="idx" wx:key="prototype"> <view class='stage-rank

微信小程序select下拉框实现

小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉,这里为了更清楚的显示小程序层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>¥99.00</text> </view> <!--下拉框 --> <view class='list-msg2' bindtap=

微信小程序iOS下拉白屏晃动,坑坑坑

感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText: "购物车", disableScroll:true } </config> 这样的话页面整个都拉不动了,下面溢出的内容就拉不出来了,此时用overflow:scroll间接滑动 .content{ width:100%; height:600rpx: overflow-y:

微信小程序 - 关于下拉刷新

1 // 拉取数据 2 fetchData: function() { 3 wx.request({ 4 url: 'http://v.juhe.cn/toutiao/index', 5 data: { 6 type: '', 7 key: '482e213ca7520ff1a8ccbb262c90320a' 8 }, 9 header: { 10 'contentType': 'application/json' 11 }, 12 success: function(res) { 13 con

微信小程序-解决下拉刷新报错

关于"enablePullDownRefresh": "true" 一.使用方式 在 Page 中定义 onPullDownRefresh 处理函数,监听该页面用户下拉刷新事件.需要在 config 的window选项中开启 enablePullDownRefresh.当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新. 二.错误处理 在代码中出现的报错如下: 变量值"true",这是个字符串而不是Bool

微信小程序 select 下拉框组件

一.源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. select.wxml <view class="select-box"> <view class="select-current" catchtap="openClose"> <text class="current-name

微信小程序后台返回大量多余数据的处理

台接口返回一个数组,数组里面N多对象,每个对象里面几十上百条数据,最好玩的是,我只需要每个对象里面的某两个数据.... 类似这种: datas:[   {   id:1000,   name: "帅哥",   title: '...',   b: '...',   d: 0,   f:0,   ....   },   {   id:1001,   name: "美女",   title: '...',   b: '...',   d: 0,   f:0,   ...

微信小程序picker组件 - 省市二级联动

微信小程序picker组件自带省市区选择器,但是业务需求需要省市选择器,参考官方demo自己写了一个省市选择器 wxml文件 <view class="section"> <view class="section__title">省市二级联动demo</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange&quo

微信小程序picker空白

如果你看完发现跟我遇到一样的问题,那么真的很奇葩 这个得从功能需求讲起 直接上图: 在 个人信息里面显示身高和体重,而且支持修改 我最开始想到的做法 直接使用微信小程序提供的组件picker(从屏幕下方弹出 的选择框) 我就比较懒,想一步选择两个属性,比如这样: 就是不管用户点击身高,还是体重,都是弹出这个进行选择修改,一步到位 那么我就给两个属性都绑定了一个picker,也使用同一组数据,大致代码: <picker mode="multiSelector" rang="