知识点：组件、动画，获取当前点击元素的索引和内容

微信小程序中没有选择下拉选项框，所以只是自定义。如果要自定义，可以选择模板或组件来创建。

这次我选择了组件，这样我只需要引入组件和添加数据，不用关心别人，所以我可以在很多地方重用它们。

步骤1:创建组件所需的文件

我喜欢将共享内容放在与pages文件相同的级别，因此我有以下目录结构

(1)首先创建一个自定义名称的文件夹，比如我上面的Componet

(2)再次创建一个选择文件夹，然后：右键单击该文件夹以创建以下组件。然后输入需要创建的名称。为了方便起见，我选择了这里选择的名字。然后会自动创建四个文件，js、json、wxml和wxss。

步骤2:开始配置组件

注意：如果在第一步中创建，您可以直接跳过第二步。

(1)在第一步中创建的组件的文件夹已被自动配置。只需在导入组件的页面的json文件中配置组件的名称和位置。

(2)如果手工创建组件的js、json、wxml、wxss文件，需要在json文件中填写‘component’: true，表示自定义组件声明。Js文件也需要以这种格式编写：

组件({ properties: {//此处定义了innerText属性，属性值可以指定innertext3360 {type:string，value:' default value '，}}，Data: {//这里是组件somedata: { } }的一些内部数据，methods 3360 {//这里是自定义方法custommethod3360function () {}})第三步：自定义组件样式和js。

注意：这里可以先把组件所在的页面放在app.json的pages中，这样就可以在组件的页面上写代码了，比如我上面的目录结构：需要写‘Componet/select/select’，后面是其他页面。这样方便多了。

1.组件的wxml

view class=' com-SelectBox ' view class=' com-Scontent ' bind tap=' SelectToggle ' view class=' com-Stxt ' { NowText } }/view image src='././public/img/local/down . png ' class=' com-sImg ' animation=' { { animation Data } } '/image/view class=' com-sList ' wx : if=' { { selectShow } } ' view wx : for=' { { propArray } } Data-index=' { { index } } ' wx : key=' ' class=' com-sitem ' bind tap=' settext ' { item。文本}}/视图/视图/视图(1)动画=“{ {动画数据} }”这是向下箭头

(2)数据索引=“{ { index } }”这是单击当前元素时的索引

(3) selectToggle是一个模拟隐藏和显示下拉选项框的事件。

(4) setText是在下拉选项框中选择子项后模拟内容设置的事件。

(5)选择显示表示是否显示选项选项

2.组件的wxss。com-SelectBox { width : 200 px；}.com-s content { border : 1px solid # e2e 2；背景：白色；font-size : 16px；相对位置：height: 30px线高： 30px；}.com-SimG { position : absolute；right: 10pxtop: 11px宽度： 16px；height: 9pxtransition: all .3s ease}.com-sTxt{ overflow:隐藏；文本-overflow:省略号；white-space : nowrap；padding:0 20px 0 6pxfont-size : 14px；}.com-sList { background : white；宽度：继承；绝对位置：border: 1px固体# e2e2e2border-top:无；盒子尺寸：边框盒子；z-index : 3；最大高度： 120 px；飞越：汽车；}.com-SiteM { height : 30px；线高： 30px；border-top: 1px实心# e2e2e2padding: 0 6px文本-左对齐：飞越：隐藏；文本-overflow:省略号；white-space : nowrap；font-size : 14px；}.com-site m : first-child { border-top : none；}3.组件的js

//componet/componet . jscomponent({/* * *组件属性列表*/properties : { proparray : { type : array，}}，/* * *组件的初始数据*/data : {选择show : false，//初始选项不显示nowText: '，请选择'，//初始内容animationData:{}//右箭头的动画}。/* * *方法组件列表*/methods : {//选项显示或不显示选择切换3360函数(){ var now show=this . data . select show；//获取选项//create animation var animation=wx . create animation({ timing function : ' ease ' })的当前显示状态对此。动画=动画；if(nowShow){ animation.rotate(0)。step()；this . setdata({ animationData: animation . export()})} else { animation . rotate(180)。step()；this . setdata({ animationData: animation . export()})} this . setdata({ selectshow :NowShow }) }，//设置content settext:函数(e){ var now data=this . properties . proparray；//当前选项的数据是从引入组件的页面传过来的，所以只能通过this . properties varnowidx=e . target . dataset . index在这里获取数据；//当前单击的索引var nowtext=nowdata [nowdx]。文本；//当前点击的内容//再次执行动画，注意this.animation使用动画this.animation.rotate(0)。step()；这个。setdata ({select show : false，nowtext : nowtext，动画数据： this。动画。export()})})))(1)组件的properties属性是外部属性。我明白它可以作为数据资料。它是一个具有三个属性的对象，即类型表示属性类型，值表示属性的初始值，观察者表示属性值改变时的响应函数。类型是必需的，其他是可选的。如果只有类型，可以写成：属性名：类型类型。

(2)组件的数据是组件的内部数据，就像普通页面的数据一样，和属性一起用于组件的模板渲染。

(3)组件方法专门用于事件响应函数和任意自定义方法。获取数据有两种方式：一种是获取数据中的数据：this.data. attribute name一种是获取属性中的属性值：this.properties. property name

(4)创建动画动画，作用于显示状态由真、假切换的内容，不需要过渡、过渡、转场。

第四步：引入组件，传递组件所需的数据

1.在导入之前，您需要在导入组件的页面的json文件中配置它。例如，如果我想在index.wxml中导入它，那么我需要在index.json中配置它：

使用组件' : { ' select ' : '/componet/select/select ' }(1)select是您定义的组件的名称，后跟组件的位置。/单斜线表示根目录，这是一个绝对路径。

(2)如果有下面这种没有找到路径的说法，那你自己填的路径一定是错的，所以要仔细看。

2.配置后，可以引入组件。

select prop-array=' { { selectarray } } '/select(1)prop-array是我的自定义属性名，它对应于组件所在的js中properties中的属性。在属性定义的属性中，属性名称用hump(例如，proparray)编写；在引入组件的wxml中，指定属性值时使用断字(例如：prop-array=' . ').

3.最后，是传入的数据。在引入组件的js数据中，添加：

Selectarray: [{'id' :' 10 '，' text' :' accounting class' }，{'id': '21 '，' text':' engineering class'}]最终结果：

如果引入两个相同的组件，传入的数据是相同的：

选择道具阵列=' { { selectarray } } '/选择选择道具阵列=' { { selectarray } } '/选择摘要

以上是边肖介绍的微信小程序自定义选择下拉选项框组件的实现代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！