微信小程序 select 下拉框组件功能


Posted in Javascript onSeptember 09, 2019

一、源码地址

https://github.com/imxiaoer/WeChatMiniSelect

二、效果图

微信小程序 select 下拉框组件功能

录屏图片质量较差,所以大家会看到残影(捂脸)

三、组件源码

1. select.wxml

<view class="select-box">
 <view class="select-current" catchtap="openClose">
  <text class="current-name">{{current.name}}</text>
 </view>
 <view class="option-list" wx:if="{{isShow}}" catchtap="optionTap">
  <text class="option"
   data-id="{{defaultOption.id}}"
   data-name="{{defaultOption.name}}">{{defaultOption.name}}
  </text>
  <text class="option"
   wx:for="{{result}}"
   wx:key="{{item.id}}"
   data-id="{{item.id}}"
   data-name="{{item.name}}">{{item.name}}
  </text>
 </view>
</view>

说明:用 catchtap 而不用 bindtap 是为了阻止事件冒泡,为了实现点击页面其他地方关闭 select, 所以在父页面(index.wxml)最外层绑定了 bindtap="close" 方法, 不阻止冒泡的话会执行父组件的 close 方法

 2. select.js

 

Component({
 properties: {
  options: {
   type: Array,
   value: []
  },
  defaultOption: {
   type: Object,
   value: {
    id: '000',
    name: '全部城市'
   }
  },
  key: {
   type: String,
   value: 'id'
  },
  text: {
   type: String,
   value: 'name'
  }
 },
 data: {
  result: [],
  isShow: false,
  current: {}
 },
 methods: {
  optionTap(e) {
   let dataset = e.target.dataset
   this.setData({
    current: dataset,
    isShow: false
   });

   // 调用父组件方法,并传参
   this.triggerEvent("change", { ...dataset })
  },
  openClose() {
   this.setData({
    isShow: !this.data.isShow
   })
  },

  // 此方法供父组件调用
  close() {
   this.setData({
    isShow: false
   })
  }
 },
 lifetimes: {
  attached() {
   // 属性名称转换, 如果不是 { id: '', name:'' } 格式,则转为 { id: '', name:'' } 格式
   let result = []
   if (this.data.key !== 'id' || this.data.text !== 'name') {    
    for (let item of this.data.options) {
     let { [this.data.key]: id, [this.data.text]: name } = item
     result.push({ id, name })
    }
   }
   this.setData({
    current: Object.assign({}, this.data.defaultOption),
    result: result
   })
  }
 }
})

说明:properties中的 key 和 text 是为了做属性名转换。比如我现在的数据结构如下:

[{
   city_id: '001',
   city_name: '北京'
  }, {
   city_id: '002',
   city_name: '上海'
  }, {
   city_id: '003',
   city_name: '深圳'
 }]

而 select 组件要求的数据结构是:

[{
   id: '001',
   name: '北京'
  }, {
   id: '002',
   name: '上海'
  }, {
   id: '003',
   name: '深圳'
}]

因此我们就要将 city_id 转换成 id,city_name 转换成 name。 怎么实现属性名转换呢? 就是通过 key 和 text 这两个参数。

 3. select.json

{
 "component": true,
 "usingComponents": {}
}

4. select.wxss

.select-box {
 position: relative;
 width: 100%;
 font-size: 30rpx;
}

.select-current {
 position: relative;
 width: 100%;
 padding: 0 10rpx;
 line-height: 70rpx;
 border: 1rpx solid #ddd;
 border-radius: 6rpx;
 box-sizing: border-box;
}

.select-current::after {
 position: absolute;
 display: block;
 right: 16rpx;
 top: 30rpx;
 content: '';
 width: 0;
 height: 0;
 border: 10rpx solid transparent;
 border-top: 10rpx solid #999;
}

.current-name {
 display: block;
 width: 85%;
 height: 100%;
 word-wrap: normal;
 overflow: hidden;
}

.option-list {
 position: absolute;
 left: 0;
 top: 76rpx;
 width: 100%;
 padding: 12rpx 20rpx 10rpx 20rpx;
 border-radius: 6rpx;
 box-sizing: border-box;
 z-index: 99;
 box-shadow: 0rpx 0rpx 1rpx 1rpx rgba(0, 0, 0, 0.2) inset;
 background-color: #fff;
}

.option {
 display: block;
 width: 100%;
 line-height: 70rpx;
 border-bottom: 1rpx solid #eee;
}

.option:last-child {
 border-bottom: none;
 padding-bottom: 0;
}

 四、组件的使用

index.wxml

<view class="container" bindtap="close">
 <view class="select-wrap">
  <select id="select" options="{{options}}" key="city_id" text="city_name" bind:change="change"></select>
 </view>
</view>

总结

以上所述是小编给大家介绍的微信小程序 select 下拉框组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
vue.js中created方法作用
Mar 30 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
移动端手指操控左右滑动的菜单
Sep 08 #Javascript
swiper Scrollbar滚动条组件详解
Sep 08 #Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 #Javascript
swiper4实现移动端导航切换
Oct 16 #Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 #Javascript
vue实现抖音时间转盘
Sep 08 #Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 #Javascript
You might like
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
解析strtr函数的效率问题
2013/06/26 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
php微信开发之谷歌测距
2018/06/14 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
Python实现的tab文件操作类分享
2014/11/20 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
python中global用法实例分析
2015/04/30 Python
python网络编程之文件下载实例分析
2015/05/20 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
《孔子游春》教学反思
2014/02/25 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
2016年寒假生活小结
2015/10/10 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
Java并发编程必备之Future机制
2021/06/30 Java/Android
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang