微信小程序picker联动

前言

一、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="{{secondList}}" range-key="name">
      <view class="picker2">当前选择22：{{secondList[objectIndex2].name}}</view>
    </picker>
  </view>
</view>

js

Page({
  data: {
    secondList: [],
    firstList: [],
    firstID: "",
    secondID: ""
  },

  //普通选择器第一级事件处理：
  bindPickerChange1: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    let { firstList } = this.data;    //获得整个数组
    let firstIndex = e.detail.value;  //获得本次的索引
    this.setData({
      objectIndex1: e.detail.value,
      secondList: firstList[firstIndex].CompSecondCate ,   //把选择到的父项的索引对应的子项数组传给第二级数组
      firstID:firstList[firstIndex].id       //分类在数据库中的id，需要发送到数据库
    })
  },
  //普通选择器第二级事件处理：
  bindPickerChange2: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    let { secondList } = this.data;    //获得二级数组
    let secondIndex = e.detail.value;  //获得本次的索引
    // console.log(secondList[secondIndex].id);
    this.setData({
      objectIndex2: e.detail.value,
      secondID: secondList[secondIndex].id
    })
  },

  //获取picker数据
  onLoad: function (options) {
    // 1 发送异步请求获取轮播图数据  优化的手段可以通过es6的 promise来解决这个问题 
    wx.request({
      url: 'http://192.168.2.21:8000/news/ComplainFirstCategory_list',
      success: (result) => {
        this.setData({
          firstList: result.data.results  //result为api返回的值          
        })
      }
    });
  }

})

二、后端代码

后端使用了drf
通过接口提供数据

数据样式如下

代码

views.py

# 事项清单分类e
# 二级分类
class ComplainSecondCategoryListView(generics.ListAPIView):
    '''分类导航图标列表'''
    serializer_class = ComplainSecondCategorySerializer
    permissin_classes = (permissions.AllowAny,)

    def get_queryset(self):
        queryset = ComplainSecondCategory.objects.all()
        return queryset

#一级分类
class ComplainFirstCategoryListView(generics.ListAPIView):
    '''分类导航图标列表'''
    serializer_class = ComplainFirstCategorySerializer
    permissin_classes = (permissions.AllowAny,)

    def get_queryset(self):
        queryset = ComplainFirstCategory.objects.all()
        return queryset

models.py

# 投诉类数据模型
class ComplainFirstCategory(models.Model):
    """
    投诉一级类别
    """
    name = models.CharField(max_length=200, verbose_name='名称')

    class Meta:
        verbose_name = '投诉一级类别'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.name   # 被引用时返回的值


class ComplainSecondCategory(models.Model):
    """
    投诉二级类别
    """
    name = models.CharField(max_length=200, verbose_name='名称')
    ComplainFirstCategory = models.ForeignKey(ComplainFirstCategory, related_name='CompSecondCate', on_delete=models.CASCADE, verbose_name='类别')

    class Meta:
        verbose_name = '投诉二级类别'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.name   # 被引用时返回的值

serializers.py

class ComplainSecondCategorySerializer(serializers.ModelSerializer):
    class Meta:
        model = ComplainSecondCategory
        fields = ('id','name',)    #字段必须是数组


class ComplainFirstCategorySerializer(serializers.ModelSerializer):
    CompSecondCate = ComplainSecondCategorySerializer(many=True);

    class Meta:
        model = ComplainFirstCategory
        fields = ('id','name', 'CompSecondCate',)
        # fields = "__all__"  # 包含所有字段

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。