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

    一、起因

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

            ui设计图如下:

            

            微信官方提供的选择框

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

    二、自定义组件 

    2.1 封装品牌组件

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

    代码如下

    • wxml
    1. <view class="select_all_view">
    2.  
    3.  <view class="select_title" wx:if="{{title}}">{{title}}view>
    4.  <view class="select_view">
    5.   
    6.   <view class="inputPlaceholder" bindtap="startChange">
    7.    <text class="text" wx:if='{{select}}' >{{select}}text>
    8.    <text class="text" wx:else="{{select}}" >{{placeholder}}text>
    9.    <view class="icon" wx:if='{{changable}}'>
    10.     <van-icon name="arrow-down" />
    11.    view>
    12.    <view class="icon" wx:else='{{changable}}'>
    13.     <van-icon name="arrow" />
    14.    view>
    15.   view>
    16.   
    17.   <view class="content" wx:if='{{changable}}'>
    18.    <view class="{{item.id==selectId ? 'active':''}}" wx:for="{{selectcontent}}" wx:key="idnex" bindtap="changecontent" data-datavalue="{{item}}">
    19.     {{item.name}}
    20.    view>
    21.   view>
    22.  view>
    23. view>
    24.
    • wxss
    1. /* components/select-postSale.wxss */
    2. .select_all_view {
    3.   display: flex;
    4.   z-index: 999;
    5. }
    6.  
    7. .select_view {
    8.   display: inline;
    9.   width: 200rpx;
    10.   height: 64rpx;
    11. }
    12.  
    13. /* .select_title {
    14.   margin-right: 10rpx;
    15. } */
    16.  
    17. .inputPlaceholder {
    18.   min-width: 230rpx;
    19.   height: 64rpx;
    20.   background: #FFFFFF;
    21.   border: 2rpx solid #D9D9D9;
    22.   border-radius: 12rpx 12rpx 12rpx 12rpx;
    23.   padding: 4rpx 0rpx 10rpx 10rpx;
    24.   border-radius: 10rpx;
    25.   position: relative;
    26.   overflow: hidden;
    27.   text-overflow: ellipsis;
    28.   white-space: nowrap;
    29.   font-size: 28rpx;
    30.   font-family: PingFang SC-Regular, PingFang SC;
    31.   font-weight: 400;
    32.   color: #000000;
    33.   line-height: 33rpx;
    34. }
    35.  
    36. .select_view .inputPlaceholder .text {
    37.   height: 40rpx;
    38.   position: relative;
    39.   top: 16rpx;
    40.   left: 12rpx;
    41. }
    42.  
    43. .icon {
    44.   position: absolute;
    45.   right: 12rpx;
    46.   top: 20rpx;
    47. }
    48.  
    49. .content {
    50.   position: absolute;
    51.   z-index: 999;
    52.   width: 200rpx;
    53.   max-height: 208rpx;
    54.   background: #FFFFFF;
    55.   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);
    56.   border-radius: 16rpx 16rpx 16rpx 16rpx;
    57.   opacity: 1;
    58.   margin-top: 8rpx;
    59.   padding: 20rpx;
    60.   overflow-x: hidden;
    61.   overflow-y: scroll;
    62.   display: flex;
    63.   flex-direction: column;
    64.   justify-content: center;
    65.   align-items: center;
    66. }
    67.  
    68. .select_view .content .active {
    69.   width: 184rpx;
    70.   height: 64rpx;
    71.   background: #F9F9F9;
    72.   border-radius: 0rpx 0rpx 0rpx 0rpx;
    73.   opacity: 1;
    74.   font-size: 28rpx;
    75.   font-family: PingFang SC-Regular, PingFang SC;
    76.   font-weight: 400;
    77.   color: #000000;
    78.   line-height: 33rpx;
    79.   display: flex;
    80.   justify-content: center;
    81.   align-items: center;
    82. }
    83.  
    84. .select_view .content .normal {
    85.   width: 184rpx;
    86.   height: 64rpx;
    87.   background: #FFFFFF;
    88.   border-radius: 0rpx 0rpx 0rpx 0rpx;
    89.   opacity: 1;
    90.   font-size: 28rpx;
    91.   font-family: PingFang SC-Regular, PingFang SC;
    92.   font-weight: 400;
    93.   color: #000000;
    94.   line-height: 33rpx;
    95.   display: flex;
    96.   justify-content: center;
    97.   align-items: center;
    98. }
    • json
    1. {
    2.   "component": true,
    3.   "usingComponents": {
    4.     "van-icon": "@vant/weapp/icon/index"
    5.   }
    6. }
    •  js
    1. // components/select-postSale.js
    2. Component({
    3.   properties: {
    4.    title:{
    5.     type: String,
    6.     value: ""
    7.    },
    8.    nameList: {
    9.     type: Array,
    10.     value: [],
    11.     observer: function(){
    12.     //有的时候选项组是后端获取数据来的，初始化时可能为[]，所以这里使用obersver，当父组件中值改变时触发
    13.      this.processData();
    14.     }
    15.    },
    16.    nowId: {
    17.     type: Number,
    18.     value: -1
    19.    },
    20.    nowName: {
    21.     type: String,
    22.     value: "",
    23.     observer: function(){
    24.      this.setData({select: this. properties.nowName,
    25.       selectId: this.properties.nowId,});
    26.     }
    27.    },
    28.    placeholder: {
    29.     type: String,
    30.     value: ""
    31.    }
    32.   },
    33.  
    34.   /**
    35.    * 页面的初始数据
    36.    */
    37.   data: {
    38.    selectcontent: [],
    39.    changable: false, //箭头切换
    40.    select: undefined, //选中的值
    41.    selectId: undefined, //选中的id
    42.   },
    43.   methods: {
    44.   // 下拉框收起和展开
    45.    startChange(e) {
    46.     this.setData({
    47.      changable: !this.data.changable
    48.     })
    49.    },
    50.    // 选择数据后回显
    51.    changecontent(e) {
    52.     this.setData({
    53.      select: e.currentTarget.dataset.datavalue.name,
    54.      selectId: e.currentTarget.dataset.datavalue.id,
    55.      changable: false
    56.     })
    57.     this.triggerEvent("handleChange", {selectId: this.data.selectId, select: this.data.select});//向父组件传参
    58.    },
    59.    //处理数据，复制一遍，因为子组件不能直接改变父组件的传进来的值。
    60.    processData(){
    61.     let options = [];
    62.     let that = this;
    63.     this.properties.nameList.forEach((item) => {
    64.      options.push({
    65.       id: item.id,
    66.       name: item.name,
    67.      });
    68.     }); //forEach
    69.     this.setData({
    70.      selectcontent: options,
    71.      select: that.properties.nowName,
    72.      selectId: that.properties.nowId,
    73.     });
    74.    }
    75.   }
    76.  })

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

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

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

        ui设计图与效果对比

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

    2.3 封装下方灰色区域组件

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

    代码如下

    • wxml
    2. "select_all_view">
    3.  "select_view">
    4.   
    5.   "inputPlaceholder" bindtap="startChange">
    6.    "text" wx:if='{{select}}' >{{select}}
    7.    "text" wx:else="{{select}}" >{{placeholder}}
    8.    "icon" wx:if='{{changable}}'>
    9.     "arrow-down" />
    10.    
    11.    "icon" wx:else='{{changable}}'>
    12.     "arrow" />
    13.    
    14.   
    15.   
    16.   "content" wx:if='{{changable}}'>
    17.    "{{item.id==selectId ? 'active':'normal'}}" wx:for="{{selectcontent}}" wx:key="idnex" bindtap="changecontent" data-datavalue="{{item}}">
    18.     {{item.name}}
    19.    
    20.   
    21.  
    23.
    • wxss
    1. /* components/select-postSale.wxss */
    2. .select_all_view {
    3.   display: flex;
    4.   z-index: 999;
    5.   width: 654rpx;
    6.   height: 104rpx;
    7.   background: #F9F9F9;
    8.   border-radius: 12rpx 12rpx 12rpx 12rpx;
    9.   opacity: 1;
    10. }
    11.  
    12. .select_view {
    13.   display: inline;
    14.   /* width: 200rpx;
    15.   height: 64rpx; */
    16. }
    17.  
    18. .inputPlaceholder {
    19.   min-width: 654rpx;
    20.   height: 82rpx;
    21.   background: #F9F9F9;
    22.   border: 2rpx solid #D9D9D9;
    23.   border-radius: 12rpx 12rpx 12rpx 12rpx;
    24.   padding: 4rpx 0rpx 10rpx 10rpx;
    25.   /* color: #252525;
    26.   font-weight: 400; */
    27.   border-radius: 10rpx;
    28.   position: relative;
    29.   overflow: hidden;
    30.   text-overflow: ellipsis;
    31.   white-space: nowrap;
    32.   font-size: 32rpx;
    33.   font-family: PingFang SC-Regular, PingFang SC;
    34.   font-weight: 600;
    35.   color: #000000;
    36.   line-height: 38rpx;
    37. }
    38.  
    39. .select_view .inputPlaceholder .text {
    40.   height: 40rpx;
    41.   position: relative;
    42.   top: 30rpx;
    43.   left: 24rpx;
    44. }
    45.  
    46. .icon {
    47.   position: absolute;
    48.   right: 24rpx;
    49.   top: 30rpx;
    50. }
    51.  
    52. .content {
    53.   position: absolute;
    54.   z-index: 999;
    55.   min-width: 626rpx;
    56.   max-height: 516rpx;
    57.   background: #FFFFFF;
    58.   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);
    59.   border-radius: 16rpx 16rpx 16rpx 16rpx;
    60.   opacity: 1;
    61.   margin-top: 8rpx;
    62.   padding: 20rpx;
    63.   overflow-x: hidden;
    64.   overflow-y: scroll;
    65.   display: flex;
    66.   flex-direction: column;
    67.   justify-content: center;
    68.   align-items: center;
    69. }
    70.  
    71. .content>.inputPlaceholder {
    72.   padding: 10rpx 0;
    73. }
    74.  
    75. .select_view .active {
    76.   width: 638rpx;
    77.   height: 100rpx;
    78.   background: #F9F9F9;
    79.   font-size: 32rpx;
    80.   font-family: PingFang SC-Regular, PingFang SC;
    81.   font-weight: 600;
    82.   color: #000000;
    83.   line-height: 38rpx;
    84.   display: flex;
    85.   justify-content: center;
    86.   align-items: center;
    87. }
    88.  
    89. .select_view .normal {
    90.   width: 638rpx;
    91.   height: 100rpx;
    92.   border-radius: 16rpx 16rpx 16rpx 16rpx;
    93.   opacity: 1;
    94.   font-size: 32rpx;
    95.   font-family: PingFang SC-Regular, PingFang SC;
    96.   font-weight: 600;
    97.   color: #000000;
    98.   line-height: 38rpx;
    99.   display: flex;
    100.   justify-content: center;
    101.   align-items: center;
    102. }
    • json
    1. {
    2.   "component": true,
    3.   "usingComponents": {
    4.     "van-icon": "@vant/weapp/icon/index"
    5.   }
    6. }
    • js
      1. // components/select-postSale.js
      2. Component({
      3.   properties: {
      4.    title:{
      5.     type: String,
      6.     value: ""
      7.    },
      8.    nameList: {
      9.     type: Array,
      10.     value: [],
      11.     observer: function(){
      12.     //有的时候选项组是后端获取数据来的，初始化时可能为[]，所以这里使用obersver，当父组件中值改变时触发
      13.      this.processData();
      14.     }
      15.    },
      16.    nowId: {
      17.     type: Number,
      18.     value: -1
      19.    },
      20.    nowName: {
      21.     type: String,
      22.     value: "",
      23.     observer: function(){
      24.      this.setData({select: this. properties.nowName,
      25.       selectId: this.properties.nowId,});
      26.     }
      27.    },
      28.    placeholder: {
      29.     type: String,
      30.     value: ""
      31.    }
      32.   },
      33.  
      34.   /**
      35.    * 页面的初始数据
      36.    */
      37.   data: {
      38.    selectcontent: [],
      39.    changable: false, //箭头切换
      40.    select: undefined, //选中的值
      41.    selectId: undefined, //选中的id
      42.   },
      43.   methods: {
      44.   // 下拉框收起和展开
      45.    startChange(e) {
      46.     this.setData({
      47.      changable: !this.data.changable
      48.     })
      49.    },
      50.    // 选择数据后回显
      51.    changecontent(e) {
      52.     this.setData({
      53.      select: e.currentTarget.dataset.datavalue.name,
      54.      selectId: e.currentTarget.dataset.datavalue.id,
      55.      changable: false
      56.     })
      57.     this.triggerEvent("handleChange", {selectId: this.data.selectId, select: this.data.select});//向父组件传参
      58.    },
      59.    //处理数据，复制一遍，因为子组件不能直接改变父组件的传进来的值。
      60.    processData(){
      61.     let options = [];
      62.     let that = this;
      63.     this.properties.nameList.forEach((item) => {
      64.      options.push({
      65.       id: item.id,
      66.       name: item.name,
      67.      });
      68.     }); //forEach
      69.     this.setData({
      70.      selectcontent: options,
      71.      select: that.properties.nowName,
      72.      selectId: that.properties.nowId,
      73.     });
      74.    }
      75.   }
      76.  })

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

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

    • js
    1.  /**
    2.    * 页面的初始数据
    3.    */
    4.   data: {
    5.     curfId: 1,
    6.    filmList: [{name: "坚如磐石" ,id: 1},
    7.     {name: "变形金刚3" ,id: 2},
    8.     {name: "复仇者联盟5" ,id: 3}
    9.    ],
    10.    curFilmName: "复仇者联盟5",
    11.    dateList: [{name: "2023/10/16" ,id: 1},
    12.     {name: "2023/10/23" ,id: 2},
    13.     {name: "2023/10/30" ,id: 3}
    14.    ],
    15.    curDateName: "2023/10/16",
    16.   },
    • wxml
    1. "{{curfId}}" nameList="{{filmList}}" nowName="{{curFilmName}}" placeholder="请选择要更换的电影">
    2.  
    3. "{{curfId}}" nameList="{{dateList}}" nowName="{{curDateName}}" placeholder="请选择要修改的日期">
    • json 
    1. "usingComponents": {
    2.     "van-icon": "@vant/weapp/icon/index",
    3.     "select-postSale_2":"/components/select-postSale_2/select-postSale_2"
    4.   },
    5.   "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样式修改即可。 

     

  • 相关阅读:
    uname
    transformer模型训练结构解析（加深理解）
    hadoop MapReduce运营商案例关于用户基站停留数据统计
    RC-u4 相对论大师(bfs求解指定路径)
    springboot结合elasticJob
    Linux open suse15==安装pcre zlib openssl nginx 关防火墙 安装httpd
    项目管理中最常见的问题有哪些？
    对Python3.8配置OpenCV4.5.5中
    Java学习 --- 面向对象之继承
    Python如何将项目直接打包为一键整合包
  • 原文地址：https://blog.csdn.net/m0_74444744/article/details/133787501