精华内容
下载资源
问答
  • 主要介绍了微信小程序 下拉列表的实现实例代码的相关资料,需要的朋友可以参考下
  • 先看需求和效果,移动端设计比较常用的下拉菜单,主要用于筛选查询列表结果。下拉菜单的样式可以根据自己的具体需求进行修改。...我在小程序开发的过程中也开发了许多组件,可以在我的gitee地址中去查看,所有组件

    先看需求和效果,移动端设计比较常用的下拉菜单,主要用于筛选查询列表结果。下拉菜单的样式可以根据自己的具体需求进行修改。这里根据自己的实际需求开发了三种下拉类型:

    效果展示

    第一个是单选下拉菜单,单选之后立即收起。
    在这里插入图片描述
    第二个是复选下拉菜单,主要提供了多选的功能,显示确定和重置按钮用于修改复选结果。
    在这里插入图片描述
    第三种是自定义内容,提供给用户自己写组件内容的插槽。
    在这里插入图片描述

    要点

    1. 组件间的关系

    父组件WXML

    <view class="mt_dropdown" id="mt_dropdown">
      <slot></slot>
    </view>
    

    DEMO运用组件

    <mt-dropdown>
    	<mt-dropdown-item></mt-dropdown-item>
    	<mt-dropdown-item></mt-dropdown-item>
    </mt-dropdown>
    

    主要问题:子组件是放在slot插槽里面,如何和父组件进行沟通。因为遮罩层是嵌在子组件里的,所以需要点击打开一个下拉菜单子项的时候,去关闭其余下拉菜单子项。大家有空可以去看下vant-weapp的源码,这里处理的较为简单。最主要的问题就是<mt-dropdown-item><mt-dropdown>之间如何沟通。

    遇事不决先看文档微信小程序-组件间关系,主要是relations定义段


    微信小程序代码片段,可以在微信开发者工具中查看效果和代码。

    我在小程序开发的过程中也开发了许多组件,可以在我的gitee地址中去查看,所有组件的API都可以在Wiki中查看(有的太懒就没写了),如果好的建议可以留言给我或者评论跟我讨论。如果对你有用可以点赞、收藏、分享。

    展开全文
  • 效果,所以写了一个类型效果的自定义组件。 效果图 wxml <view class="view-body"> <text class='item-key'>{{title}}<text style="color:red" wx:if="{{isRequired}}">*</t...

    背景
    项目需求要实现类似html标签 <Select/>效果,所以写了一个类型效果的自定义组件。


    效果图

    wxml

    <view class="view-body">
      <text class='item-key'>{{title}}<text style="color:red" wx:if="{{isRequired}}">*</text></text>
      <view class="view-select-container">
        <view class='select-value' bindtap="selectToggle">
          <input value="{{value}}" name='{{name}}' disabled="{{true}}" />
          <image class='img-arrow' style="width:40rpx;height:40rpx" src='/images/drop_down.png' />
        </view>
        <view class="view-options" wx:if="{{showOptions}}">
          <cover-view class='option-item' wx:for="{{options}}" data-index="{{index}}" bindtap="selectItem">{{item[showkey]}}</cover-view>
        </view>
      </view>
    </view>

     js

    Component({
      behaviors: ['wx://form-field'], //支持表单获取组件值
      properties: {
        //组件的名称
        title: {
          type: String
        },
        //通过form获取组件的值
        name: {
          type: String
        },
        //下拉显示的数据集合
        options: {
          type: Array
        },
        //表单组件是否必填
        isRequired: {
          type: Boolean
        },
        //外部传递的动态变量
        showkey: {
          type: String
        }
      },
      data: {
        showOptions: false //组件默认的展开状态
      },
      /**
       * 组件的方法列表
       */
      lifetimes: {
        attached: function() {
          var key = this.properties.showkey
          this.setData({
            value: this.properties.options[0][key] //默认选中第一个
          })
        },
      },
      methods: {
        selectToggle: function(e) {
          this.setData({
            showOptions: !this.data.showOptions
          })
        },
        selectItem: function(e) {
          var optionList = this.properties.options //外部传进来的数组对象
          var nowIdx = e.currentTarget.dataset.index //当前点击的索引
          var selectItem = optionList[nowIdx] //当前点击的内容
          this.setData({
            showOptions: false,
            value: selectItem[this.properties.showkey]
          });
          var eventOption = {} // 触发事件的选项
          this.triggerEvent("mySelectItem", selectItem) //组件选中回调
        }
      }
    })

    使用

    json中引入自定义组件

    {
      "usingComponents": {
        "Select": "/components/select/select"
      }
    }


    js

    Page({
      data: {
        optionArry: [{
          "name": "香蕉",
          "id": "1"
        }, {
          "name": "苹果",
          "id": "2"
        }, {
          "name": "橘子",
          "id": "3"
        }, {
          "name": "雪梨",
          "id": "4"
        }],
      },
      onLoad: function() {},
    })


    wxml中使用

    <Select title="类别" options="{{optionArry}}" isRequired="true" bind:mySelectItem='onSelectItem' name='formkey' showkey='name' />

     

    总结:可以动态传递对象数组在组件中显示的属性名,类型picker的range-key;主要遇到的问题就是组件展开时遮住原生组件时的点击击穿问题,所以这里使用了 cover-view 来解决这一问题。

    最后完整源码地址为:

    https://github.com/tex-github/miniprogram-components-select.git

    展开全文
  • 自定义微信小程序下拉选择框组件

    万次阅读 2018-09-21 21:54:45
    自定义微信小程序下拉选择框组件如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能...

    自定义微信小程序下拉选择框组件

    预览效果图:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    预览效果

    ========================================================

    首先要新建一个组件

    1.在想要的位置上新建一个目录
    在这里插入图片描述
    2.在该目录中 右键 → 新建一个Component
    工具会自动生成四个文件(无视assets,那是我放图片的地方)
    在这里插入图片描述
    其中我们一般修改 .js .wxml .wxss 文件

    3.观察select.json文件
    “component”: true 这句话表示这个目录是作为一个组件的,可以给别的目录用
    在这里插入图片描述

    ========================================================

    开始编码

    selector.wxml

    <view class='selectBox'> 
      <view class='select' catchtap='selectTap'> 
        <text class='select_text'>{{selectData[index]}}</text> 
        <image class='select_img {{selectShow&&"select_img_rotate"}}' 
               src='../selector/assets/jiantou.jpg' 
               background-size="contain">
        </image> 
      </view> 
    
      <view class='optionBox'
      		style='height:300rpx;'>     
      	<text class='option' 
              wx:for='{{selectData}}' 
              wx:key='this' 
              data-index='{{index}}' 
              catchtap='optionTap'>{{item}}
        </text> 
      </view> 
    </view>
    

    ========================================================
    selector.wxss(要改的样式可以自己改)

    .selectBox{ height:1.5rem;border:2px solid black;border-radius: 20rpx; position: relative; padding-left: 10rpx} 
    .selectBox .select{ box-sizing: border-box; width: 100%; height: 100%; border-radius: 8rpx; display: flex; align-items: center; padding: 0 10rpx; } 
    .selectBox .select .select_text{ font-size: 35rpx; color:black; line-height: 28rpx; flex: 1; } 
    .selectBox .select .select_img{ width: 30rpx; height: 30rpx; display: block; transition:transform 0.3s; }
     .selectBox .select .select_img_rotate{ transform:rotate(180deg); } 
    .selectBox .optionBox{ position: absolute; top: calc(100%); width: 100%; box-sizing: border-box; height: 0; overflow-y: auto; background: #fff; transition: height 0.3s; border-left:2px solid black; border-right:2px solid black;border:1px solid black ;z-index:9999} 
    .selectBox .optionBox .option{ display: block; line-height: 50rpx; font-size: 35rpx; border-top: 2px solid black; padding: 10rpx;z-index:9999;} 
    

    =======================================================
    selector.js

    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        selectData: { //下拉列表的数据
          type: Array,
          value: [] //初始数据,可通过属性修改
        },
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        selectShow: false,//控制下拉列表的显示隐藏,false隐藏、true显示
        index: 0,//选择的下拉列表下标
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        selectTap() {
          this.setData({
            selectShow: !this.data.selectShow
          });
        },
        optionTap(e){
          let Index=e.currentTarget.dataset.index;
          this.setData({
            index:Index,
            selectShow:!this.data.selectShow
          });
        }
      }
    })
    

    ========================================================

    定义完了组件,开始使用

    1.首先在要使用的地方的.json文件中声明用到了该组件

    {
      "usingComponents": {
        "selector":"/pages/selector/selector"
      }
    }
    

    2.直接使用组件标签(selectData定义为属性,可以自定义可选的列表)

         <selector selectData="{{position}}"></selector>
    

    OK,大功告成!
    附上我的箭头图片 ↓↓↓↓
    箭头

    展开全文
  • 微信小程序 自定义 下拉列表 组件

    千次阅读 2020-06-11 14:08:45
    小程序中 没有使用 html 标签中的 select 下拉框 但项目要实现这个功能 只能自己动手敲 在文件 的根目录下 新建 components 文件夹 建立一个select 的文件夹 右键 点击新建Component 然后会自动生成这四个文件 ...

    在小程序中 没有使用 html 标签中的 select 下拉框

    但项目要实现这个功能 只能自己动手敲

    在文件 的根目录下 新建 components 文件夹

    建立一个select 的文件夹 右键 点击新建Component 然后会自动生成这四个文件在这里插入图片描述

    然后开始写 组件内容

    // select.wxml  文件下
    <!--componet/select/select.wxml-->
    <view class='com-selectBox'>
        <view class='com-sContent' bindtap='selectToggle'>
            <view class='com-sTxt'>{{nowText}}</view> // 要显示的内容
            <image src='/imgs/icon-left-jt.png'  class='com-sImg'  animation="{{animationData}}"></image>  // 
        </view>
        <view class='com-sList' wx:if="{{selectShow}}">  // 显示的列表内容
            <view wx:for="{{propArray}}" data-index="{{index}}" wx:key='index' class='com-sItem' bindtap='setText'>{{item.text}}</view>
        </view>
    </view>
    
     // select.js 文件下
     //  第一步 在组件的属性列表  
       properties: {
        propArray:{  //声明传递的类型
            type:Array,
        }
      },
      // 第二步 组件的初始数据
       data: {
        selectShow:false,//初始option不显示
        nowText:"请选择",//初始内容
        animationData:{}//右边箭头的动画
      },
      // 第三步
        /**
       * 组件的方法列表
       */
      methods: {
        //option的显示与否
        selectToggle:function(){
          var nowShow=this.data.selectShow;//获取当前option显示的状态
          //创建动画
          var animation = wx.createAnimation({
              timingFunction:"ease"
          })
          this.animation=animation;
          if(nowShow){
              animation.rotate(0).step();
              this.setData({
                  animationData: animation.export()
              })
          }else{
              animation.rotate(180).step();                
              this.setData({
                  animationData: animation.export()
              })
          }
          this.setData({
              selectShow: !nowShow
          })
      },
      // 第四步
      //设置内容
        setText:function(e){
          var nowData = this.properties.propArray;//当前option的数据是引入组件的页面传过来的,所以这里获取数据只有通过this.properties
          var nowIdx = e.target.dataset.index;//当前点击的索引
          var nowText = nowData[nowIdx].text;//当前点击的内容
          //执行动画
          this.animation.rotate(0).step();
          this.setData({
              selectShow: false,
              nowText:nowText,
              animationData: this.animation.export()
          })
          var nowDate={
            id:nowIdx,
            text:nowText
        }
        this.triggerEvent('myget', nowDate)
      }
    
    // select.json 文件下
    {
      "component": true,  //确认开启
      "usingComponents": {}
    }
    
    /* select.wxss  文件下 */
    /*  componet/select/select.wxss */
    .com-selectBox{
      width: 200px;
    }
    .com-sContent{
      border: 1px solid #e2e2e2;
      background: white;
      font-size: 16px;
      position: relative;
      height: 30px;
      line-height: 30px;
    }
    .com-sImg{
      position: absolute;
      right: 10px;
      top: 11px;
      width: 16px;
      height: 9px;
      transition: all .3s ease;
    }
    .com-sTxt{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding:0 20px 0 6px;
      font-size: 14px;
    }
    .com-sList{
      background: white;
      width: inherit;
      position: absolute;
      border: 1px solid #e2e2e2;
      border-top: none;
      box-sizing: border-box;
      z-index: 3;
      max-height: 120px;
      overflow: auto;
    }
    .com-sItem{
      height: 30px;
      line-height: 30px;
      border-top: 1px solid #e2e2e2;
      padding: 0 6px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }
    .com-sItem:first-child{
      border-top: none;
    }
    

    在父级中使用

    例如想在pages 下面的index文件中去使用这个组件 需要先在 index.json 下面去添加组件

     {
      "usingComponents": {
        "Select" : "/components/select/select"
      }
    }
    

    在这里插入图片描述

      <Select prop-array='{{selectArray}}' bind:myget='getDate'></Select>
    

    这里我先自己模拟了数据

      data: {
        selectArray: [
          {id: '1', text: '会计类'},
          {id: '2', text: '工程类'},
          {id: '3', text: '会计类'},
          {id: '4', text: '工程类'},
          {id: '5', text: '会计类'},
          {id: '6', text: '工程类'},
          {id: '7', text: '会计类'},
          {id: '8', text: '工程类'},
          {id: '9', text: '会计类'},
          {id: '10', text: '工程类'}
        ]
      },
    

    然后 大功告成 了
    在这里插入图片描述
    在这里插入图片描述

    这里 css 做了限制固定的宽度 所以 显示4个

    页面上点击如何获取 选中的信息 因为之前给子组件自定义事件 了

    所以 在父组件使用 需要传递一个值

    在这里插入图片描述
    在这里插入图片描述

    打印出来

    在这里插入图片描述

    展开全文
  • 微信小程序下拉列表

    2019-08-15 17:38:33
    2、构建组件 page.wxml <view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}</text> <ima...
  • 微信小程序select下拉组件封装

    千次阅读 2019-04-19 11:09:34
    刚接触微信小程序,之前有使用vue的底子,今天就分享一个自己封装的下拉组件(参考别人的组件按自己需求修改的),个人是不是很喜欢造轮子,如果有现成的都喜欢复制粘贴改改哈哈,都是之前公司养的坏毛病。...
  • 针对于微信小程序做了个下拉菜单的自定义组件,样式如下~ 主要包括以下两种类型 级联选择器,例如xx区-xx街道 下拉列表,例如排序,筛选等 使用 具体使用方式参照index.wxml示例 支持动态修改Navgation上的...
  • 主要介绍了微信小程序 下拉菜单的实现的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序 下拉菜单简单实例的相关资料,需要的朋友可以参考下
  • 先来看下效果图: (此图片来源于网络,如有侵权,请联系删除! ) 思路与步骤: 布局方面,整体使用dl来写,二级包在dd中,用ul li来写;... 1.使用dt做出第一级菜单 2.使用dd嵌套第二级菜单,初始隐藏、position为...
  • 主要介绍了微信小程序显示下拉列表功能,涉及微信小程序navigator组件导航及页面加载相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
  • [微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式 微信小程序下拉滚动选择器picker绑定数据的两种方式 本地数据绑定和wx.request(OBJECT) json数据绑定 1.本地数据绑定 (对象数组) Page({ data:{...
  • 主要介绍了微信小程序 select 下拉框组件功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序列表筛选组件

    万次阅读 2018-10-27 13:15:46
    -- 下面列表 --> <image src='{{item.img}}'></image> 自营</text><text class='title'>{{item.title}} <text wx:for="{{item.world}}" class='text{{index}}'>{{item.message}} ...
  • 主要给大家介绍了关于微信小程序下拉刷新PullDownRefresh的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多
  • 本文实例为大家分享了微信小程序实现列表下拉刷新上拉加载的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载...
  • 微信小程序下拉组件

    2020-11-14 14:42:04
    result.push({ id, name }) } } this.setData({ current: Object.assign({}, this.data.options[0]), result: result }) } } }) 引入select组件,index.json代码如下 { "usingComponents": { "select": "../...
  • 微信小程序原生wxml没有下拉框,还得自己写自定义组价好坑!!! 这个是最后效果图,是一个含下拉框的投票界面: 直接上自定义组件代码(使用了iview weapp组件): JS部分 // pages/complain/complain.js var app ...
  • WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 Video 弹...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,701
精华内容 2,280
关键字:

微信小程序下拉列表组件

微信小程序 订阅