微信小程序自定义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 相关文章推荐
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
vuejs指令详解
Feb 07 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
ES6中定义类和对象的方法示例
Jul 31 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学习 变量使用总结
2011/03/24 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python 使用type来定义类的实现
2019/11/19 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
企业为何需要商业计划书
2013/12/26 职场文书
党员一句话承诺大全
2014/03/28 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
补充协议书范本
2014/04/23 职场文书
社会实践活动总结范文
2014/07/03 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
如何写通讯稿
2015/07/22 职场文书
工作简历的自我评价
2019/05/16 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫