微信小程序picker联动

gslhelloworld

已于 2023-12-19 08:56:18 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 微信小程序文章标签： python js

于 2021-06-11 08:29:34 首次发布

本文链接：https://blog.youkuaiyun.com/gsl371/article/details/117803454

文章目录

前言
一、picker
二、前端代码
- wxml
- js
二、后端代码
- 数据样式如下
- 代码
总结

前言

一、picker

官方和网上的示例给出的picker用起来不是那么方便，调整联动内容需要修改前端，目前没有发现好的方法；自己写一个，做个记录，方便使用。

二、前端代码

wxml

<view class="container">
  <view class="section">
    <view class="section__title" wx:for="{
   
   {firstList}}" wx:key="id"></view>
    <picker bindchange="bindPickerChange1" value="{
   
   {firstListIndex}}" range="{
   
   {firstList}}" range-key="name">
      <view class="picker">当前选择11：{
   
   {
   
   firstList[objectIndex1].name}}</view>
    </picker>
  </view>
  <view class="section">
    <view class="section__title" wx:for="{
   
   {secondList}}" wx:key="id"></view>
    <picker bindchange="bindPickerChange2" value="{
   
   {secondListIndex}}" range