微信小程序--下拉选择框组件封装,可CV直接使用

已于 2023-10-12 17:54:57 修改
阅读量4.1k 收藏 31
点赞数 14
分类专栏： 小程序 文章标签： 微信小程序 小程序 css
于 2023-10-12 12:00:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74444744/article/details/133787501
版权

一、起因

        接到的项目需求,查看ui设计图后,由于微信小程序官方设计的下拉选择框不符合需求,而且常用的第三方库也没有封装类似的,所以选择自己自定义组件。在此记录一下,方便日后复用。

        ui设计图如下:

        

        微信官方提供的选择框

        对比发现并不能实现我们想要的功能。

二、自定义组件 

2.1 封装品牌组件

注:我这里的箭头是使用Vant-Weapp生成的,可自由替换组件或图片实现,把相应的wxss改掉即可

代码如下

  • wxml
<view class="select_all_view">
 <!-- 内容说明，可以没有 -->
 <view class="select_title" wx:if="{{title}}">{{title}}</view>
 <view class="select_view">
  <!-- 输入框 -->
  <view class="inputPlaceholder" bindtap="startChange">
   <text class="text" wx:if='{{select}}' >{{select}}</text>
   <text class="text" wx:else="{{select}}" >{{placeholder}}</text>
   <view class="icon" wx:if='{{changable}}'>
    <van-icon name="arrow-down" />
   </view>
   <view class="icon" wx:else='{{changable}}'>
    <van-icon name="arrow" />
   </view>
  </view>
  <!-- 下拉展开后的可选择内容 -->
  <view class="content" wx:if='{{changable}}'>
   <view class="{{item.id==selectId ? 'active':''}}" wx:for="{{selectcontent}}" wx:key="idnex" bindtap="changecontent" data-datavalue="{{item}}">
    {{item.name}}
   </view>
  </view>
 </view>
</view>
  • wxss
/* components/select-postSale.wxss */
.select_all_view {
  display: flex;
  z-index: 999;
}

.select_view {
  display: inline;
  width: 200rpx;
  height: 64rpx;
}

/* .select_title {
  margin-right: 10rpx;
} */

.inputPlaceholder {
  min-width: 230rpx;
  height: 64rpx;
  background: #FFFFFF;
  border: 2rpx solid #D9D9D9;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  padding: 4rpx 0rpx 10rpx 10rpx;
  border-radius: 10rpx;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 28rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 33rpx;
}

.select_view .inputPlaceholder .text {
  height: 40rpx;
  position: relative;
  top: 16rpx;
  left: 12rpx;
}

.icon {
  position: absolute;
  right: 12rpx;
  top: 20rpx;
}

.content {
  position: absolute;
  z-index: 999;
  width: 200rpx;
  max-height: 208rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 12rpx 32rpx 0rpx rgba(0, 0, 0, 0.08), 0rpx 6rpx 12rpx -8rpx rgba(0, 0, 0, 0.12), 0rpx 18rpx 56rpx 16rpx rgba(0, 0, 0, 0.05);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  opacity: 1;
  margin-top: 8rpx;
  padding: 20rpx;
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.select_view .content .active {
  width: 184rpx;
  height: 64rpx;
  background: #F9F9F9;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  font-size: 28rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 33rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.select_view .content .normal {
  width: 184rpx;
  height: 64rpx;
  background: #FFFFFF;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  font-size: 28rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 33rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
  • json
{
  "component": true,
  "usingComponents": {
    "van-icon": "@vant/weapp/icon/index"
  }
}
  •  js
// components/select-postSale.js
Component({
  properties: {
   title:{
    type: String,
    value: ""
   },
   nameList: {
    type: Array,
    value: [],
    observer: function(){
    //有的时候选项组是后端获取数据来的，初始化时可能为[]，所以这里使用obersver，当父组件中值改变时触发
     this.processData();
    }
   },
   nowId: {
    type: Number,
    value: -1
   },
   nowName: {
    type: String,
    value: "",
    observer: function(){
     this.setData({select: this. properties.nowName,
      selectId: this.properties.nowId,});
    }
   },
   placeholder: {
    type: String,
    value: ""
   }
  },
 
  /**
   * 页面的初始数据
   */
  data: {
   selectcontent: [],
   changable: false, //箭头切换
   select: undefined, //选中的值
   selectId: undefined, //选中的id
  },
  methods: {
  // 下拉框收起和展开
   startChange(e) {
    this.setData({
     changable: !this.data.changable
    })
   },
   // 选择数据后回显
   changecontent(e) {
    this.setData({
     select: e.currentTarget.dataset.datavalue.name,
     selectId: e.currentTarget.dataset.datavalue.id,
     changable: false
    })
    this.triggerEvent("handleChange", {selectId: this.data.selectId, select: this.data.select});//向父组件传参
   },
   //处理数据，复制一遍，因为子组件不能直接改变父组件的传进来的值。
   processData(){
    let options = [];
    let that = this;
    this.properties.nameList.forEach((item) => {
     options.push({
      id: item.id,
      name: item.name,
     });
    }); //forEach
    this.setData({
     selectcontent: options,
     select: that.properties.nowName,
     selectId: that.properties.nowId,
    });
   }
  }
 })

2.2 组件调用与ui原型图对比

        在要使用组件的页面js中添加自己想要的数据

  • js
 data: {
    curfId: 1,
    brandList: [{name: "万达影视" ,id: 1},
    {name: "金逸影视" ,id: 2},
    {name: "CGV" ,id: 3}
   ],
   curBrandName:"万达影视" ,
}
  • wxml 
<select-postSale nowId="{{curfId}}" nameList="{{brandList}}" nowName="{{curBrandName}}" placeholder="请选择品牌" bind:handleChange="changeBrand"></select-postSale>
  • json
"usingComponents": {
    "van-icon": "@vant/weapp/icon/index",
    "select-postSale":"/components/select-postSale/select-postSale"
  },
  "navigationStyle": "custom"

    ui设计图与效果对比

        可以看到效果已经基本实现.具体细节需要优化一下

2.3 封装下方灰色区域组件

        这个组件有两个地方使用,样式基本相同,拿上方的品牌组件修改一下样式即可

代码如下

  • wxml
<!--pages/components/my_select/my_select.wxml-->
<view class="select_all_view">
 <view class="select_view">
  <!-- 输入框 -->
  <view class="inputPlaceholder" bindtap="startChange">
   <text class="text" wx:if='{{select}}' >{{select}}</text>
   <text class="text" wx:else="{{select}}" >{{placeholder}}</text>
   <view class="icon" wx:if='{{changable}}'>
    <van-icon name="arrow-down" />
   </view>
   <view class="icon" wx:else='{{changable}}'>
    <van-icon name="arrow" />
   </view>
  </view>
  <!-- 下拉展开后的可选择内容 -->
  <view class="content" wx:if='{{changable}}'>
   <view class="{{item.id==selectId ? 'active':'normal'}}" wx:for="{{selectcontent}}" wx:key="idnex" bindtap="changecontent" data-datavalue="{{item}}">
    {{item.name}}
   </view>
  </view>
 </view>
</view>
  • wxss
/* components/select-postSale.wxss */
.select_all_view {
  display: flex;
  z-index: 999;
  width: 654rpx;
  height: 104rpx;
  background: #F9F9F9;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  opacity: 1;
}

.select_view {
  display: inline;
  /* width: 200rpx;
  height: 64rpx; */
}

.inputPlaceholder {
  min-width: 654rpx;
  height: 82rpx;
  background: #F9F9F9;
  border: 2rpx solid #D9D9D9;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  padding: 4rpx 0rpx 10rpx 10rpx;
  /* color: #252525;
  font-weight: 400; */
  border-radius: 10rpx;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 32rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 38rpx;
}

.select_view .inputPlaceholder .text {
  height: 40rpx;
  position: relative;
  top: 30rpx;
  left: 24rpx;
}

.icon {
  position: absolute;
  right: 24rpx;
  top: 30rpx;
}

.content {
  position: absolute;
  z-index: 999;
  min-width: 626rpx;
  max-height: 516rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 12rpx 32rpx 0rpx rgba(0, 0, 0, 0.08), 0rpx 6rpx 12rpx -8rpx rgba(0, 0, 0, 0.12), 0rpx 18rpx 56rpx 16rpx rgba(0, 0, 0, 0.05);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  opacity: 1;
  margin-top: 8rpx;
  padding: 20rpx;
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content>.inputPlaceholder {
  padding: 10rpx 0;
}

.select_view .active {
  width: 638rpx;
  height: 100rpx;
  background: #F9F9F9;
  font-size: 32rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 38rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.select_view .normal {
  width: 638rpx;
  height: 100rpx;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  opacity: 1;
  font-size: 32rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 38rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
  • json
{
  "component": true,
  "usingComponents": {
    "van-icon": "@vant/weapp/icon/index"
  }
}
  • js
  • // components/select-postSale.js
Component({
  properties: {
   title:{
    type: String,
    value: ""
   },
   nameList: {
    type: Array,
    value: [],
    observer: function(){
    //有的时候选项组是后端获取数据来的，初始化时可能为[]，所以这里使用obersver，当父组件中值改变时触发
     this.processData();
    }
   },
   nowId: {
    type: Number,
    value: -1
   },
   nowName: {
    type: String,
    value: "",
    observer: function(){
     this.setData({select: this. properties.nowName,
      selectId: this.properties.nowId,});
    }
   },
   placeholder: {
    type: String,
    value: ""
   }
  },
 
  /**
   * 页面的初始数据
   */
  data: {
   selectcontent: [],
   changable: false, //箭头切换
   select: undefined, //选中的值
   selectId: undefined, //选中的id
  },
  methods: {
  // 下拉框收起和展开
   startChange(e) {
    this.setData({
     changable: !this.data.changable
    })
   },
   // 选择数据后回显
   changecontent(e) {
    this.setData({
     select: e.currentTarget.dataset.datavalue.name,
     selectId: e.currentTarget.dataset.datavalue.id,
     changable: false
    })
    this.triggerEvent("handleChange", {selectId: this.data.selectId, select: this.data.select});//向父组件传参
   },
   //处理数据，复制一遍，因为子组件不能直接改变父组件的传进来的值。
   processData(){
    let options = [];
    let that = this;
    this.properties.nameList.forEach((item) => {
     options.push({
      id: item.id,
      name: item.name,
     });
    }); //forEach
    this.setData({
     selectcontent: options,
     select: that.properties.nowName,
     selectId: that.properties.nowId,
    });
   }
  }
 })

2.4 第二个组件调用与ui原型图对比 

        跟上方调用组件一样.在使用组件页面js中添加数据,这里调用两次组件即可,只是展示数据不一样

  • js
 /**
   * 页面的初始数据
   */
  data: {
    curfId: 1,
   filmList: [{name: "坚如磐石" ,id: 1},
    {name: "变形金刚3" ,id: 2},
    {name: "复仇者联盟5" ,id: 3}
   ],
   curFilmName: "复仇者联盟5",
   dateList: [{name: "2023/10/16" ,id: 1},
    {name: "2023/10/23" ,id: 2},
    {name: "2023/10/30" ,id: 3}
   ],
   curDateName: "2023/10/16",
  },
  • wxml
<select-postSale_2 nowId="{{curfId}}" nameList="{{filmList}}" nowName="{{curFilmName}}" placeholder="请选择要更换的电影"></select-postSale_2>

<select-postSale_2 nowId="{{curfId}}" nameList="{{dateList}}" nowName="{{curDateName}}" placeholder="请选择要修改的日期"></select-postSale_2>
  • json 
"usingComponents": {
    "van-icon": "@vant/weapp/icon/index",
    "select-postSale_2":"/components/select-postSale_2/select-postSale_2"
  },
  "navigationStyle": "custom"

        ui原型图与实现效果对比

电影部分

日期部分

三、自定义修改说明 

  • 选择框的大小修改inputPlaceholder样式即可

举个栗子: 此处我修改了宽度与背景色

.inputPlaceholder {
  min-width: 400rpx;//修改后的宽度
  height: 82rpx;
  background: #FF00FF; // 修改后的背景色
  border: 2rpx solid #D9D9D9;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  padding: 4rpx 0rpx 10rpx 10rpx;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 32rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 38rpx;
}

  • 选择后的弹窗修改content样式即可 
  • 选中样式修改active,没选中样式修改normal,弹窗大小修改content

举个栗子:此处修改选中的背景色与没选中的背景色(懒人,修改背景色容易区分)

  • active

.select_view .active {

  width: 638rpx;

  height: 100rpx;

  background: #32CD32;  // 修改后背景色

  font-size: 32rpx;

  font-family: PingFang SC-Regular, PingFang SC;

  font-weight: 400;

  color: #000000;

  line-height: 38rpx;

  display: flex;

  justify-content: center;

  align-items: center;

}

  • normal

.select_view .normal {

  width: 638rpx;

  height: 100rpx;

  background: #FF6347;  // 修改后背景色

  opacity: 1;

  font-size: 32rpx;

  font-family: PingFang SC-Regular, PingFang SC;

  font-weight: 400;

  color: #000000;

  line-height: 38rpx;

  display: flex;

  justify-content: center;

  align-items: center;

}

其他的需要自定义的依照自己ui样式修改即可。 

 

糊涂涂糊涂涂
关注
  • 14
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序自定义select下拉选择组件
l_yilan的博客
08-31 4614
微信小程序自定义select下拉选择组件 微信小程序原生开发中，常用到的是从底部弹起的滚动选择器（picker),而有些项目需要用到下拉选择，话不多说，下面就可以把下拉选择封装成一个自定义组件： 1.在从components文件夹下新建自定义组件select; 2.select文件对应的wxml、wxss、js如下： wxml <view class='select-box'> <view class='select-con' bindtap='selectTap'>
微信小程序选择下拉框组件
01-27
微信小程序 select 下拉框组件 效果图 由于录屏图片质量不好，所以效果图你会看到有残影（捂脸）
【微信小程序】下拉框
qq_25285531的博客
11-06 1480
微信小程序组件里没有下拉框，正好要用到，记下来以后参考 wxml代码 <view class='top'> <view class='top-text'> 选择接收班级</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> ...
微信小程序封装vant 下拉框select 多选组件_微信小程序下拉框
最新发布
2401_85124866的博客
05-28 248
本组件主要由小程序vant ui组件，
微信小程序 select 下拉框组件功能
10-16
主要介绍了微信小程序 select 下拉框组件功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序实现下拉框功能
叶落无痕的博客
01-25 862
然后WXSS（如果不想要动画，删掉wxss里的transition:transform 0.3s;和transition: height 0.3s;微信小程序里没有和HTML里的下拉框一样的组件，想要相同的效果只能自己写一个，先看效果。
微信小程序封装vant 下拉框select 多选组件
IT博客技术分享
01-03 5277
微信小程序封装vant 下拉框select 多选组件
小程序选择框
WeiflR10的博客
11-23 6522
二、选择框搜索+选择。
微信小程序多列下拉框的实现（树形数据结构和单数组数据结构形式）
weixin_49376462的博客
04-19 3029
利用微信小程序api（bindchange和bindcolumnchange）,实现不同后端数据格式下的多列下拉框实现（三层）（树格式和一层一个数组的格式）
学习笔记——微信小程序下拉选项框的实现
m0_63309256的博客
03-28 1062
代码中通过range="{{array}}"和value="{{index}}"来绑定下拉选项框的可选数组与其对应的索引，当改变下拉选项框对应的值时，会触发bindchange事件，调用bindpickerchange函数。页面会将data部分的数据转化成初始的wxml页面数据，即页面初始数据为“柴油”，选择器更变数据是会触发bindpickerchange函数，将更改后的值写入页面。、在微信小程序中实现下拉选项框可以使用微信 原生组件picker，
自定义微信小程序下拉选择组件Select
tex_csdn的博客
11-01 1155
背景 项目需求要实现类似html标签 <Select/>效果，所以写了一个类型效果的自定义组件。 效果图 wxml <view class="view-body"> <text class='item-key'>{{title}}<text style="color:red" wx:if="{{isRequired}}">*</t...
微信小程序--自定义选择颜色（组件）
07-29
1、微信小程序、颜色、组件、可自定义选择 2、该资源科用于用户自定义选择喜欢的颜色 3、已经封装成组件，可以直接调用即可 4、成功运用于网上用户，体验效果好 5、想要的小伙伴可以直接拿去使用，方便快捷高效的...
微信小程序---弹窗封装（组件）
08-02
1、为了统一展示弹窗页面，封装成了一个组件 2、功能：可以自定义“取消”“确定”按钮文案，可以自定义是否显示单个按钮或多个按钮，可以调用相应方法即可进行相应的js执行 3、方便快捷，下载直接放进组件里面，...
微信小程序--瀑布流展示效果（通用潮流网络直播、图片展示）
07-28
微信小程序是一种轻量级的应用开发平台，它允许开发者在微信内构建原生体验的应用，无需安装即可使用。在这个特定的项目中，我们关注的是“微信小程序--瀑布流展示效果（通用潮流网络直播、图片展示）”。瀑布流布局...
微信小程序 ---- 组件应用和实际开发的DEMO
01-09
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的线上服务。本主题聚焦于微信小程序的组件应用与实际开发，通过一系列DEMO来深入理解其核心功能和...
【微信小程序-毕设期末大作业】源码电商类微信小程序
04-25
【微信小程序-毕设期末大作业】源码电商类微信小程序 【微信小程序-毕设期末大作业】源码电商类微信小程序【微信小程序-毕设期末大作业】源码电商类微信小程序【微信小程序-毕设期末大作业】源码电商类微信小程序...
vant下拉选择框（单选、多选）
weixin_56539583的博客
05-23 983
【代码】vant下拉选择框（单选、多选）
微信小程序实现简单下拉加载更多
qq_59527682的博客
06-12 2783
微信小程序实现简单下拉加载更多
微信小程序下拉选择
花无名
07-16 6454
微信小程序下拉框选择，弹出浮层选择，下拉选择
微信小程序 ---- 组件应用和实际开发的demo
05-11
微信小程序是一种基于微信平台的应用的开发模式，可以快速的开发出符合用户需求的小程序。在小程序的开发中，组件是一个非常重要的概念，通过组件可以实现复用性和模块化编程思想。 组件应用是小程序开发的基础。通过组件可以将某一模块化并封装起来，使得组件可以在不同的页面间得到复用，大大提升了开发效率并减少了代码冗余。微信小程序提供了丰富的自带组件，包括文本、图片、按钮、输入框等等，开发者也可以自己开发组件来满足自己的需求。实际开发中，通过组件可以快速搭建页面框架和业务逻辑。 Demo是一个演示小程序的示例程序。在小程序的实际开发过程中，一个好的Demo非常重要。通过Demo，开发人员可以更深入的了解小程序的开发流程、组件的应用和实际的业务开发等等。在Demo中，通常会包括小程序的一些基础操作，如页面跳转、数据绑定、组件的使用等。而在实际开发中，Demo还会包括一些复杂的业务场景，如支付、登录、数据列表展示等等。Demo不仅为开发者提供了学习和实践的机会，也方便了使用者了解该小程序的功能和特点。 总之，微信小程序组件的应用和Demo的开发都是小程序开发过程中非常重要的两个部分。良好的组件应用和精心设计的Demo，可以在极短的时间内实现小程序开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值