Customization of WeChat applet select drop-down Option box component

Knowledge Point : component ,animation, gets the index and content of the currently clicked Element

There is no select drop-down option box in the applet, so only custom. Custom, you can choose the way the template is, or you can choose how to create the component .

This time I chose components so that I could simply introduce components and add data, and the rest would be reusable in multiple places without a tube.

First step: Create the required files for the component

I like to put the common content in the same place as the pages file, so I have the following directory structure

(1) First create a folder of custom names, such as componet above me

(2) Create a Select folder and then: Right-click this folder and create the component below. Then enter the name you want to create, and I'll take the name of select here for convenience. Then it will automatically create 4 files , JS, JSON, Wxml, WXSS.

Step Two: Start configuring components

Note: If you created it through the first step, you can skip the second step directly.

(1) In the folder of the component created by the first step, it has been automatically configured. Simply configure the name of the component and the location of the component in the JSON file of the page that introduces the component when the component is introduced .

(2) If you manually create the component JS, JSON, Wxml, WXSS This file, then you need to fill in the JSON file "component": true represents a custom component declaration. JS file also needs to be written in this format:

Component ({properties  : {    // ) This defines the InnerText property, which can be specified when the component is used     innerText : {      type:string,      ' default value ',    }  },  data: {    //  Here are some components of internal data     somedata: {}  },  methods:    {//  Here is a custom method    function() {}   }})

Step three: Customize the component style and JS.

Note: Here you can put the page of the component in App.json pages First, so that you can write code on the component's page, such as the directory structure above me: it needs to be written as "componet/ Select/select ", followed by other pages. It's much more convenient.

1. Wxml of components

<Viewclass= ' Com-selectbox '>    <Viewclass= ' com-scontent 'Bindtap= ' Selecttoggle '>        <Viewclass= ' Com-stxt '>{{Nowtext}}</View>        <Imagesrc='.. /.. /public/img/local/down.png 'class= ' com-simg 'Animation= "{{animationdata}}"></Image>    </View>    <Viewclass= ' com-slist 'wx:if= "{{selectshow}}">        <Viewwx:for= "{{Proparray}}"Data-index= "{{index}}"Wx:key='' class= ' Com-sitem 'Bindtap= ' SetText '>{{Item.text}}</View>    </View></View>

(1) animation= "{{animationdata}}" This is an animated effect of the down arrow

(2) data-index= "{{index}}" This is the index when the current element is clicked

(3) Selecttoggle is the event that mimics the drop-down options box that is hidden and displayed.

(4) SetText is an event that mimics the contents of a drop-down option box after selecting a subkey.

(5) Selectshow is the option to indicate whether or not

2. WXSS of components

. Com-selectbox{width:200px;}. Com-scontent{Border:1px solid #e2e2e2;background: White;font-size:16px;position:relative;Height:30px;Line-height:30px;}. Com-simg{position:Absolute; Right:10px;Top:11px;width:16px;Height:9px;transition:All . 3s ease;}. Com-stxt{Overflow:Hidden;Text-overflow:ellipsis;White-space:nowrap;padding:0 20px 0 6px;font-size:14px;}. Com-slist{background: White;width:Inherit;position:Absolute;Border:1px solid #e2e2e2;Border-top:None;box-sizing:Border-box;Z-index:3;Max-height:120px;Overflow:Auto;}. Com-sitem{Height:30px;Line-height:30px;Border-top:1px solid #e2e2e2;padding:0 6px;text-align: Left;Overflow:Hidden;Text-overflow:ellipsis;White-space:nowrap;font-size:14px;}. Com-sitem:first-child{Border-top:None;}

3. js of the component

//Componet/componet.jsComponent ({/** * component's attribute list*/properties: {proparray:{Type:array,}},/** * Initial data for the component*/data: {selectshow:false,//initial option does not displayNowtext: "Please select",//Initial contentanimationdata:{}//animation of the right arrow    },  /** * Method List of Components*/methods: {//option is displayed or notSelecttoggle:function(){            varnowshow= This. data.selectshow;//gets the status of the current option display            //Creating animations            varAnimation =wx.createanimation ({timingfunction:"Ease"            })             This. animation=animation; 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}) },        //Set ContentSetText:function(e) {varNowdata = This. Properties.proparray;//The current option data is passed to the page that introduces the component, so the data here is only passed This.properties            varNowidx = E.target.dataset.index;//Index of the current click            varNowtext = Nowdata[nowidx].text;//what's currently clicked            //perform the animation again, note that here must, certainly, must be this.animation to use the animation             This. animation.rotate (0). Step ();  This. SetData ({selectshow:false, Nowtext:nowtext, Animationdata: This. Animation.export ()}) }    }})

(1) The Properties property of a component is an external attribute, and I understand that it can be used as data, which is an object with three attributes, type value representing the type of the property, Represents the initial value of observer the property, and the response function that represents when the property value is changed. The type is required, and the other is optional. If there is only type, it can be written as: property name: Type .

(2) The data of the component is the same as that of the normal page, and it properties is the inside of the component, and the template rendering for the component together.

(3) The method of the component is dedicated to event response functions and arbitrary custom methods. There are two ways to get data in this case: one is to get data from: this.data. Attribute name ; one is to get the property value in properties: this.properties. Property name

(4) Create a animation animation that functions with no transitions, no transitions, no transitions on the content through true and false toggle display State .

Fourth step: Introduce the component and pass in the data required by the component

1. before introduction, it needs to be configured in the JSON file of the page that introduced the component , for example I want to introduce in Index.wxml, then in Index.json I need to configure:

"Usingcomponents": {    "select": "/componet/select/select"}

(1) Select is the name of the component you define, followed by where the component resides . /Single Slash indicates the root directory, which is the absolute path.

(2) If the following is said to have not found the path, it must be the wrong way to fill out the path, look carefully.

2. once configured, you can introduce components.

<prop-array= ' {Selectarray}} '></Select >

(1) Prop-array is my custom property name, which is corresponding to the properties in the JS where the component is located. In the properties defined attribute, the property name is camel-written (for example: Proparray), and in the introduction of the component wxml , a hyphen is used when specifying the property value (for example: Prop-array ="..." ).

3. Finally, the data is passed in. In the data of JS that introduces the component, add:

Selectarray: [{    "id": "Ten",    "text": "Accounting Class"}, {    "id": "+",    " Text ":" Engineering Class "}]

Final Result:

If you introduce two identical components, the incoming data is the same:

<prop-array= ' {{Selectarray}} '></Select> <  prop-array= ' {selectarray} '></Select>

Such a way components do not affect each other, are independent.

Yes, the rules for component styles can be viewed in the official Rules