微信小程序自定义picker组件

封装hf-picker选择器。因为自带的picker在iOS 、安卓上显示的样式不一致，产品测试提出个能不能样式弄成一致。想系统提供了picker-view这个，应该是没问题的。 

一番 *** 作以后，发现在层级不复杂的页面效果很不错，但是在一些view嵌套view嵌套的很深，比如里面已经有非statics的父view时，那么这个选择器的d窗显示的位置就不对了。同事说这个通过view肯定是实现不了，毕竟父view范围就那么大，除非把选择器view放到page里面去 ,是可以实现，但是违背了封装组件的原则。同事说试试half-screen-dialog，结果发现提供的Slot效果达不到UI要求

如今有方法对half-screen-dialog的内部元素样式进行设置了，赶紧搞起。 最终结果还是挺好的。因为是dialgod出，所以不用考虑父view的范围问题了。 

用于父组件向子组件指定属性设置数据，无法将方法传递给子组件

实例：

父组件：

js中声明一个变量count

wxml

渲染父组件count

在父组件引用子组件,并进行属性绑定，把父组件count值传给子组件

子组件

在子组件的js中接收

子组件wxml中进行渲染

结果：

用于子组件向父组件传递数据，可以传递任意数据

子组件

触发加1按钮之后传递给父组件

父组件：

js

创建事件

wxml

绑定自定义事件

父组件通过thisselectComponent()获取子组件实例对象，可以访问子组件任意数据和方法

父组件进行调用时需要传入一个id或者class选择器

父组件

wxml

js

拿到子组件实例对象，直接为子组件进行赋值

修改父组件count值

1、创建小程序项目

2、在小程序根输入npm init,进行初始化，然后一路可以默认（enter）之后可看到packagejson

3、开始安装Weui组件库 npm install --save weui-miniprogram --production

4、工具>构建npm

5、点击小程序开发工具右上角详情-本地设置，勾选上使用npm模块

[上传中(image-b7a8e2-1624982995933-0)]

6、在小程序appwxss中引入样式文件

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weuiwxss';

7、index页面使用

//indexjson { "usingComponents": { "mp-dialog": "weui-miniprogram/dialog/dialog" } }

//indexwxss <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}"> <view>test content</view> </mp-dialog>

以上就是关于微信小程序自定义picker组件全部的内容，包括:微信小程序自定义picker组件、微信小程序父子组件通信、小程序使用npm引入Weui组件库等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！