微信小程序---下拉框

wxml:

html 复制代码
<view class="container">
  <picker style="margin-left: 20rpx;" class="picker" bindchange="bindAccountChangeCL" range-key="plateNumber" value="{{plateIndexC}}" range="{{plateindEX}}">
    <view style="float: left;line-height: 75rpx;{{plateIndexC == 0?'color:#ccc;':''}}" class="weui-input">
      {{plateindEX[plateIndexC].plateNumber}}
    </view>
  </picker>
</view>

js:

javascript 复制代码
Page({
  data: {
    res: {
      data: [
        { 
          createTime: 96,
          departureArriveTime: 85,
          destinationArriveTime: 45,
          driverId: "1928249333765070850",
          driverName: "索东成",
          plateNumber: "吉AX6019",
          vehicleId: "1336953190430212097"
        },
        { 
          createTime: 96,
          departureArriveTime: 85,
          destinationArriveTime: 45,
          driverId: "1928249333765070850",
          driverName: "索东成",
          plateNumber: "吉AX6019",
          vehicleId: "1336953190430212097"
        },
        { 
          createTime: 96,
          departureArriveTime: 85,
          destinationArriveTime: 45,
          driverId: "1928249333765070850",
          driverName: "索东成",
          plateNumber: "吉AX6019",
          vehicleId: "1336953190430212097"
        },
        { 
          createTime: 96,
          departureArriveTime: 85,
          destinationArriveTime: 45,
          driverId: "1928249333765070850",
          driverName: "索东成",
          plateNumber: "吉AX6019",
          vehicleId: "1336953190430212097"
        }
      ]
    },
    plateindEX: [],
    plateIndexC: 0
  },
  onLoad: function() {
    this.initVehicleList();
  },
  initVehicleList: function() {
    // 从res.data中提取车辆数据并映射id
    const vehicleData = this.data.res.data.map(item => ({
      id: item.vehicleId,
      plateNumber: item.plateNumber
    }));
    
    let vehicleList = [{ id: "0", plateNumber: "选择车辆" }];
    if (vehicleData && vehicleData.length > 0) {
      vehicleList = [...vehicleList, ...vehicleData];
    }
    
    // 更新数据到页面
    this.setData({
      plateindEX: vehicleList,
      plateIndexC: 0 
    });
  },
  bindAccountChangeCL: function(e) {
    console.log('车辆picker发送选择改变,携带值为', e.detail.value);
    this.setData({
      plateIndexC: e.detail.value
    })
    
    // 获取选中的车辆ID
    const selectedId = this.data.plateindEX[e.detail.value].id;
    if(selectedId !== "0") {
      // 执行选中车辆后的逻辑
      console.log('选中的车辆ID:', selectedId);
    }
  }
})
相关推荐
2501_915918412 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域3 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷3 小时前
第一个小程序
小程序
春哥的研究所3 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld3 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点5 小时前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
CRMEB定制开发10 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
mon_star°12 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero12 小时前
微信小程序91~100
微信小程序·小程序