微信小程序 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 相关文章推荐
javascript tips提示框组件实现代码
Nov 19 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 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
认识并使用PHP超级全局变量
2010/01/26 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
PDO::inTransaction讲解
2019/01/28 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
Python实现的弹球小游戏示例
2017/08/01 Python
python图像常规操作
2017/11/11 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
python 重命名轴索引的方法
2018/11/10 Python
python制作mysql数据迁移脚本
2019/01/01 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
python os模块简单应用示例
2019/05/23 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
Python如何读取、写入JSON数据
2020/07/28 Python
python实现简单的tcp 文件下载
2020/09/16 Python
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
施工安全协议书
2013/12/11 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
2014年防汛工作总结
2014/12/08 职场文书
代理词怎么写
2015/05/25 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书