技术特征:
1.一种微信小程序自定义下拉选择控件的生成方法,其特征在于,所述方法包括如下步骤:获取预设的自定义下拉选择组件,所述自定义下拉选择组件包括json文件、js文件、wxml文件和wxss文件,其中,所述json文件中编写有所述微信小程序内置的配置项,所述js文件中编写有页面或组件渲染时需要数据或者绑定交互事件的事件处理方法,所述wxml文件编写有页面或者组件的结构,所述wxss文件编写有页面或组件的样式;将所述自定义下拉选择组件导入所述微信小程序的components目录,并在pages目录下的index页面中声明所述自定义下拉选择组件各文件的路径;获取在所述index页面中的index.js文件当中声明的选项的数据,以及与所述下拉选择控件的选中值进行双向绑定的变量;在所述index页面中的index.wxml文件中调用所述自定义下拉选择组件,并把在所述index.js文件中声明的选项的数据和所述双向绑定的变量传给所述自定义下拉选择组件。2.根据权利要求1所述的一种微信小程序自定义下拉选择控件的生成方法,其特征在于,在pages目录下的index页面中声明所述自定义下拉选择组件各文件的路径,具体包括如下步骤:在所述index页面中的index.js文件中声明选项的数据,所述声明过程发生在data属性中。3.根据权利要求1所述的一种微信小程序自定义下拉选择控件的生成方法,其特征在于,还包括如下步骤:通过所述微信小程序自定义组件的数据监听机制observers,指定需要监听的对外暴露的变量和变量发生变化后的处理函数。4.根据权利要求1所述的一种微信小程序自定义下拉选择控件的生成方法,所述自定义下拉选择组件包括下拉框结构,对于生成所述下拉框结构,其特征在于,还包括如下步骤:通过css属性当中的transition属性,在所述下拉框外包div层;将所述div层的高度属性height和透明度属性opacity设置为过渡属性。5.根据权利要求4所述的一种微信小程序自定义下拉选择控件的生成方法,其特征在于:所述所述自定义下拉选择组件的结构包括:下拉框,用于展示选项列表,并且响应用户的点击设置当前的选中项;选择框,用于显示当前选项,并响应用户的点击展示或者隐藏所述下拉框;透明全屏模态框,用于当用户点击了非选择框或者非下拉框的区域时,隐藏所述下拉框。6.根据权利要求5所述的一种微信小程序自定义下拉选择控件的生成方法,其特征在于:所述透明全屏模态框还用于在获取到下拉组件外的区域的点击操作时,触发所述全屏模态框的点击操作事件并将下拉框隐藏。7.一种微信小程序自定义下拉选择控件的生成装置,其特征在于,所述装置包括:组件获取装置,用于获取预设的自定义下拉选择组件,所述自定义下拉选择组件包括
json文件、js文件、wxml文件和wxss文件,其中,所述json文件中编写有所述微信小程序内置的配置项,所述js文件中编写有页面或组件渲染时需要数据或者绑定交互事件的事件处理方法,所述wxml文件编写有页面或者组件的结构,所述wxss文件编写有页面或组件的样式;导入声明装置,用于将所述自定义下拉选择组件导入所述微信小程序的components目录,并在pages目录下的index页面中声明所述自定义下拉选择组件各文件的路径;选项及变量获取装置,用于获取在所述index页面中的index.js文件当中声明的选项的数据,以及与所述下拉选择控件的选中值进行双向绑定的变量;组件调用装置,用于在所述index页面中的index.wxml文件中调用所述自定义下拉选择组件,并把在所述index.js文件中声明的选项的数据和所述双向绑定的变量传给所述自定义下拉选择组件。8.根据权利要求7所述的一种微信小程序自定义下拉选择控件的生成装置,其特征在于:所述导入声明装置还包括声明选项数据单元;所述声明选项数据单元用于在所述index页面中的index.js文件中声明选项的数据,所述声明过程发生在data属性中。9.一种电子设备,其特征在于,包括:至少一个存储器以及至少一个处理器;所述存储器,用于存储一个或多个程序;当所述一个或多个程序被所述至少一个处理器执行,使得所述至少一个处理器实现如权利要求1至6任一项所述的微信小程序自定义下拉选择控件的生成方法的步骤。10.一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1至6任一项所述的微信小程序自定义下拉选择控件的生成方法的步骤。
技术总结
本申请实施例涉及一种微信小程序自定义下拉选择控件的生成方法及装置、电子设备。获取预设的自定义下拉选择组件,自定义下拉选择组件包括json文件、js文件、wxml文件和wxss文件;将自定义下拉选择组件导入微信小程序的components目录,并在pages目录下的index页面中声明自定义下拉选择组件各文件的路径;获取在index页面中的index.js文件当中声明的选项的数据,以及与下拉选择控件的选中值进行双向绑定的变量;在index页面中的index.wxml文件中调用自定义下拉选择组件,并把在index.js文件中声明的选项的数据和双向绑定的变量传给自定义下拉选择组件。本发明用于在选择项少的情况下直观地展示选项,用户可以通过直接点击选择下拉框中展示的选项获取选项对应的数据信息,提高了交互效率。提高了交互效率。提高了交互效率。
技术研发人员:潘健 林沛欣 黄应棣 李海荣
受保护的技术使用者:广州市玄武无线科技股份有限公司
技术研发日:2021.10.29
技术公布日:2022/2/24