微信小程序开发极速实战：picker滚动选择器

AndroidPickerView滚动选择器的使⽤⽅法⼿机⾥设置闹钟需要选择时间，那个选择时间的控件就是滚动选择器，前⼏天⽤⼿机刷了MIUI，发现⾃带的那个时间选择器效果挺好看的，于是就⾃⼰仿写了⼀个，权当练⼿。

先来看效果：效果还⾏吧？实现思路就是⾃定义⼀个PickerView，单独滚动的是⼀个PickerView，显然上图中有分和秒的选择所以在布局⾥⽤了两个PickerView。

由于这⾥不涉及到text的点击事件，所以只需要继承View就⾏了，直接把text⽤canvas画上去。

PickerView的实现的主要难点：难点1：字体随距离的渐变。

可以看到，text随离中⼼位置的距离变化⽽变化，这⾥变化的是透明度alpha和字体⼤⼩TexSize，这两个值我都设置了Max和Min值，通过其与中⼼点的距离计算scale。

我⽤的是变化曲线是抛物线scale=1-ax^2(x<=Height/4),scale = 0(x>Height/4)，a=(4/Height)^2。

x就是距离View中⼼的偏移量。

⽤图⽚表⽰如下：难点2：text的居中。

绘制text的时候不仅要使其在x⽅向上居中，还要在y⽅向上居中，在x⽅向上⽐较简单，设置Paint的Align为Align.CENTER就⾏了，但是y⽅向上很蛋疼，需要计算text的baseline。

难点3：循环滚动。

为了解决循环滚动的问题我把存放text的List从中间往上下摊开，通过不断地moveHeadToTail和moveTailToHead使选中的text始终是list的中间position的值。

以上就是⼏个难点，了解了之后可以来看PickerView的代码了：package com.jingchen.timerpicker;import java.util.ArrayList;import java.util.List;import java.util.Timer;import java.util.TimerTask;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Paint.Align;import android.graphics.Paint.FontMetricsInt;import android.graphics.Paint.Style;import android.os.Handler;import android.os.Message;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;/*** 滚动选择器** @author chenjing**/public class PickerView extends View{public static final String TAG = "PickerView";/*** text之间间距和minTextSize之⽐*/public static final float MARGIN_ALPHA = 2.8f;/*** ⾃动回滚到中间的速度*/public static final float SPEED = 2;private List<String> mDataList;/*** 选中的位置，这个位置是mDataList的中⼼位置，⼀直不变private int mCurrentSelected;private Paint mPaint;private float mMaxTextSize = 80;private float mMinTextSize = 40;private float mMaxTextAlpha = 255;private float mMinTextAlpha = 120;private int mColorText = 0x333333;private int mViewHeight;private int mViewWidth;private float mLastDownY;/*** 滑动的距离*/private float mMoveLen = 0;private boolean isInit = false;private onSelectListener mSelectListener;private Timer timer;private MyTimerTask mTask;Handler updateHandler = new Handler(){@Overridepublic void handleMessage(Message msg){if (Math.abs(mMoveLen) < SPEED){mMoveLen = 0;if (mTask != null){mTask.cancel();mTask = null;performSelect();}} else// 这⾥mMoveLen / Math.abs(mMoveLen)是为了保有mMoveLen的正负号，以实现上滚或下滚 mMoveLen = mMoveLen - mMoveLen / Math.abs(mMoveLen) * SPEED;invalidate();}};public PickerView(Context context){super(context);init();}public PickerView(Context context, AttributeSet attrs){super(context, attrs);init();}public void setOnSelectListener(onSelectListener listener){mSelectListener = listener;}private void performSelect(){if (mSelectListener != null)mSelectListener.onSelect(mDataList.get(mCurrentSelected));}public void setData(List<String> datas){mDataList = datas;mCurrentSelected = datas.size() / 2;invalidate();public void setSelected(int selected){mCurrentSelected = selected;}private void moveHeadToTail(){String head = mDataList.get(0);mDataList.remove(0);mDataList.add(head);}private void moveTailToHead(){String tail = mDataList.get(mDataList.size() - 1);mDataList.remove(mDataList.size() - 1);mDataList.add(0, tail);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){super.onMeasure(widthMeasureSpec, heightMeasureSpec);mViewHeight = getMeasuredHeight();mViewWidth = getMeasuredWidth();// 按照View的⾼度计算字体⼤⼩mMaxTextSize = mViewHeight / 4.0f;mMinTextSize = mMaxTextSize / 2f;isInit = true;invalidate();}private void init(){timer = new Timer();mDataList = new ArrayList<String>();mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mPaint.setStyle(Style.FILL);mPaint.setTextAlign(Align.CENTER);mPaint.setColor(mColorText);}@Overrideprotected void onDraw(Canvas canvas){super.onDraw(canvas);// 根据index绘制viewif (isInit)drawData(canvas);}private void drawData(Canvas canvas){// 先绘制选中的text再往上往下绘制其余的textfloat scale = parabola(mViewHeight / 4.0f, mMoveLen);float size = (mMaxTextSize - mMinTextSize) * scale + mMinTextSize;mPaint.setTextSize(size);mPaint.setAlpha((int) ((mMaxTextAlpha - mMinTextAlpha) * scale + mMinTextAlpha)); // text居中绘制，注意baseline的计算才能达到居中，y值是text中⼼坐标float x = (float) (mViewWidth / 2.0);float y = (float) (mViewHeight / 2.0 + mMoveLen);FontMetricsInt fmi = mPaint.getFontMetricsInt();float baseline = (float) (y - (fmi.bottom / 2.0 + fmi.top / 2.0));canvas.drawText(mDataList.get(mCurrentSelected), x, baseline, mPaint);// 绘制上⽅datafor (int i = 1; (mCurrentSelected - i) >= 0; i++){drawOtherText(canvas, i, -1);}// 绘制下⽅datafor (int i = 1; (mCurrentSelected + i) < mDataList.size(); i++){drawOtherText(canvas, i, 1);}/*** @param canvas* @param position* 距离mCurrentSelected的差值* @param type* 1表⽰向下绘制，-1表⽰向上绘制*/private void drawOtherText(Canvas canvas, int position, int type){float d = (float) (MARGIN_ALPHA * mMinTextSize * position + type* mMoveLen);float scale = parabola(mViewHeight / 4.0f, d);float size = (mMaxTextSize - mMinTextSize) * scale + mMinTextSize;mPaint.setTextSize(size);mPaint.setAlpha((int) ((mMaxTextAlpha - mMinTextAlpha) * scale + mMinTextAlpha)); float y = (float) (mViewHeight / 2.0 + type * d);FontMetricsInt fmi = mPaint.getFontMetricsInt();float baseline = (float) (y - (fmi.bottom / 2.0 + fmi.top / 2.0));canvas.drawText(mDataList.get(mCurrentSelected + type * position),(float) (mViewWidth / 2.0), baseline, mPaint);}/*** 抛物线** @param zero* 零点坐标* @param x* 偏移量* @return scale*/private float parabola(float zero, float x){float f = (float) (1 - Math.pow(x / zero, 2));return f < 0 ? 0 : f;}@Overridepublic boolean onTouchEvent(MotionEvent event){switch (event.getActionMasked()){case MotionEvent.ACTION_DOWN:doDown(event);break;case MotionEvent.ACTION_MOVE:doMove(event);break;case MotionEvent.ACTION_UP:doUp(event);break;}return true;}private void doDown(MotionEvent event){if (mTask != null){mTask.cancel();mTask = null;}mLastDownY = event.getY();}private void doMove(MotionEvent event){mMoveLen += (event.getY() - mLastDownY);if (mMoveLen > MARGIN_ALPHA * mMinTextSize / 2){// 往下滑超过离开距离moveTailToHead();mMoveLen = mMoveLen - MARGIN_ALPHA * mMinTextSize;} else if (mMoveLen < -MARGIN_ALPHA * mMinTextSize / 2){// 往上滑超过离开距离moveHeadToTail();mMoveLen = mMoveLen + MARGIN_ALPHA * mMinTextSize;}mLastDownY = event.getY();invalidate();}private void doUp(MotionEvent event){// 抬起⼿后mCurrentSelected的位置由当前位置move到中间选中位置if (Math.abs(mMoveLen) < 0.0001){mMoveLen = 0;return;}if (mTask != null){mTask.cancel();mTask = null;}mTask = new MyTimerTask(updateHandler);timer.schedule(mTask, 0, 10);}class MyTimerTask extends TimerTask{Handler handler;public MyTimerTask(Handler handler){this.handler = handler;}@Overridepublic void run(){handler.sendMessage(handler.obtainMessage());}}public interface onSelectListener{void onSelect(String text);}}代码⾥的注释都写的很清楚了。

picker的用法
Picker是一个常用的UI控件，在移动应用程序中用于选择或浏览各种选项。

它允许用户通过滚动列表或旋转轮选择其中一个选项。

Picker的使用方法通常包括以下步骤：
1.定义Picker控件：在应用程序的用户界面中添加Picker控件，通常在布局文件中进行定义。

2.设置数据源：通过设置数据源，为Picker提供要显示的选项列表。

可以是一组字符串，也可以是自定义的数据对象。

3.配置选项样式：可以自定义Picker的外观和用户交互样式，如
字体大小、颜色、滚动方式等。

4.处理选项选择事件：当用户选择一个选项时，可以通过事件处
理程序来捕获并处理相应的逻辑。

除了基本的使用方式，Picker还可以进行拓展和定制，以满足特
定需求。

-数据源定制：可以根据应用需求，自定义数据源，提供更复杂的选项列表。

例如，从网络或数据库动态加载数据。

-样式定制：可以通过自定义渲染器（renderer）或样式属性，调整Picker的外观和交互方式，以满足应用程序的设计要求。

-嵌套使用：Picker可以嵌套在其他布局中，与其他UI控件和功能组合使用，以实现更复杂的界面和交互效果。

-动态更新：可以通过代码中的数据操作，动态更新Picker的选项列表，以反映实时数据变化。

总的来说，Picker是一个灵活且功能强大的UI控件，提供了方便的选项选择和浏览功能，可以根据应用的需求进行定制和拓展。

微信⼩程序picker组件-省市⼆级联动picker从底部弹起的滚动选择器，现⽀持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，⽇期选择器，省市区选择器，默认是普通选择器。

由于项⽬需求，需要使⽤省市2级联动选择器，由于官⽅默认提供的是省市区3级联动选择器，所以⾃⼰封装了⼀个2级选择器wxml⽂件<view class="section"><view class="section__title">省市⼆级联动demo</view><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"><view class="picker">当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}</view></picker></view>js⽂件，原本省市数据⽂件想通过请求获取，但考虑到⽹络请求延时等问题，直接将数据放在js中// pcity/pcity.jsvar thatvar list = []Page({/*** 页⾯的初始数据*/data: {multiIndex:[0,0],multiArray: [['北京', '安徽', "福建", "⽢肃", "⼴东", "⼴西", "贵州", "海南", "河北", "河南", "⿊龙江", "湖北", "湖南", "吉林", "江苏", "江西", "辽宁", "内蒙古", "宁夏", "青海", "⼭东", "⼭西", "陕西", "上海", "四川", "天津", "西藏", "新疆", "云南", "浙江" objectMultiArray:[{ "regid": "2", "parid": "1", "regname": "北京", "regtype": "1", "ageid": "0" },{ "regid": "3", "parid": "1", "regname": "安徽", "regtype": "1", "ageid": "0" },{ "regid": "4", "parid": "1", "regname": "福建", "regtype": "1", "ageid": "0" },{ "regid": "5", "parid },onLoad: function(){that = this},bindMultiPickerChange: function(e){that.setData({"multiIndex[0]": e.detail.value[0],"multiIndex[1]": e.detail.value[1]})},bindMultiPickerColumnChange: function (e){switch (e.detail.column){case 0:list = []for (var i = 0; i < that.data.objectMultiArray.length;i++){if (that.data.objectMultiArray[i].parid == that.data.objectMultiArray[e.detail.value].regid){list.push(that.data.objectMultiArray[i].regname)}}that.setData({"multiArray[1]": list,"multiIndex[0]": e.detail.value,"multiIndex[1]" : 0})}}})　效果展⽰。

微信小程序开发组件：组件说明：picker：滚动选择器，现支持三种选择器，通过mode属性来区分，分别是普通选择器(mode = selector)，时间选择器(mode = time)，日期选择器(mode = date)，默认是普通选择器。

wxml<view class="page"><view class="page__hd"><text class="page__title">picker</text><text class="page__desc">选择器</text></view><view class="page__bd"><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 mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"><view class="picker">当前选择: {{time}}</view></picker></view><view class="section"><view class="section__title">日期选择器</view><picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"><view class="picker">当前选择: {{date}}</view></picker></view></view></view>jsPage({data: {array: ['中国', '美国', '巴西', '日本'],index: 0,date: '2016-09-01',time: '12:01'},bindPickerChange: function(e) {console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({index: e.detail.value})},bindDateChange: function(e) {this.setData({date: e.detail.value})},bindTimeChange: function(e) {this.setData({time: e.detail.value})}})wxss.page {min-height: 100%;flex: 1;background-color: #FBF9FE;font-size: 32rpx;font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;overflow: hidden;}.page__hd{padding: 50rpx 50rpx 100rpx 50rpx;text-align: center;}.page__title{display: inline-block;padding: 20rpx 40rpx;font-size: 32rpx;color: #AAAAAA;border-bottom: 1px solid #CCCCCC;}.page__desc{display: none;margin-top: 20rpx;font-size: 26rpx;color: #BBBBBB;}.picker{padding: 26rpx; background-color: #FFFFFF; }.section{margin-bottom: 80rpx; }.section__title{margin-bottom: 16rpx;padding-left: 30rpx;padding-right: 30rpx;}主要属性：普通选择器：(mode = selector)属性名类型默认值说明rangeArray[ ]mode为selector 时，range 有效valueNumbermode为selector 时，是数字，表示选择了range 中的第几个，从0开始。

[微信⼩程序]微信⼩程序下拉滚动选择器picker绑定数据的两种⽅式需求是将各校区对应各班级的数据以两列选择器的⽅式展⽰出来，并且可以在选择完成之后记录选结果参数。

校区数据和班级数据分别是两个接⼝，以校区 teach_area_id 字段关联其各班级数据<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="picker">当前选择：{{multiArray[0][multiIndex[0]]}} > {{multiArray[1][multiIndex[1]]}}</view></picker>校区api数据格式"result": [{"teach_area_id": "xxx1", //值为模拟加密数据"teach_area_name": "上海校区"},{"teach_area_id": "xxx2","teach_area_name": "⽆锡校区"},{"teach_area_id": "xxx3","teach_area_name": "苏州校区"},{"teach_area_id": "xxx4","teach_area_name": "杭州校区"},{"teach_area_id": "xxx5","teach_area_name": "南京校区"},{"teach_area_id": "xxx6","teach_area_name": "北京校区"},{"teach_area_id": "xxx7","teach_area_name": "⼴州校区"},{"teach_area_id": "xxx","teach_area_name": "深圳校区"}],1.⾸先在onload 中请求校区数据并存到全局变量中wx.request({url:'https://api.xxxxxxx',data: {},header: {'content-type': 'application/json' // 默认值},success(){var xiaoquList = res.data.result;var xiaoquArr = xiaoquList.map(item => { // 此⽅法将校区名称区分到⼀个新数组中return item.teach_area_name;});that.setData({multiArray: [xiaoquArr, []], xiaoquList,xiaoquArr})var default_xiaoqu_id = xiaoquList[0]['teach_area_id']; //获取默认的校区对应的 teach_area_idif (default_xiaoqu_id) {that.searchClassInfo(default_xiaoqu_id) // 如果存在调⽤获取对应的班级数据}}})2.获取班级数据函数并存到全局变量中班级数据格式"result": [{ "teach_instance_id": "xxx", //加密数值"teach_instance_name": "2级-33期-1班"},{"teach_instance_id": "xxx1","teach_instance_name": "3级-25期-10班"},{"teach_instance_id": "xxx2","teach_instance_name": "3级-25期-9班"},]获取班级数据函数 searchClassInfosearchClassInfo(xiaoqu_id){var that = this;if (xiaoqu_id) {this.setData({teach_area_id: xiaoqu_id})var url = 'https://classapi';util.http(url, { teach_area_id: xiaoqu_id},res => { // 此处将请求封装在util.js中var classList = res.data.result;var classArr = classList.map(item => {return item.teach_instance_name;})classArr.unshift('全部班级'); // 接⼝中没有提供全部班级字段，添加之var xiaoquArr = this.data.xiaoquArr;that.setData({multiArray: [xiaoquArr, classArr],classArr,classList})})}},3.默认数据添加之后需要在每次滚动选择校区分类的时候，请求加载对应班级数据，监听picker滚动函数bindMultiPickerColumnChange: function (e) {//e.detail.column 改变的数组下标列, e.detail.value 改变对应列的值console.log('修改的列为', e.detail.column, '，值为', e.detail.value);var data = {multiArray: this.data.multiArray,multiIndex: this.data.multiIndex};data.multiIndex[e.detail.column] = e.detail.value;var teach_area_id_session = this.data.teach_area_id; // 保持之前的校区id 与新选择的id 做对⽐，如果改变则重新请求数据 switch (e.detail.column) {case 0:var xiaoquList = this.data.xiaoquList;var teach_area_id = xiaoquList[e.detail.value]['teach_area_id'];if (teach_area_id_session != teach_area_id) { // 与之前保持的校区id做对⽐，如果不⼀致则重新请求并赋新值this.searchClassInfo(teach_area_id); }data.multiIndex[1] = 0;break;}this.setData(data);},4.选择完毕后记录选择的值由于官⽅api返回的值是数组格式，需要做⼩调整bindMultiPickerChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)var class_key = 0;var classList =this.data.classList;var select_key = e.detail.value[1];var real_key = select_key - 1;if (real_key < class_key) {this.setData({class_id: 0})} else {this.setData({class_id: classList[real_key]['teach_instance_id'] // class_id 代表着选择的班级对应的班级id })}this.setData({multiIndex: e.detail.value})},5.之后就可以根据 teach_area_id (校区id) 和 teach_instance_id (班级id) 完成其他业务逻辑。

微信⼩程序-时间picker（怎样设置起始时间⼩于结束时间,并筛选出在此时间范围的数据）在⼩程序的开发,会遇到时间选择器,来供我们选择起始时间和结束时间.以此来筛选数据,得到该时间范围内的数据.⾸先做⼀个时间弹窗,⽤hidden来控制是否显⽰.我直接⽤.wpy后缀<view class="weui-cells timePicker" hidden="{{timeBoxHidden}}" style="height:240rpx;"> <view class="weui-cell" style=""> <picker mode="date" value="{{dateStart}}" end="{{dateEnd}}" bindchange="bindDateStartChange"> <text space='nbsp'> 开始时间 {{dateStart}}></text> </picker> </view> <view class="weui-cell" style="height:70rpx;"> <picker mode="date" value="{{dateEnd}}" start="{{dateStart}}" end="2018-10-10" bindchange="bindDateEndChange"> <text space='nbsp'> 结束时间 {{dateEnd}}></text> </picker> </view> <view class="weui-cell" > <button class="weui-btn weui-btn_primary" bindtap="cancelTime">重置</button> <button class="weui-btn weui-btn_primaryTwo" bindtap="sureTime">确定</button> </view></view>js中去绑定数据data = {dateStart: '2018-09-10',dateEnd: '2018-09-12',articles: [ ]}如果想靠起始时间和结束时间来筛选数据我试过在起始时间和结束时间绑定的事件中去调⽤接⼝,后来发现只能筛选除⼤于起始时间和⼩于结束时间的⽽不能得到其中间的数据.后来经过尝试,便在确定绑定事件中去调⽤该接⼝.sureTime(e) { this.timeBoxHidden = true this.fetch({ url:' ', success: (data)=> { let arr = [] data.datas.forEach((item) => { if(item.applyTime >= this.dateStart && item.applyTime <= this.dateEnd ) { arr.push(item) }})//article 列表渲染的数据数组 this.articles = arr }}) this.scrollToUpper()},调⽤接⼝,我使⽤的是封装的fetchAPI ,⼤家库使⽤微信⼩程序本⾝的wx.request({}) 去获取接⼝这样便就完成了,时间选择器的⼀些操作。

微信小程序开发_西安交通大学中国大学mooc课后章节答案期末考试题库2023年1.微信开发者工具中不包含（）界面。

答案:2.WXML中getBlur和getInput的区别是（）。

答案:3.以下可以用于清空全部数据的是（）。

答案:4.为了提高使用便捷性，同一个微信小程序允许每个用户单独存储在本地设备中的数据应在（）以内。

答案:5.在数据API中，wx.getStorageSync的后缀Sync表示（）。

答案:6.关于Navigator组件属性的说法中，错误的是（）。

答案:7.text组件中可以显示html的元素内容。

（）答案:错误8.微信小程序中，可以使用wx.downloadFile进行文件下载。

（）答案:正确9.微信小程序的网络API在发起网络请求时使用（）格式的文本进行数据交换。

答案:10.图片pic1.jpg的尺寸是宽320px、高160px。

在wxml页面代码中：且在wxss中：image{ width: 160px;}那么最终显示的图片尺寸是（）。

答案:11.map组件用来开发与地图有关的应用。

（）答案:正确12.微信支付的方式包括（）。

答案:App支付_小程序支付_扫码支付_刷卡支付13.关于数据缓存API函数类型的说法中，不正确的是（）。

答案:14.能够获取本地缓存数据的API包括（）。

答案:wx.getStorage_wx.getStorageInfoSync_wx.getStorageInfo_wx.getStorage Sync15.以下属于有关位置的API的是（）。

答案:wx.createMapContext16.关于border-radius说法正确的是？答案:17.关于image组件属性的说法中，正确的是（）。

答案:18.wx.login（）有哪几个属性？答案:19.下列能够实现带参跳转到result页面的是（）。

答案:20.下列关于wx.setStorage的说法中错误的是（）。

picker用法Picker是一种常用的UI组件，用于让用户从预定义的选项中选择一个值。

它在移动应用程序开发中广泛使用，提供了简单直观的界面，帮助用户进行选择操作。

在本文中，我们将介绍Picker的基本用法，帮助您了解如何使用Picker来增强您的应用程序。

首先，要使用Picker组件，您需要在应用程序中导入相应的库或依赖。

这通常在开发环境的设置文件中完成，具体的步骤可能因所用开发环境而异。

一旦您成功导入Picker组件，您可以在应用程序的视图中使用它。

通常，您需要定义一个Picker的数据源，即您希望用户从中选择的选项列表。

这些选项可以是硬编码的值，也可以是动态生成的数据。

接下来，您可以通过以下方式配置Picker的属性来自定义其外观和行为：1. selectedValue：该属性指定Picker的初始值。

您可以将它设置为数据源中的一个值，或者使用变量来控制选中的值。

2. onValueChange：该属性接收一个函数作为参数，用于处理Picker值的更改事件。

当用户选择一个新的值时，这个函数会被触发，您可以在其中更新相关的状态或执行其他操作。

3. mode：该属性决定了Picker的显示模式。

您可以选择一个模式，如“dropdown”、“dialog”或“wheel”，以实现不同的外观和交互方式。

在应用程序中使用Picker时，您还可以根据需求进行一些其他的自定义操作。

例如，您可以设置Picker的样式、字体、颜色等，以适应您的应用程序设计风格。

您还可以使用布局布局参数来控制Picker在界面中的位置和大小。

总之，Picker是一个方便实用的UI组件，可用于让用户从预定义选项中选择一个值。

通过了解Picker的基本用法和常用属性，您可以轻松地在您的应用程序中使用它，提供更好的用户体验。

无论是选择日期、时间、地点还是其他选项，Picker都能帮助您简化用户操作，增强应用程序功能。

题目：picker选择器confirmtext的使用方法一、确认文本的作用picker选择器是一种常用的用来让用户选择特定数值或者选项的组件。

而confirmtext则是用来设置选择器确认按钮的文本。

通过设定confirmtext，可以让用户更直观地理解该按钮的作用，提升用户体验。

二、 picker选择器confirmtext的基本用法在使用picker选择器时，我们可以通过设置confirmtext属性来确定确认按钮的文本内容。

通常情况下，confirmtext可以设置为“确定”、“确认”、“完成”等词语，以提示用户点击按钮后会执行的动作。

三、使用示例下面以一个日期选择器的例子来介绍confirmtext的使用方法。

```javascriptimport { Picker } from 'antd-mobile';class DateSelector extends ponent {state = {date: '',}render() {return (<div><Pickerdata={dateData}title="选择日期"cascade={false}value={this.state.date}onChange={date => this.setState({ date })}onOk={date => console.log(date)}confirmtext="确定"><CustomChildren>选择日期</CustomChildren></Picker></div>);}}```在上面的例子中，confirmtext被设置为“确定”，这样用户在选择完日期后，点击确认按钮时会更加清晰地知道自己即将执行的动作。

四、 confirmtext的注意事项在使用confirmtext时，需要注意以下几点：1. 根据实际场景设置合适的文本内容，让用户轻松理解确认按钮的作用；2. confirmtext的内容应该简洁明了，不宜过长；3. 在多语言环境下，需要考虑不同语言的用户群体，确认按钮的文本应该能够被翻译和理解。

微信⼩程序——普通选择器（picker）最近在看⼩程序，这个问题应该拖了好久了吧？就是我在⽤微信⼩程序的时候的组件picker的普通选择器的时候，⼀个页⾯要是⼀个的话还是没问题的，但是要是多个的话就会出点问题，具体的问题就是我点击第⼀个的时候会把后⾯的都选上，这样要是放到项⽬中是不⾏的，于是我就找我同学帮我看了⼀下，才把问题给解决了。

下⾯是代码：index.wxml<view class="item"><view class="r"><view class="section"><picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"><view class="picker">{{array[index]}}<image class="icon" src="{{config.imageUrl}}/images/z-i2.jpg" mode="widthFix" lazy-load="false" binderror="" bindload=""></image></view></picker></view></view><view class="l">户型</view></view><view class="item"><view class="r"><view class="section"><picker bindchange="bindPickerChange1" value="{{index1}}" range="{{array1}}"><view class="picker">{{array1[index1]}}<image class="icon" src="{{config.imageUrl}}/images/z-i2.jpg" mode="widthFix" lazy-load="false" binderror="" bindload=""></image></view></picker></view></view><view class="l">朝向</view></view><view class="item"><view class="r"><view class="section"><picker bindchange="bindPickerChange2" value="{{index2}}" range="{{array2}}"><view class="picker">{{array2[index2]}}<image class="icon" src="{{config.imageUrl}}/images/z-i2.jpg" mode="widthFix" lazy-load="false" binderror="" bindload=""></image></view></picker></view></view><view class="l">年代</view></view>index.jsarray: ['点击选择分类', '两室⼀厅', '三室⼀厅', '⼀室⼀厅'],index: 0,array1: ['点击选择分类', '东', '南', '西', '北'],index1: 0,array2: ['时间选择', '东', '222', '西', '北'],index2: 0,},bindPickerChange: function (e) {console.log('pickerq发送选择改变，携带值0为', e.detail.value)this.setData({index: e.detail.value})},bindPickerChange1: function (e) {console.log('pickerw发送选择改变，携带值1为', e.detail.value)this.setData({index1: e.detail.value})},bindPickerChange2: function (e) {console.log('pickere发送选择改变，携带值2为', e.detail.value)this.setData({index2: e.detail.value})},下⾯是截图其中第⼀张图和第⼆张是对应的每个参数对应⼀个都需要进⾏改变，⼀个不⼀样就出出不来效果，或者报错，今天遇到最⼤的⼀个报错就是他⼀直找不到⾃⼰的value值，⼀直是没有定义，最后发现就事他们对应的值不⼀样。

微信⼩程序⾃定义多列选择器使⽤详解⼀、预览微信⼩程序在⾃带的表单组件中加⼊了选择器picker，并给出了常⽤的时间和省市区三级联动选择器，但⽇常开发中不可能仅仅使⽤这些选择器，所以我们在学习时先写⼀个常见的⾃定义选择器，⽤于满⾜项⽬中的⽇常需要。

先给出效果图：（先声明选择器中数据为测试使⽤，与真实情况⽆关）⼆、picker属性⼀个简单地多列选择器只要给picker组件加属性mode="multiSelector"即可，绑定数据时使⽤range来绑定⼀个数组作为显⽰内容，下⾯是官⽅给出的属性解释。

三、创建组件我们可以先在.wxml建⼀个⾃定义picker组件：mode="multiSelector"bindchange="bindCustomPickerChange"bindcolumnchange="bindCustomPickerColumnChange"value="{{customIndex}}"range="{{onlyArray}}"><view>多列⾃创选择器：{{onlyArray[0][customIndex[0]]}}，{{onlyArray[1][customIndex[1]]}}，{{onlyArray[2][customIndex[2]]}} </view></picker>要注意的是，此处的onlyArray数组只是当前显⽰内容的数组，并不是我们全部数据的数组。

四、⾃定义函数写好组件，我们就来写js⽂件，思路如下：1.先创建页⾯所需数据Page({/*** 页⾯的初始数据*/data: {//当前选中数组的下标值customIndex: [0, 0, 0],//当前选中数组onlyArray: [[],[],[]],//customArray假设为我们从后台获取到的json数据customArray: [{name: '百度',dept: [{name: '搜索',product: [{name: '百度搜索'},{name: '百度⼀下'},]},{name: '团购',product: [{name: '百度糯⽶'}, {name: '饿了么'}]},{name: '⾳乐',product: [{name: '百度⾳乐'}]},{name: '问答社区',product: [{name: '百度贴吧'}]}]},{name: '腾讯',dept: [{name: '社交',product: [{name: 'QQ'},{name: '微信'},]},{name: '视频',product: [{name: '腾讯视频'},{name: '搜狐视频'},]},{name: '短视频',product: [{name: '微视'}]},],},2.加载页⾯时给出赋值函数。

微信⼩程序picker组件两列关联使⽤⽅式在使⽤微信⼩程序picker组件时候，可以设置属性 mode = multiSelector 意为多列选择，关联选择，当第⼀列发⽣改变时侯，第⼆列甚⾄第三列发⽣相应的改变。

但是官⽅⽂档上给的只有三列数据关联改变，没有两列改变得，我在写的时候琢磨了很久官⽅⽂档，于是写下此篇⽂档，作为总结。

结构⽂件<picker mode="multiSelector" bindchange="PickerChange" bindcolumnchange="PickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="picker">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}</view></picker>bindcolumnchange 为每⼀列改变时候触发的函数，参数为 e ，bindchange 为最终选中之后触发函数，参数为 e，range 为绑定数组js⽂件data: {multiArray: [['飞禽', '⾛兽'], ['鹰', '鸽⼦', '⿇雀', '鹦鹉']],multiIndex: [0, 0],arrColumn0: ['鹰', '鸽⼦', '⿇雀', '鹦鹉'],arrColumn1: ['兔⼦', '狮⼦', '猎狗']},PickerChange(e) {var value = e.detail.valuethis.setData({multiIndex: value})console.log(this.data.multiArray[0][value[0]], this.data.multiArray[1][value[1]])},PickerColumnChange(e) {// 先定义数据，数组⾥⾯两个数组，意为两列，当第⼀列发⽣改变时侯，给数组重新赋值var obj = e.detailvar multiArray = this.data.multiArrayif (obj.column == 0 && obj.value == 0) {multiArray[1] = this.data.arrColumn0}if (obj.column == 0 && obj.value == 1) {multiArray[1] = this.data.arrColumn1}this.setData({multiArray: multiArray})},设计思路multiArray 为弹出层显⽰数据，为⼀个数组，数组⾥⾯有⼏个数组，就是显⽰⼏列，我这是两个数组，即为显⽰两列，multiIndex 为最终选中得数据索引，是函数 PickerChange 参数 e ⾥⾯包含得数组 e.detail.value 有两列，即会返回 [1,2] , 前⾯得 1 表⽰为，最终选择第⼀列得数组中索引为 1 对应的那个值。

uni-app之数据驱动的picker选择器（uni-data-picker）之可以选择到任意级别背景说明uni-app 官⽅的插件市场有数据驱动选择器，可以⽤作多级分类的场景。

本⼈引⼊插件后，发现，在h5和微信⼩程序都只能选择到叶⼦级。

⽽在给出中确并⾮如此。

可以选择年级，⽽不选择班级。

然后，想试试官⽅的⼿机版，发现并没有⽰例（截⾄⽇期2021年8⽉3⽇）为⽌。

当然，这⾥操作起选择器的时候，或多或少，有些繁琐。

因为下⽅的选择框关闭⼀次。

然后，我把官⽹的⽰例项⽬下载下来。

运⾏⼀下，发现做不到只选择年级，不选择班级（似乎，只能到叶⼦节点了）。

两边的东西居然有区别。

不知道官⽹以后会不会改进⽅案。

⽹页的组件⽰例下载的组件⽰例点击⼀次后选择当前组件，并关闭⽤于选择的弹出框如果包含⼦级，则切换到⼦级选择页⾯；如果不包含⼦级选择，则关闭不过，本⼈的需求中，有可能选择的不是叶⼦。

⽐如，选择部门的时候。

所以，怎样才能任意层级的数据都是可选的呢？问题和提出解决⽅案查看说明，发现了uni-data-picker包含以下事件。

事件名称类型说明@change EventHandle选择完成时触发 {detail: {value}}@nodeclick EventHandle节点被点击时触发@popupclosed EventHandle弹出层被关闭时触发思前想后，有了两种解决⽅案。

⽅案⼀：当点击某⼀项（触发@nodeclick）时，则选中某⼀项。

⽅案⼆：当点击某⼀项（触发@nodeclick）时，暂存当前选中的项值；当关闭弹出层（@popupclosed）时，则选中某⼀项。

考虑如果涉及级联，则⽅案⼆，数据更少的变动，则可能更少的影响级联。

代码⽰例⽅案⼀的.vue⽂件代码如下：1 <template>2 <view class="container">3 <view class="title">4 <text>uni-data-picker 本地数据</text>5 </view>6 <uni-data-picker placeholder="请选择班级" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes"7 @nodeclick="onnodeclick" >8 </uni-data-picker>910 </view>11 </template>1213 <script>14 export default {15 data() {16return {17 classes: '1-2',18 dataTree: [{19 text: "⼀年级",20 value: "1-0",21 children: [{22 text: "1.1班",23 value: "1-1"24 },25 {26 text: "1.2班",27 value: "1-2"28 }]29 },30 {31 text: "⼆年级",32 value: "2-0",33 children: [{34 text: "2.1班",35 value: "2-1"36 },37 {38 text: "2.2班",39 value: "2-2"40 }]41 },42 {43 text: "三年级",44 value: "3-0",45 disable: true46 }]47 }48 },49 methods: {50 onnodeclick(e) {51this.classes = e.value;52 },53 }54 }55 </script>5657 <style>58 .container {59 height: 100%;60/* #ifndef APP-NVUE */61 display: flex;62 max-width: 500px;63 padding: 0 15px;64/* #endif */65 flex-direction: column;66 }6768 .title {69 font-size: 14px;70 font-weight: bold;71 margin: 20px 0 5px 0;72 }7374 .data-pickerview {75 height: 400px;76 border: 1px #e5e5e5 solid;77 }78 </style>View Code⽅案⼆的.vue⽂件代码如下：1 <template>2 <view class="container">3 <view class="title">4 <text>uni-data-picker 本地数据</text>5 </view>6 <uni-data-picker placeholder="请选择班级" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes"7 @nodeclick="onnodeclick" @popupclosed="onpopupclosed">8 </uni-data-picker>910 </view>11 </template>1213 <script>14 export default {15 data() {16return {17 tempClasses : '', // 临时存放vue值18 classes: '1-2',19 dataTree: [{20 text: "⼀年级",21 value: "1-0",22 children: [{23 text: "1.1班",24 value: "1-1"25 },26 {27 text: "1.2班",28 value: "1-2"29 }]30 },31 {32 text: "⼆年级",33 value: "2-0",34 children: [{35 text: "2.1班",36 value: "2-1"37 },38 {39 text: "2.2班",40 value: "2-2"41 }]42 },43 {44 text: "三年级",45 value: "3-0",46 disable: true47 }]48 }49 },50 methods: {51/** 点击选项时执⾏⽅法52 * @param {Object} e53*/54 onnodeclick(e) {55this.tempClasses = e.value;56 },57/** 关闭弹出框执⾏⽅法58 * @param {Object} e59*/60 onpopupclosed(e) {61this.classes = this.tempClasses;62 },63 }64 }65 </script>6667 <style>68 .container {69 height: 100%;70/* #ifndef APP-NVUE */71 display: flex;72 max-width: 500px;73 padding: 0 15px;74/* #endif */75 flex-direction: column;76 }7778 .title {79 font-size: 14px;80 font-weight: bold;81 margin: 20px 0 5px 0;82 }8384 .data-pickerview {85 height: 400px;86 border: 1px #e5e5e5 solid;87 }88 </style>View Code扩展——获取数据驱动选择器当前的选中值数据驱动选择器中，选择完成时（@change）可以获取到当前选中的数组。

picker bindchange 小程序 icon用法在微信小程序中，picker组件是一个选择器组件，它可以让用户通过滑动或点击来选择一个或多个选项。

当用户选择了一个选项后，可以通过bindchange事件来获取用户的选择结果。

bindchange事件的回调函数会接收一个参数，表示用户选择的选项的数据。

你可以使用这个数据来更新页面的状态或执行其他操作。

下面是一个使用picker组件和bindchange事件的示例，其中还使用了icon属性来显示一个图标：html<view class="container"><picker bindchange="handleChange" range="{{range}}" icon="{{icon}}"> <view class="picker-icon"><image src="{{icon}}" /></view></picker></view>css.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;}.picker-icon {width: 30px;height: 30px;margin-right: 10px;}javascriptPage({data: {range: [1, 2, 3, 4, 5],icon: '/images/icon.png' // 图标路径},handleChange(e) {const value = e.detail.value; // 用户选择的选项值console.log('用户选择了：', value);// 在这里可以根据value的值执行相应的操作，比如更新页面的状态或执行其他逻辑处理}})在上面的示例中，当用户滑动选择器并选择一个选项后，handleChange函数会被调用，并接收到一个事件对象e。

微信⼩程序实现⾃定义picker选择器弹窗内容微信⼩程序中定义好的⼏种picker选择器，不管是⽇期选择器还是地区选择器，或是其他的都有定死的样式和内容。

例如：但是⼤多数开发程序的情况下还是需要⾃⼰写样式的，或是内容的。

例如：wxml<view class="free-btns" style="margin-top: 10vh;background:none;"><button class="free-btn" bindtap="toggleDialog">选定国家：{{value}}</button></view><view class="free-dialog {{ showDialog ? 'free-dialog--show' : '' }}"><view class="free-dialog__mask" bindtap="toggleDialog" /><view class="free-dialog__container"><view style="padding: 5% 5% 15%;"><form bindsubmit='submit' bindreset="reset"><view bindtap='freetoBack' class="free-button free-dialog-reset">取消</view><view bindtap='freeBack' class="free-button free-dialog-submit">确定</view><radio-group class='free-radios' bindchange="radioChange"><label class="free-radio" bindtap="click" wx:for="{{items}}" wx:key="{{items}}" data-id="{{index}}" style="{{index==id?'background:#48c23d;color:#fff;':'background:#fff;color:#000;'}}"> <radio value="{{}}" name="{{item.value}}"></radio><label class="free-text">{{item.value}}</label></label></radio-group></form></view></view></view>css.free-dialog__mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 10;background: rgba(0, 0, 0, 0.7);display: none;}.free-dialog__container {position: fixed;left: 0;bottom: 0;width: 750rpx;background: white;transform: translateY(150%);transition: all 0.4s ease;z-index: 11;}.free-dialog--show .free-dialog__container {transform: translateY(0);}.free-dialog--show .free-dialog__mask {display: block;}/*模态框中的内容*/.free-button{display: inline-block;width:50px;text-align: center;font-size:20px;color:#707070;margin-bottom:20px;}.free-dialog-submit{float: right;color:#48c23d;}radio-group{margin:10rpx 0rpx;}radio-group>label{width:22.5%;display: inline-block;border:1px solid #ddd;padding:10px 0px;margin:0px 2px 2px;}radio-group label radio{width:100%;z-index: 3;display: none;}.checked{background:#48c23d;color:#fff;}radio-group label .free-text{width:100%;text-align: center;display: inline-block;}jsPage({data: {showDialog: false,items: [{ name: '中国', value: '中国' },{ name: '美国', value: '美国' },{ name: '巴西', value: '巴西' },{ name: '⽇本', value: '⽇本' },{ name: '英国', value: '英国' },{ name: '法国', value: '法国' },{ name: '韩国', value: '韩国' },{ name: '俄罗斯', value: '俄罗斯' },]},/*点击变⾊*/click:function(e){var id = e.currentTarget.dataset.idvar that = thisthat.setData({id:id})},onLoad: function (options) {var that = thisthat.setData({value:'show'})},radioChange: function (e) {console.log('radio发⽣change事件，携带value值为：', e.detail.value)var that = thisthat.setData({value: e.detail.value})console.log(this.data.value)},toggleDialog() {this.setData({showDialog: !this.data.showDialog});},freeBack:function(){var that = thisif(this.data.value=='show'){wx.showModal({title: '提⽰',content: '你没有选择任何内容',})}that.setData({showDialog: !this.data.showDialog})},freetoBack: function () {var that = thiswx.showModal({title: '提⽰',content: '你没有选择任何内容',})that.setData({showDialog: !this.data.showDialog,value:'show',checked: false,})},})以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

关于⼩程序picker的使⽤前⾔以前做⼩程序的时候只会⽤那个picker mode = region的 3级选中，现在需要⾃⼰根据后台给的编号省市区来⽤然后就研究了多列选择器：mode = multiSelector 的⽤法当然啦，利⽤微信⼩程序的picker组件，其中：1，普通选择器：mode = selector实现⼀级选择实例；2，省市区选择器：mode = region实现省市区三级联动；3，多列选择器：mode = multiSelector实现⼆级和三级联动的10以内数字的乘法。

其实只要写⼀个demo 就都会了WXML<view class="tui-picker-content"><view class="tui-picker-name">⼀级选择实例</view><picker bindchange="changeCountry" value="{{countryIndex}}" range="{{countryList}}"><view class="tui-picker-detail">{{countryList[countryIndex]}}</view></picker></view><view class="tui-picker-content"><view class="tui-picker-name">省市区三级联动选择</view><picker bindchange="changeRegin" mode = "region" value="{{region}}"><view class="tui-picker-detail">{{region[0]}} - {{region[1]}} - {{region[2]}}</view></picker></view><view class="tui-picker-content"><view class="tui-picker-name">⾃定义⼆级联动选择</view><picker bindchange="changeMultiPicker" mode = "multiSelector" value="{{multiIndex}}" range="{{multiArray}}"><view class="tui-picker-detail">{{multiArray[0][multiIndex[0]]}} * {{multiArray[1][multiIndex[1]]}} = {{multiArray[0][multiIndex[0]] * multiArray[1][multiIndex[1]]}}</view></picker></view><view class="tui-picker-content"><view class="tui-picker-name">⾃定义三级联动选择</view><picker bindchange="changeMultiPicker3" mode = "multiSelector" value="{{multiIndex3}}" range="{{multiArray3}}"><view class="tui-picker-detail">{{multiArray3[0][multiIndex3[0]]}} * {{multiArray3[1][multiIndex3[1]]}} * {{multiArray3[2][multiIndex3[2]]}} = {{multiArray3[0][multiIndex3[0]] * multiArray3[1][multiIndex3[1]] * multiArray3[2][multiIndex3[2]]}} </view></picker></view>WXSSpage{background-color: #efeff4;}.tui-picker-content{padding: 30rpx;text-align: center;}.tui-picker-name{height: 80rpx;line-height: 80rpx;}.tui-picker-detail{height: 80rpx;line-height: 80rpx;background-color: #fff;font-size: 35rpx;padding: 0 10px;overflow: hidden;}JSPage({data: {// 普通选择器列表设置,及初始化countryList: ['中国','美国','英国','⽇本','韩国','巴西','德国'],countryIndex: 6,// 省市区三级联动初始化region: ["四川省", "⼴元市", "苍溪县"],// 多列选择器(⼆级联动)列表设置,及初始化multiArray: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]],multiIndex: [3,5],// 多列选择器(三级联动)列表设置,及初始化multiArray3: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]],multiIndex3: [3, 5, 4]},// 选择国家函数changeCountry(e){this.setData({ countryIndex: e.detail.value});},// 选择省市区函数changeRegin(e){this.setData({ region: e.detail.value });},// 选择⼆级联动changeMultiPicker(e) {this.setData({multiIndex: e.detail.value})},// 选择三级联动changeMultiPicker3(e) {this.setData({ multiIndex3: e.detail.value })}})然后在根据项⽬的需要使⽤哪个⾃定义的picker 啦。

微信⼩程序使⽤picker实现时间和⽇期选择框功能【附源码下载】本⽂实例讲述了微信⼩程序使⽤picker实现时间和⽇期选择框功能。

分享给⼤家供⼤家参考，具体如下：1、效果展⽰2、关键代码① index.wxml<picker value="{{picker1Value}}" range="{{picker1Range}}" bindchange="normalPickerBindchange">当前城市选择：{{picker1Range[picker1Value]}}</picker><picker mode="time" value="{{timeValue}}" start="00:00" end="24:00" bindchange="timePickerBindchange">当前时间选择: {{timeValue}}</picker><picker mode="date" value="{{dateValue}}" start="1999-01-01" end="2999-12-12" bindchange="datePickerBindchange">当前⽇期选择: {{dateValue}}</picker>② index.jsPage({data:{// text:"这是⼀个页⾯"picker1Value:0,picker1Range:['北京','上海','⼴州','深圳'],timeValue:'08:08',dateValue:'2016-10-13'},normalPickerBindchange:function(e){this.setData({picker1Value:e.detail.value})},timePickerBindchange:function(e){this.setData({timeValue:e.detail.value})},datePickerBindchange:function(e){this.setData({dateValue:e.detail.value})}})3、源代码点击此处。

微信⼩程序picker-view组件详解及简单实例picker-view相关⽂章：实现效果图：嵌⼊页⾯的滚动选择器属性名类型默认值说明value NumberArray数组中的数字依次表⽰ picker-view 内的 picker-view-colume 选择的第⼏项（下标从 0 开始），数字⼤于 picker-view-column 可选项长度时，选择最后⼀项。

indicator-styleString设置选择器中间选中框的样式bindchange EventHandle 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表⽰ picker-view 内的 picker-view-column 当前选择的是第⼏项（下标从 0 开始）注意：其中只可放置<picker-view-column/>组件，其他节点不会显⽰。

picker-view-column仅可放置于<picker-view />中，其孩⼦节点的⾼度会⾃动设置成与picker-view的选中框的⾼度⼀致⽰例代码：<view><view>{{year}}年{{month}}⽉{{day}}⽇</view><picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange"> <picker-view-column><view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view></picker-view-column><picker-view-column><view wx:for="{{months}}" style="line-height: 50px">{{item}}⽉</view></picker-view-column><picker-view-column><view wx:for="{{days}}" style="line-height: 50px">{{item}}⽇</view></picker-view-column></picker-view></view>const date = new Date()const years = []const months = []const days = []for (let i = 1990; i <= date.getFullYear(); i++) {years.push(i)}for (let i = 1 ; i <= 12; i++) {months.push(i)}for (let i = 1 ; i <= 31; i++) {days.push(i)}Page({data: {years: years,year: date.getFullYear(),months: months,month: 2,days: days,day: 2,year: date.getFullYear(),value: [9999, 1, 1],},bindChange: function(e) {const val = e.detail.valuethis.setData({year: this.data.years[val[0]],month: this.data.months[val[1]],day: this.data.days[val[1]]})}})感谢阅读，希望能帮助到⼤家，谢谢⼤家对本站的⽀持！。

微信⼩程序使⽤picker封装省市区三级联动实例代码微信⼩程序使⽤picker封装省市区三级联动实例⽬前学习⼩程序更多的是看看能否⼆次封装其它组件，利于以后能快速开发各种⼩程序应⽤。

⽬前发现picker的selector模式只有⼀级下拉，那么我们是否可以通过3个picker来实现三级联动模板的形式来引⼊其它页⾯中呢？答案是肯定可以的。

那么我的思路是这样的：1、使⽤template模板语法进⾏封装，数据从页⾯传⼊2、根据picker组件的语法，range只能是⼀组中⽂地区数组，但是我们需要每个地区的唯⼀码来触发下⼀级联动数据。

这样，我的做法是通过⼀个对象⾥⾯的两组数据分表存储中⽂名和唯⼀码的两个对象数组。

格式【province:{code:['110000','220000'...], name: ['北京市', '天津市'...]}】，这个格式是固定的，需要服务端配合返回3、通过picker的bindchange事件来获取下⼀级的数据，每个⽅法都写⼊函数中在暴露出来供页⾯调⽤然后讲下我demo的⽬录结构：common-net.js//wx.request请求接⼝⼆次整合-cityTemplate.js//三级联动⽅法page-demo-demo.js-demo.wxmltemplate-cityTemplate.wxmlapp.jsapp.jsonapp.wxss然后，使⽤phpstudy搭建了简单的服务端供测试。

不要问我服务端的为啥是这样的，我也不懂，刚⼊门我只要数据...当然你可以省掉这⼀步，将数据直接固定在demo.js⾥⾯进⾏测试...代码如下：【服务端的返回数据格式是遵循了下⾯的retArr的规范的】<?phpheader("Content-type: text/html; charset=utf-8");$type=$_REQUEST["type"];//获取省市区的标志$fcode=$_GET["fcode"];$retArr=["status"=>true,"data"=>[],"msg"=>""];if($type!="province" && $type!="city" && $type!="county"){$retArr["status"]=false;$retArr["msg"]="获取地区类型错误，请检查";echo json_encode($retArr);exit;}function getProvince(){$province=[];$code=["110000", "350000", "710000"];$province["code"]=$code;$name=["北京市", "福建省", "台湾省"];$province["name"]=$name;$fcode=["0", "0", "0"];$province["fcode"]=$fcode;return $province;}function getCity($P_fcode){$city=[];$code=[];$name=[];$fcode=[];if($P_fcode=="110000"){$code=["110100"];$name=["北京市"];$fcode=$P_fcode;}if($P_fcode=="350000"){$code=["350100", "350200", "350300", "350400", "350500", "350600", "350700", "350800", "350900"]; $name=["福州市", "厦门市", "莆⽥市", "三明市", "泉州市", "漳州市", "南平市", "龙岩市", "宁德市"];$fcode=$P_fcode;}if($P_fcode=="710000"){}$city=["code"=>$code, "name"=>$name, "fcode"=>$fcode];return $city;}function getCounty($P_fcode){$county=[];$code=[];$name=[];$fcode=[];if($P_fcode=="110100"){$code=["110101", "110102", "110103", "110104", "110105", "110106", "110107"];$name=["东城区", "西城区", "崇⽂区", "宣武区", "朝阳区", "丰台区", "⽯景⼭区"];$fcode=$P_fcode;}if($P_fcode=="350100"){$code=["350102", "350103", "350104"];$name=["⿎楼区", "台江区", "苍⼭区"];$fcode=$P_fcode;}if($P_fcode=="350200"){$code=["350203", "350205", "350206"];$name=["思明区", "海沧区", "湖⾥区"];$fcode=$P_fcode;}$county=["code"=>$code, "name"=>$name, "fcode"=>$fcode];return $county;}//var_dump($province);if($type=="province"){$province=getProvince();$retArr["data"]=$province;}else if($type=="city"){$city=getCity($fcode);$retArr["data"]=$city;}else if($type="county"){$county=getCounty($fcode);$retArr["data"]=$county;}echo json_encode($retArr);>接下来是cityTemplate.wxml：：<template name="city"><view class="areas"><view class="province"><picker bindchange="provincePickerChange" value="{{provinceIndex}}" range="{{}}" data-city-url="{{cityUrl}}"> <text class="select-item">{{[provinceIndex]}}</text></picker></view><view class="city"><block wx:if="{{!.length}}"> --⼆级市区-- </block><block wx:if="{{.length>0}}"><picker bindchange="cityPickerChange" value="{{cityIndex}}" range="{{}}" data-county-url="{{countyUrl}}"><text class="select-item">{{[cityIndex]}}</text></picker></block></view><view class="county"><block wx:if="{{!.length}}"> --三级地区-- </block><block wx:if="{{.length>0}}"><picker bindchange="countyPickerChange" value="{{countyIndex}}" range="{{}}"><text class="select-item">{{[countyIndex]}}</text></picker></block></view></view></template>cityTemplate.js：：/*** 获取三级联动的三个函数* that: 注册页⾯的this实例必填* p_url: ⼀级省份url 必填* p_data：⼀级省份参数选填*/var net = require( "net" );//引⼊request⽅法var g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method;function initCityFun( that, p_url, p_data ) {//获取⼀级省份数据g_cbSuccess = function( res ) {that.setData( {'city.province': res});};net.r( p_url, p_data, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method );//点击⼀级picker触发事件并获取市区⽅法var changeProvince = function( e ) {that.setData( {'city.provinceIndex': e.detail.value});var _fcode = that.data.city.province.code[ e.detail.value ];if( !_fcode ) {_fcode = 0;}var _cityUrl = e.target.dataset.cityUrl;g_url = _cityUrl + _fcode;g_cbSuccess = function( res ) {that.setData( {'city.city': res});}net.r( g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method );};that[ "provincePickerChange" ] = changeProvince;//点击⼆级picker触发事件并获取地区⽅法var changeCity = function( e ) {that.setData( {'city.cityIndex': e.detail.value});var _fcode = that.data.city.city.code[ e.detail.value ];if( !_fcode ) {_fcode = 0;}var _countyUrl = e.target.dataset.countyUrl;g_url = _countyUrl + _fcode;g_cbSuccess = function( res ) {that.setData( {'city.county': res});};net.r( g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method );};that[ "cityPickerChange" ] = changeCity;//点击三级picker触发事件var changeCounty = function( e ) {that.setData( {'city.countyIndex': e.detail.value});};that["countyPickerChange"]=changeCounty;}function getProvinceFun(that, p_url, p_data){g_cbSuccess = function( res ) {that.setData( {'city.province': res});};net.r( p_url, p_data, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method );}module.exports={initCityFun: initCityFun,getProvinceFun: getProvinceFun}顺道net.js⽅法：：/*** ⽹络发送http请求,默认为返回类型为json** url: 必须,其他参数⾮必须接⼝地址* data:请求的参数 Object或String* successFun(dts):成功返回的回调函数，已⾃动过滤微信端添加数据,按接⼝约定,返回成功后的data数据,过滤掉msg和status * successErrorFun(msg):成功执⾏请求,但是服务端认为业务错误,执⾏其他⾏为,默认弹出系统提⽰信息.* failFun:接⼝调⽤失败的回调函数* completeFun:接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏）* header:object,设置请求的 header , header 中不能设置 Referer* method:默认为 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT**/function r( url, data, successFun, successErrorFun, failFun, completeFun, header, method ) {var reqObj = {};reqObj.url = url;reqObj.data = data;//默认头为jsonreqObj.header = { 'Content-Type': 'application/json' };if( header ) {//覆盖headerreqObj.header = header;}if( method ) {reqObj.method = method;}reqObj.success = function( res ) {var returnData = res.data; //将微信端结果过滤,获取服务端返回的原样数据var status = returnData.status; //按接⼝约定,返回status时,才调⽤成功函数//console.log(res);//正常执⾏的业务函数if( status == true ) {if( successFun ) {var dts = returnData.data;successFun( dts );//回调，相当于获取到data后直接在回调⾥⾯处理赋值数据}} else if( status == false ) {var msg = returnData.msg;if( !successErrorFun ) {console.log( msg );} else {successErrorFun( msg );}} else {console.log( "服务端没有按照接⼝约定格式返回数据" );}}reqObj.fail = function( res ) {if( failFun ) {failFun( res );}}plete = function( res ) {if( completeFun ) {completeFun( res );}}wx.request( reqObj );}module.exports = {r: r}核⼼代码就是上⾯这三个⽂件，接下来是demo⽂件做测试：：demo.wxml：：<import src="../../template/cityTemplate.wxml"/><template is="city" data="{{...city}}" />demo.js：：var city = require( '../../common/cityTemplate' );Page( {data: {},onLoad: function( options ) {var _that = this;//创建三级联动数据对象 ---- 这个city对象是固定的，只有请求的url是根据各⾃的服务端地址来更改的_that.setData( {city: {province: {},//格式province:{code: ["11000", "12000"], name: ["北京市", "上海市"]},只能固定是name和code，因为模板需要根据这俩参数显⽰city: {},county: {},provinceIndex: 0,cityIndex: 0,countyIndex: 0,cityUrl: "http://localhost:8282/phpserver/areas.php?type=city&fcode=",//type表⽰获取地区 fcode是⼀级code码，到时具体根据后端请求参数修改 countyUrl: "http://localhost:8282/phpserver/areas.php?type=county&fcode="}})var _url = "http://localhost:8282/phpserver/areas.php";var _data = { 'type': 'province', 'fcode': '0' };city.initCityFun( _that, _url, _data );}})以上完整代码⽂件，最终测试如下：这⾥存在⼀个bug，开启下拉刷新和picker组件的下拉会重叠了，不知道是开发⼯具原因，还是还为修改的bug。

小程序picker 城市用法
小程序picker城市用法指的是在小程序中使用picker控件来选择城市的方法。

通常，开发者可以使用微信官方提供的城市数据接口来获取全国各城市的数据，然后将其整理成适合picker控件使用的数据格式。

具体的实现方式可以参考以下步骤：
1. 获取城市数据：可以通过微信提供的API获取全国各城市的数据，也可以自己手动整理一个城市数据列表。

2. 整理数据格式：将城市数据整理成适合picker控件使用的数据格式，比如将省份作为第一级选项，将其下属城市作为第二级选项。

3. 配置picker控件：在小程序页面中使用picker控件，并配置其选项数组为整理好的城市数据。

4. 处理选中事件：当用户选择了某一个城市后，可以通过picker 的change事件获取选中的城市信息，并进行相应的处理。

总之，使用picker控件来选择城市是小程序开发中常用的功能之一，也是非常实用的，开发者可以根据自己的需求来进行相应的定制和优化。

- 1 -。