圆月山庄资源网 Design By www.vgjia.com

一、源码地址

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 下拉框组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

标签:
微信小程序下拉框,select,下拉框组件

圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?