WeChat 애플릿의 사용자 정의 선택 드롭다운 옵션 상자 구성 요소

지식 포인트: Components, animation, 현재 클릭한 요소의 색인 및 콘텐츠 가져오기

WeChat 애플릿에는 선택 드롭다운 옵션 상자가 없으므로 사용자 정의만 가능합니다. 사용자 정의하려면 템플릿을 선택하거나 구성 요소를 선택하여 만들 수 있습니다.

이번에는 컴포넌트 소개와 데이터만 추가하면 되고, 다른 부분은 걱정하지 않고 여러 곳에 재사용할 수 있도록 컴포넌트를 선택했습니다.

1단계: 구성 요소에 필요한 파일 만들기

모든 공유 콘텐츠를 페이지 파일과 동일한 수준에 두는 것을 좋아하므로 다음과 같은 디렉터리 구조를 갖습니다.

1. 먼저 만들기 위의 내 구성 요소

2. 와 같은 사용자 정의 이름을 가진 폴더를 만든 다음 선택 폴더를 만든 다음 폴더를 마우스 오른쪽 버튼으로 클릭하고 아래 구성 요소를 만듭니다. 그런 다음 생성해야 할 이름을 입력합니다. 여기서는 편의상 select라는 이름을 사용했습니다. 그러면 js, json, wxml, wxss라는 4개의 파일이 자동으로 생성됩니다.

2단계: 구성 요소 구성 시작

참고: 첫 번째 단계를 통해 생성한 경우 두 번째 단계를 직접 건너뛸 수 있습니다.

1. 첫 번째 단계에서 생성된 컴포넌트 폴더가 자동으로 구성되었습니다. 다만

   컴포넌트 소개 시 컴포넌트가 소개되는 페이지의 json 파일에 컴포넌트의 이름과 위치를 구성해 주세요.

2. 구성 요소의 js, json, wxml 및 wxss 파일을 수동으로 생성하는 경우 json 파일을

   "comComponent"로 채워야 합니다. true는 사용자 정의 구성 요소를 의미합니다. 선언. js 파일도 다음 형식으로 작성해야 합니다.

Component({
  properties: {    // 这里定义了innerText属性，属性值可以在组件使用时指定    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {    // 这里是一些组件内部数据    someData: {}
  },
  methods: {    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

3단계: 구성 요소 스타일과 js를 사용자 정의합니다.

참고: 여기서 구성 요소가 있는 페이지를 app.json의 pages에 먼저 넣을 수 있습니다. 그러면 구성 요소 페이지에 my와 같은 코드를 작성할 수 있습니다. 디렉토리 위 구조: "Componet/select/select"로 작성해야 하며, 뒤에 다른 페이지가 와야 합니다. 이것이 훨씬 더 편리합니다.

1.Component wxml

<view class=&#39;com-selectBox&#39;>
    <view class=&#39;com-sContent&#39; bindtap=&#39;selectToggle&#39;>
        <view class=&#39;com-sTxt&#39;>{{nowText}}</view>
        <image src=&#39;../../public/img/local/down.png&#39;  class=&#39;com-sImg&#39;  animation="{{animationData}}"></image>
    </view>
    <view class=&#39;com-sList&#39; wx:if="{{selectShow}}">
        <view wx:for="{{propArray}}" data-index="{{index}}" wx:key=&#39;&#39; class=&#39;com-sItem&#39; bindtap=&#39;setText&#39;>{{item.text}}</view>
    </view></view>

1. (1)

   animation="{{animationData}}"아래쪽 화살표

2. (2 )

   data-index="{{index}}" 현재 요소를 클릭했을 때의 인덱스입니다

3. (3) selectToggle은 드롭 숨김 표시를 흉내내는 이벤트입니다. -다운 옵션 상자.

4. (4) setText는 하위 항목을 선택한 후 내용을 설정하는 드롭다운 옵션 상자를 모방하는 이벤트입니다.

5. (5) selectShow는 옵션 옵션 표시 여부를 나타냅니다.

2. 컴포넌트의 wxss

.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.3 컴포넌트의 js. (1) 구성요소 properties

속성은 데이터로 사용할 수 있는 것으로 이해됩니다. 즉,

type
1. 은 속성 유형을 나타내고

   value 는 속성의 초기 값을 나타내고, observer는 속성 값이 변경될 때의 응답 함수를 나타냅니다. type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数。type 是必填的，其它的可选。如果只有 type，可以写成：属性名：type类型。

2. （2） 组件的 data 和普通页面的data一样，是组件的内部数据，和 propertiestype은 필수이고 그 외는 선택사항입니다.

   type🎜만 있는 경우 🎜속성 이름: type type🎜과 같이 쓸 수 있습니다. 🎜🎜🎜🎜 (2) 컴포넌트의 데이터는 일반 페이지의 데이터와 동일하며, 🎜속성과 함께 컴포넌트의 템플릿 렌더링에 사용됩니다. >🎜. 🎜

3. （3） 组件的 method 是专门用于 事件响应函数 和 任意的自定义方法。在这里面获取数据有两种方法：一种是获取data里的数据： this.data.属性名；一种是获取 properties 中的属性值： this.properties.属性名

4. （4） 创建animation动画，作用在通过 true 和 false 切换显示状态的内容上没有过渡、没有过渡、没有过渡。

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

1. 引入前，需要在引入组件的页面的json文件中配置，比如我要在 index.wxml 中引入，那么在 index.json 中我就需要配置：

"usingComponents": {    "Select": "/Componet/select/select"}

1. （1） Select 是你定义的组件的名称，后面的是组件所在的位置。 /  单斜杠表示根目录，是绝对路径。

2. （2） 如果出现下面这种说没找到路径的，一定是自己填写的路径不对，认真查找。

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

<Select prop-array=&#39;{{selectArray}}&#39;></Select>

（1） prop-array 是我自定义的属性名，这个是和组件所在的 js 中properties中的属性是对应的。在 properties 定义的属性中，属性名采用驼峰写法（例如：propArray）；在引入组件的 wxml 中，指定属性值时则对应使用连字符写法（例如：prop-array="..."）。

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

selectArray: [{    "id": "10",    "text": "会计类"}, {    "id": "21",    "text": "工程类"}]

 最终结果：

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

<Select prop-array=&#39;{{selectArray}}&#39;></Select><Select prop-array=&#39;{{selectArray}}&#39;></Select>

 这样的方式组件并不会相互影响，都是独立的。   

对了，组件样式的规则可以查看官方的规则

第五步：获取点击的内容，即组件间的通信

效果有了，最关键的是获取选中的内容。这个怎么实现呢，这时候需要组建间通信与事件了。

1. 对组件的事件进行监听：

<Select prop-array=&#39;{{selectArray}}&#39; bind:myget=&#39;getDate&#39;></Select>

（1） 这里myget是自定义的子组件需要触发的事件名，getDate是引入组件的页面需要获取传过来的数据的自定义的事件名。

2. 子组件触发事件

因为这里的select组件是点击下拉列表的内容才进行内容的更新，所以这里只需要在下拉列表里添加一个点击事件，而原来已经设置了setText事件。所以只需要在setText函数里面写触发事件就行了。

在setText函数的内容里加上：

var nowDate={
    id:nowIdx,
    text:nowText
}this.triggerEvent('myget', nowDate)

1. （1） 这里的 myget 和 bind:myget ，名称一定要对应。

2. （2） nowDate是需要传回的数据，不一定要弄成对象，想传什么传什么，我这里只是演示而已。我试了一下也可以传函数。。。

3. 引入组件的页面的js

添加引入组件时，自定义的函数：

getDate:function(e){
    console.log(e.detail)
}

e的内容为：

传过来的值就在detail里面。

到此，一个完整的select组件就完成了。

更新：

如果要select组件默认显示传入的第一个数据，做法是：

1. （1） 在select组件的wxml页面，在class为com-sTxt的view标签中，原来的 {{ nowText }} 改为 {{ nowText==' ' ? propArray[0].text : nowText }}。

2. （2） 然后在 select 组件 js文件 中原来nowText的值修改为 ‘ ’ 空。

3. （3） 这样的话就表示如果最初nowText为空，就显示传入数据的第一个值，否则就是选中的值

推荐教程：《微信小程序》

위 내용은 WeChat 애플릿의 사용자 정의 선택 드롭다운 옵션 상자 구성 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!