微信小程序 自定义 下拉列表 组件_微信小程序下拉列表组件

在小程序中 没有使用 html 标签中的 select 下拉框

但项目要实现这个功能 只能自己动手敲

在文件 的根目录下 新建 components 文件夹

建立一个select 的文件夹 右键 点击新建Component 然后会自动生成这四个文件

然后开始写 组件内容

// select.wxml  文件下
<!--componet/select/select.wxml-->
<view class='com-selectBox'>
    <view class='com-sContent' bindtap='selectToggle'>
        <view class='com-sTxt'>{{nowText}}</view> // 要显示的内容
        <image src='/imgs/icon-left-jt.png'  class='com-sImg'  animation="{{animationData}}"></image>  // 
    </view>
    <view class='com-sList' wx:if="{{selectShow}}">  // 显示的列表内容
        <view wx:for="{{propArray}}" data-index="{{index}}" wx:key='index' class='com-sItem' bindtap='setText'>{{item.text}}</view>
    </view>
</view>
1
2
3
4
5
6
7
8
9
10
11

 // select.js 文件下
 //  第一步 在组件的属性列表  
   properties: {
    propArray:{  //声明传递的类型
        type:Array,
    }
  },
  // 第二步 组件的初始数据
   data: {
    selectShow:false,//初始option不显示
    nowText:"请选择",//初始内容
    animationData:{}//右边箭头的动画
  },
  // 第三步
    /**
   * 组件的方法列表
   */
  methods: {
    //option的显示与否
    selectToggle:function(){
      var nowShow=this.data.selectShow;//获取当前option显示的状态
      //创建动画
      var animation = 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
      })
  },
  // 第四步
  //设置内容
    setText:function(e){
      var nowData = this.properties.propArray;//当前option的数据是引入组件的页面传过来的，所以这里获取数据只有通过this.properties
      var nowIdx = e.target.dataset.index;//当前点击的索引
      var nowText = nowData[nowIdx].text;//当前点击的内容
      //执行动画
      this.animation.rotate(0).step();
      this.setData({
          selectShow: false,
          nowText:nowText,
          animationData: this.animation.export()
      })
      var nowDate={
        id:nowIdx,
        text:nowText
    }
    this.triggerEvent('myget', nowDate)
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

// select.json 文件下
{
  "component": true,  //确认开启
  "usingComponents": {}
}
1
2
3
4
5

/* select.wxss  文件下 */
/*  componet/select/select.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

在父级中使用

例如想在pages 下面的index文件中去使用这个组件 需要先在 index.json 下面去添加组件

 {
  "usingComponents": {
    "Select" : "/components/select/select"
  }
}
1
2
3
4
5

  <Select prop-array='{{selectArray}}' bind:myget='getDate'></Select>
1

这里我先自己模拟了数据

  data: {
    selectArray: [
      {id: '1', text: '会计类'},
      {id: '2', text: '工程类'},
      {id: '3', text: '会计类'},
      {id: '4', text: '工程类'},
      {id: '5', text: '会计类'},
      {id: '6', text: '工程类'},
      {id: '7', text: '会计类'},
      {id: '8', text: '工程类'},
      {id: '9', text: '会计类'},
      {id: '10', text: '工程类'}
    ]
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

然后 大功告成 了

这里 css 做了限制固定的宽度 所以 显示4个

页面上点击如何获取 选中的信息 因为之前给子组件自定义事件 了

所以 在父组件使用 需要传递一个值

打印出来