微信小程序自定义select下拉选项框组件的实现代码


Posted in Javascript onAugust 28, 2018

知识点:组件,animation,获取当前点击元素的索引与内容

微信小程序中没有select下拉选项框,所以只有自定义。自定义的话,可以选择模板的方式,也可以选择组件的方式来创建。

这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了。

第一步:创建组件所需的文件

我喜欢把共用的内容都放在和pages文件同级的地方,所以有了下面的目录结构

微信小程序自定义select下拉选项框组件的实现代码

(1) 先创建一个自定义名字的文件夹,例如我上面的Componet

(2) 再创建一个select文件夹,然后:右键这个文件夹,新建下面的这个Component。然后输入需要创建的名称,我这里为了方便就取了select的名字。然后就会自动创建4个文件,js、json、wxml、wxss。

微信小程序自定义select下拉选项框组件的实现代码

第二步:开始配置组件

注意:如果通过第一步创建的可直接跳过第二步。

(1) 通过第一步创建的组件的文件夹中,已经自动配置好了。只需在引入组件的时候,在引入组件的页面的json文件中配置组件的名称和组件的位置。

(2) 如果自己手动创建组件的js、json、wxml、wxss这个文件,那么需要在json文件中填入 "component": true 表示自定义组件声明。js文件中也需要写成这种格式:

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

第三步:自定义组件样式及js。

注意:这里可以在 app.json 的 pages 中把组件所在的页面放到第一位,这样就能在组件的页面编写代码了,比如我上面的目录结构:就需要写成 "Componet/select/select", 后面再是其它的页面。这样方便得多。

1. 组件的wxml

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

(1)  animation="{{animationData}}" 这个是下箭头的动画效果

(2)  data-index="{{index}}" 这个是当前元素被点击时的索引

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

(4) setText是模仿下拉选项框选择子项之后,设置内容的事件。

(5) selectShow是表示option选项显示与否

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. 组件的 js

// Componet/Componet.js
Component({
 /**
  * 组件的属性列表
  */
  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来使用动画
      this.animation.rotate(0).step();
      this.setData({
        selectShow: false,
        nowText:nowText,
        animationData: this.animation.export()
      })
    }
  }
})

(1) 组件的 properties 属性是对外属性,我理解的是可以当做 data 数据来使用,它是一个含有三个属性的对象,分别是 type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数。type 是必填的,其它的可选。如果只有 type,可以写成:属性名:type类型。

(2) 组件的 data 和普通页面的data一样,是组件的内部数据,和 properties 一同用于组件的模版渲染。

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

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

第四步:引入组件,传入组件所需数据

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

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

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

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

微信小程序自定义select下拉选项框组件的实现代码

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

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

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

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

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

 最终结果:

微信小程序自定义select下拉选项框组件的实现代码

 如果引入两个相同的组件,传入的数据也相同:

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

总结

以上所述是小编给大家介绍的微信小程序自定义select下拉选项框组件的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
input的focus方法使用
Mar 13 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
动态加载js、css的实例代码
May 26 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 #Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 #Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 #Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 #jQuery
对Vue table 动态表格td可编辑的方法详解
Aug 28 #Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 #Javascript
layui实现文件或图片上传记录
Aug 28 #Javascript
You might like
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
如何基于Python实现自动扫雷
2020/01/06 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
python如何写try语句
2020/07/14 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
高中生评语大全
2014/04/25 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
求职简历自我评价2015
2015/03/10 职场文书
限期整改通知书
2015/04/22 职场文书
学习党史心得体会2016
2016/01/23 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP