微信小程序开发极速实战：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、源代码点击此处。