微信小程序自定义组件之Picker组件

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

需求：通过JS条件判断，满足条件就弹出Picker给用户选择一个数组里面的数据。

有些朋友可能会有疑问：

1.为什么要使用自定义的Picker组件，不是有原生的组件吗？

回答：因为小程序的Picker组件是需要用户手动触发的。并不满足上述需求。

2.这个需求我知道在小程序文档里面有一个API可以满足这个需求。wx.showActionSheet(Object object)//显示操作菜单

回答：wx.showActionSheet()有长度的限制，最多只能6个选项。

那么为了满足这些条件，我们需要自己写了，我把这个选择器封装成了一个组件，可以方便的调用

1.效果图1：

效果图2：

点击确定以后：

2.自定义组件源码1：

// my-picker.js
Component({/*** 组件的属性列表*/properties: {//配置页面传过来的值,key值要一一对应'list': {type: Array, //必填，目前接受的类型包括：String,Number,Boolean, Object, Array, null（表示任意类型）value: [] //可选，默认值，如果页面没传值过来就会使用默认值 },'showDialog': {type: Boolean, //必填，目前接受的类型包括：String,Number,Boolean, Object, Array, null（表示任意类型）value: false //可选，默认值，如果页面没传值过来就会使用默认值 }},data: {},/*** 组件的方法列表*/methods: {radioChange: function (e) {let radioChange_value = e.currentTarget.dataset.data;let picker_id = e.currentTarget.dataset.idthis.setData({radioChange_value, picker_id})// console.log('value值为：', radioChange_value, 'picker_id值为：', picker_id)},toggleDialog() {this.setData({showDialog: !this.data.showDialog});},freeBack: function () {var that = thisthat.setData({showDialog: !this.data.showDialog})console.log('his.data.radioChange_value', this.data.radioChange_value)this.triggerEvent('myPickerChange', this.data.radioChange_value);},freetoBack: function () {var that = thisthat.setData({showDialog: !this.data.showDialog,value: 'show',})},pickerCancel() {// 滚动选择器 - 取消this.pickerHandler()this.triggerEvent('cancel', arr, {})}}
})

wxml

<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%;"><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'><label class="free-radio" wx:for="{{list}}" wx:key="" catchtap="radioChange" data-data='{{item}}' data-id="{{index}}" style="{{index==picker_id?'background:#48c23d;color:#fff;':'background:#fff;color:#000;'}}"><label class="free-text">{{item}}</label></label></radio-group></view></view>
</view>

wxss

.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:100rpx;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:48%;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;
}

json

{"component": true,"usingComponents": {}
}

这里面包含了页面给自定义组件传递数据，自定义组件给页面传递数据，自定义组件的事件。

3.引用组件：

<myPicker  wx:if='{{configType==1&&address_list!=[]}}' bindmyPickerChange="myPickerChange"showDialog='{{myPicker_show}}' list='{{address_list}}'>
</myPicker>

Page({data: {myPicker_show:false,address_list:['1','2','3','4','5','6','7'],  },// 自定义组件选择的结果myPickerChange(e) {console.log('自定义组件选择的结果',e.detail)this.setData({address: e.detail})}
})

json

{"navigationBarTitleText": "资料填写","usingComponents": {"myPicker": "../../../components/myPicke/myPicke"
}
}

4.自定义组件源码2

// my-picker.js
Component({/*** 组件的属性列表*/properties: {//配置页面传过来的值,key值要一一对应'list': {type: Array, //必填，目前接受的类型包括：String,Number,Boolean, Object, Array, null（表示任意类型）value: [] //可选，默认值，如果页面没传值过来就会使用默认值 },'showDialog': {type: Boolean, //必填，目前接受的类型包括：String,Number,Boolean, Object, Array, null（表示任意类型）value: false //可选，默认值，如果页面没传值过来就会使用默认值 }},data: {},/*** 组件的方法列表*/methods: {radioChange: function (e) {let radioChange_value = e.currentTarget.dataset.data;let picker_id = e.currentTarget.dataset.idthis.setData({radioChange_value, picker_id})// console.log('value值为：', radioChange_value, 'picker_id值为：', picker_id)},myPickerHide() {this.triggerEvent('myPickerHide', '');},freeBack: function () {var that = thisthis.triggerEvent('myPickerHide', '');console.log('his.data.radioChange_value', this.data.radioChange_value)this.triggerEvent('myPickerChange', this.data.radioChange_value);},}
})

wxml

<view class="free-dialog {{ showDialog ? 'free-dialog--show' : '' }}"><view class="free-dialog__mask" bindtap="myPickerHide" /><view class="free-dialog__container"><view class='title_line' style=""><view bindtap='myPickerHide' class="free-button free-dialog-reset">取消</view><view bindtap='freeBack' class="free-button free-dialog-submit">确定</view></view><scroll-view class='free-radios' scroll-y='true'><view class="free-radio" wx:for="{{list}}" wx:key="" catchtap="radioChange" data-data='{{item}}' data-id="{{index}}" style="{{index==picker_id?'color:#48c23d;':'color:#999;'}}"><view class="free-text">{{item}}</view></view></scroll-view></view>
</view>

wxml

.free-dialog__mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9998;background: rgba(0, 0, 0, 0.7);display: none;
}
.title_line{padding-top: 20rpx;border-bottom: 1px solid #f2f2f2;margin-bottom: 30rpx;
}
.free-dialog__container {position: fixed;left: 0;bottom: 0;width: 750rpx;background: white;transform: translateY(150%);transition: all 0.4s ease;z-index: 9999;
}
.free-dialog--show .free-dialog__container {transform: translateY(0);
}
.free-dialog--show .free-dialog__mask {display: block;
}
/*模态框中的内容*/
.free-button{display: inline-block;width:100rpx;text-align: center;font-size:36rpx;color:#707070;margin-bottom:10px;
}
.free-radios{height: 385rpx;padding-bottom: 40rpx;
}
.free-radio{padding: 10rpx;text-align: center;
}
.free-dialog-submit{float: right;color:#48c23d;
}
radio-group{margin:10rpx 0rpx;
}
radio-group>label{width:100%;display: inline-block;/* border:1px solid #ddd; */padding:10px 0px;margin:0px 2px 2px;
}.checked{background:#48c23d;color:#fff;
}
radio-group label .free-text{width:100%;margin: 20rpx;text-align: center;font-size:28rpx;border-top: 1px solid #f2f2f2;border-bottom: 1px solid #f2f2f2;display: inline-block;
}

json

{"component": true,"usingComponents": {}
}

微信小程序自定义组件之Picker组件相关推荐

微信小程序自定义弹出框组件，模拟wx.showModal
微信小程序开发交流qq群 173683895 效果图: 代码 wxml <view wx:if='{{showModal}}'><view class='mask_layer' ...
微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...
微信小程序多项选择器_微信小程序——多列选择器picker组件
一.效果图二.picker属性一个简单地多列选择器只要给picker组件加属性mode="multiSelector"即可,绑定数据时使用range来绑定一个数组作为显示内容, ...
微信小程序自定义状态栏navigationBar样式组件，适配所有机型
一.在app.json设置navigationStyle自定义 "window": {"navigationStyle": "custom" ...
微信小程序自定义图片上传组件
实现功能: 点击上传按钮可上传图片,并且可定义最多可上传的图片数量.限制图片的大小.类型和来源. 点击图片可预览图片. 点击删除按钮可删除图片. <!-- image-upload.wxml - ...
微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...

微信小程序自定义组件之Picker组件

承接微信小程序开发。扫码加微信。

目录：

1.效果图1：

效果图2：

2.自定义组件源码1：

3.引用组件：

4.自定义组件源码2

微信小程序自定义组件之Picker组件相关推荐

最新文章

热门文章