微信小程序开发笔记（1.1）滚动选择器的使用

前言

最近我被拉去做一个小程序，由于时间紧迫，只能暂时搁置在其他方面。没有办法系统地学习。只能是功能导向。一步步学习功能，同时记录学习过程。

今天实现的是一个很简单的功能：查询历年各省市的分数，如图

这个功能其实很简单：用户选择相应的条件后，点击“查询”，然后显示查询结果。

主要涉及三个部分：

通过滚动选择器单选框读取并显示云数据

使用三个博客来讲述这个故事。今天我们讨论的是滚动选择器。

滚动选择器

我们先看一下官方文档中的描述。

网址：微信官方文档-

以上是一般属性。没什么好说的。我主要讲一下mode属性。

选择器有五种类型：

普通选择器

普通选择器是我们要使用的单列选择器。只能选择一列选项。

如何配置这个普通的选择器呢？除了共同的属性外，不同的选择器还具有不同的属性。

js界面中准备好数据后，在wxml界面中配置选择器并进行数据绑定。

<view class="section"> <view class="section__title">普通选择器view> <picker bindchange="bindPickerChange" value="{ {index}}" range="{ {array}}"> <view class="picker"> 当前选择：{ {array[index]}} view> picker> view> <view class="section"> <view class="section__title">普通选择器view> <picker bindchange="bindPickerChange" value="{ {index}}" range="{ {objectArray}}" range-key="{ { 'name'}}"> <view class="picker"> 当前选择：{ {objectArray[index].name}} view> picker> view>