精华内容
下载资源
问答
  • 微信小程序下拉框组件
    2020-12-21 11:09:46

    这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。【推荐教程:小程序开发教程】

    适用场景

    1、省市三级联动

    2、出生日期选择

    3、性别选择

    4、一般性的下拉选择等

    一、省市三级联动使用

    注意mode = region,以及value = “一维数组”//.wxml

    data-method="bindSelect" data-name="region" value="{{region}}" custom-item="{{customItem}}">

    当前选择:{{region[0]}},{{region[1]}},{{region[2]}}

    二、出生日期选择

    注意mode = date,以及value = “日期字符串”

    {{date}}

    三、性别选择

    {{gender[index]}}

    以上都需要在.js里设置相关初始变量!var app = getApp();

    data: {

    region:['湖南','长沙','岳麓'],

    date:'2010-10-10',

    gender:['男','女'],

    index:0

    }

    bindViewEvent:function(e){

    app.process(this,e);

    }

    相关js类//component.js

    const select = require('../component/select.js');

    const upload = require('../component/upload.js');

    class component{

    constructor(com, that) {

    this.com = com;

    this.that = that;

    }

    //绑定下拉框选择事件

    bindSelect(data){

    let self = this;

    let mode = data.currentTarget.dataset.mode;

    let name = data.currentTarget.dataset.name;

    let picker = new select({

    that: self.that,

    mode: mode,

    name: name

    });

    picker.change(data.detail.value);

    }

    //点击事件,传递参数为e.currentTarget.dataset

    bindImageChoose(data){

    //图片上传

    this.uploader = new upload({

    that: that,

    name: data.name,

    mode: data.mode,

    count: data.count || 9

    });

    this.uploader.choose();

    }

    bindImageDel(data){

    //图片上传

    this.uploader = new upload({

    that: that,

    name: data.name,

    mode: data.mode,

    count: data.count || 9

    });

    this.uploader.del(data.index);

    }

    }

    module.exports = component;

    //select.js

    /*

    * 下拉框对象

    */

    class picker{

    constructor(data){

    this.that = data.that;

    this.name = data.name || 'date';

    this.mode = data.mode || 'selector';

    }

    show(name,data){

    let view = {};

    view[name] = data;

    this.that.setData(view);

    }

    change(data){

    let self = this;

    self.show(self.name, data);

    }

    }

    module.exports = picker;

    //upload.js

    class picUploader {

    constructor(data) {

    this.that = data.that;

    this.name = data.name;

    this.mode = data.mode || 1;

    this.count = this.model == 1 ? 1 : data.count || 9;

    }

    /*

    * 选择图片

    */

    choose() {

    const self = this;

    wx.chooseImage({

    count: (self.count - self.that.data[self.name].length),

    sizeType: ['original', 'compressed'],

    sourceType: ['album', 'camera'],

    success: function (res) {

    var tempFilePaths = res.tempFilePaths;

    self.append(tempFilePaths);

    }

    })

    }

    /*

    * 显示图片

    */

    show() {

    let self = this;

    let view = {};

    view[self.name] = self.that.data[self.name];

    self.that.setData(view);

    }

    /*

    * 追加图片

    */

    append(data) {

    const self = this;

    for (let i = 0; i < data.length; i++) {

    self.that.data[self.name].push(data[i]);

    }

    self.show();

    }

    /*

    * 删除图片

    */

    del(index) {

    let self = this;

    self.that.data[self.name].splice(index, 1);

    self.show();

    }

    }

    module.exports = picUploader;

    更多相关内容
  • 主要介绍了微信小程序 select 下拉框组件功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要为大家详细介绍了微信小程序下拉框组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 》》下拉组件 1.组件结构: 2.index.js: 1 //index.js 2 Component({ 3 /** 4 * 组件的属性列表 5 */ 6 properties: { 7 propArray: { 8 type: Array, 9 } 10 }, 11 /** 12 * 组件的初始数据 13 *...

    》》下拉组件

    1.组件结构:

    2.index.js:

    复制代码

     1 //index.js
     2 Component({
     3   /**
     4    * 组件的属性列表
     5    */
     6   properties: {
     7     propArray: {
     8       type: Array,
     9     }
    10   },
    11   /**
    12    * 组件的初始数据
    13    */
    14   data: {
    15     selectShow: false,//初始option不显示
    16     selectText: "请选择",//初始内容
    17   },
    18   /**
    19    * 组件的方法列表
    20    */
    21   methods: {
    22     //option的显示与否
    23     selectToggle: function () {
    24       var nowShow = this.data.selectShow;//获取当前option显示的状态
    25 
    26       this.setData({
    27         selectShow: !nowShow
    28       })
    29     },
    30     //设置内容
    31     setText: function (e) {
    32       var nowData = this.properties.propArray;//当前option的数据是引入组件的页面传过来的,所以这里获取数据只有通过this.properties
    33       var nowIdx = e.target.dataset.index;//当前点击的索引
    34       var nowText = nowData[nowIdx].text || nowData[nowIdx].value || nowData[nowIdx];//当前点击的内容
    35       //再次执行动画,注意这里一定,一定,一定是this.animation来使用动画
    36       this.setData({
    37         selectShow: false,
    38         selectText: nowText,
    39       })
    40       this.triggerEvent('select', nowData[nowIdx])
    41     }
    42   }
    43 })

    复制代码

    3.index.json:

    1 {
    2   "component": true,
    3   "usingComponents": {}
    4 }

    4.index.wxml:

    复制代码

    1 <view class='ms-content-box'>
    2     <view class='ms-content' bindtap='selectToggle'>
    3         <view class='ms-text'>{{selectText}}</view>
    4          <view class="{{selectShow ? 'icon-up' : 'icon-down'}}"></view>
    5     </view>
    6     <view class='ms-options' wx:if="{{selectShow}}">
    7         <view wx:for="{{propArray}}" data-index="{{index}}" wx:key='index' class='ms-option' bindtap='setText'>{{item.text || item.value || item}}</view>
    8     </view>
    9 </view>

    复制代码

    5.index.wxss:

    复制代码

     1 /* components/single-dropdown-select/index.wxss */
     2 
     3 .ms-content-box {
     4   width: 120px;
     5 }
     6 
     7 .ms-content {
     8   border: 1px solid #e2e2e2;
     9   background: white;
    10   font-size: 16px;
    11   position: relative;
    12   height: 30px;
    13   line-height: 30px;
    14 }
    15 
    16 .ms-text {
    17   overflow: hidden;
    18   text-overflow: ellipsis;
    19   white-space: nowrap;
    20   padding: 0 40px 0 6px;
    21   font-size: 14px;
    22 }
    23 
    24 .ms-options {
    25   background: white;
    26   width: inherit;
    27   position: absolute;
    28   border: 1px solid #e2e2e2;
    29   border-top: none;
    30   box-sizing: border-box;
    31   z-index: 3;
    32   max-height: 120px;
    33   overflow: auto;
    34 }
    35 
    36 .ms-option {
    37   height: 30px;
    38   line-height: 30px;
    39   border-top: 1px solid #e2e2e2;
    40   padding: 0 6px;
    41   text-align: left;
    42   overflow: hidden;
    43   text-overflow: ellipsis;
    44   white-space: nowrap;
    45   font-size: 14px;
    46 }
    47 
    48 .ms-item:first-child {
    49   border-top: none;
    50 }
    51 
    52 .icon-right, .icon-down, .icon-up {
    53   display: inline-block;
    54   padding-right: 13rpx;
    55   position: absolute;
    56   right: 20rpx;
    57   top: 10rpx;
    58 }
    59 
    60 .icon-right::after, .icon-down::after, .icon-up::after {
    61   content: "";
    62   display: inline-block;
    63   position: relative;
    64   bottom: 2rpx;
    65   margin-left: 10rpx;
    66   height: 10px;
    67   width: 10px;
    68   border: solid #bbb;
    69   border-width: 2px 2px 0 0;
    70 }
    71 
    72 .icon-right::after {
    73   -webkit-transform: rotate(45deg);
    74   transform: rotate(45deg);
    75 }
    76 
    77 .icon-down::after {
    78   bottom: 14rpx;
    79   -webkit-transform: rotate(135deg);
    80   transform: rotate(135deg);
    81 }
    82 
    83 .icon-up::after {
    84   bottom: 0rpx;
    85   -webkit-transform: rotate(-45deg);
    86   transform: rotate(-45deg);
    87 }

    复制代码

     

    》》使用方式(引用组件的页面):

    1.pindex.js:

    复制代码

     1 Page({
     2 
     3   /**
     4    * 页面的初始数据
     5    */
     6   data: {
     7     selectArray: [{
     8       "id": "10",
     9       "value": "会计类"
    10     }, {
    11       "id": "21",
    12       "text": "工程类"
    13     }, '技术类', {'value': '其他'}]
    14   },
    15 
    16   select: function(e) {
    17     console.log(e.detail)
    18   }
    19 
    20 })

    复制代码

    2.pindex.json:

    复制代码

    1 {
    2   "navigationBarTitleText":"下拉测试",
    3   "usingComponents": {
    4     "single-dropdown-select": "/components/single-dropdown-select/index"
    5   }
    6 }

    复制代码

    3.pindex.wxml:

    复制代码

    1 <view class="weui-cell">
    2     <view class="weui-cell__hd">类型:</view>
    3     <view class="weui-cell__bd">
    4       <single-dropdown-select prop-array='{{selectArray}}'  bind:select='select' />
    6     </view>
    7   </view>

    复制代码

     4.效果图:

    展开全文
  • 最近在做一个项目的时候,需要用到下拉框搜索,网上搜了半天没找到想要的,决心自己动手写一个。 首先看下效果图: 左边是输入框,可以进行模糊查询,右边图标进行选择。 代码部分,我定义了五个参数,和一个...
  • 小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉  这里为了更清楚的显示层级 就把源码直接复制过来了 商品金额 ¥99.00 <!--下拉框 --> <text>{{tihuoWay}} <image ...
  • 主要介绍了微信小程序picker组件下拉框选择input输入框的实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • 主要介绍了微信小程序下拉框功能的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序中没有select下拉选项框,所以只有自定义。自定义的话,可以选择模板的方式,也可以选择组件的方式来创建。 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了。 ...
  • 在最近的微信小程序开发中,遇到一个比较坑的界面开发,说坑并不是因为它难,而是这其中包括了太多的开发时所要填的坑了,今天准备将这些填完的小坑一个个刨出来仔细啃啃,做一个demo分享一下。 需求分析 简单梳理...
  • 资源描述资源描述资源描述:微信小程序自定义下拉框,点击空白处隐藏
  • ④ 再点击下拉框值还在,也还可以自定义输入 上代码 wxml代码 <view class="datum-item clearfix"> <view class="datum-title"> <text>銀行名稱</text> </view&...

    功能说明

    ① 选择自定义输入

     

    ② 弹出输入框进行输入

     

     ③ 输入完后自动selected

    ④ 再点击下拉框值还在,也还可以自定义输入

     

    上代码

    wxml代码

    <view class="datum-item clearfix">
            <view class="datum-title">
                <text>銀行名稱</text>
            </view>
            <view class="datum-con">
                <picker bindchange="bindBankName" value="{{BankName_index}}" range="{{BankName_arr}}" name="BankName">
                    <view class="datum-date" wx:if="{{BankName_index==''}}">
                      請選擇存款銀行
                    </view>
                    <view class="datum-date hover" wx:else>
                        {{BankName_arr[BankName_index]}}
                    </view>
                </picker>
            </view>
        </view>

    bindBankName    BankName_arr     BankName_index

    以上3个关键词是我的项目的,你自己的项目可自行更改,wxml和js要一起修改

    js的

    BankName_arr     数组可删掉加自己要的值

    BankName_index  为0即可,无需修改

     js代码

    Page({
        data: {
            BankName_arr: [ "招商銀行","自定义输入" ],
            BankName_index: 0
        },
        onLoad: function(e) {
        },
    
        bindBankName: function(e) {
          var that=this;
          if(that.data.BankName_arr[e.detail.value]=="自定义输入"){
            wx.showModal({
              editable:true,
              placeholderText: '请输入存款银行',
              success: function(res) {  
                
                if (res.confirm) {
                  console.log("自定义存款银行", res.content)
                  that.setData({
                    BankName_arr: that.data.BankName_arr.concat(res.content),
                    BankName_index: that.data.BankName_arr.length
                  });
                  console.log("BankName_arr",  that.data.BankName_arr)
                }
    
              }
             })
          }else{
            this.setData({
              BankName_index: e.detail.value
            });
          }
          
      },
    
        onShareAppMessage: function() {}
    });

    已经写的很明白了吧?已经删掉不必要的代码了,简洁明了

    展开全文
  • </picker> </div> </template> <script> export default { name: 'dhSearch', props: { // 下拉框数据来源 list: { type: Array, default () { return [] } }, // 组件宽度 width: { type: String, default: '392rpx...

    初始下拉选择如(图一)
    在这里插入图片描述
    最终效果如(图二)
    在这里插入图片描述

    思路

    左边是输入框,可以进行模糊查询,右边图标进行选择(简单就是根据input输入值进行过滤)

    具体代码

    <template>
      <div class="dh-search" :style="dhSearchStyle">
        <input
          v-model.trim="pickerValue"
          :placeholder="placeholder"
          class="picker-item-input"
          :class="pickerValue?'t-color-dark':'t-color-placeholder'"
          @input.stop="bindkeyinput"
        />
        <picker
          class="picker-box flex-box flex-ver-v"
          @change.stop="bindchange"
          :value="index"
          :range-key="pickerLab"
          :range="dropDownData"
        >
          <van-icon class="picker-icon t-color-placeholder" name="arrow-down" />
        </picker>
      </div>
    </template>
    <script>
    export default {
      name: 'dhSearch',
      props: {
        // 下拉框数据来源
        list: {
          type: Array,
          default () {
            return []
          }
        },
        // 组件宽度
        width: {
          type: String,
          default: '392rpx'
        },
        // 组件高度
        height: {
          type: String,
          default: '72rpx'
        },
        // 提示语
        placeholder: {
          type: String
        },
        // 下拉选择展示的文字
        selectLabel: {
          type: String
        },
        // list value字段
        pickerVal: {
          type: String,
          default: 'driverCode'
        },
        // list label字段
        pickerLab: {
          type: String,
          default: 'plateNum'
        }
      },
      data () {
        return {
          // 输入框值
          pickerValue: this.selectLabel,
          // 下拉框下标
          index: 0,
          // 下拉框数据
          dropDownData: this.list
        }
      },
      computed: {
        dhSearchStyle () {
          return `width:${this.width};height:${this.height}`
        }
      },
      watch: {
        list: {
          handler (val) {
            this.dropDownData = val
          }
        },
        selectLabel: {
          handler (val) {
            this.pickerValue = val
          }
        }
      },
      methods: {
        // 文本框输入事件
        bindkeyinput (event) {
          console.log('文本框输入事件', event)
          const value = event.mp.detail.value
          const list = JSON.parse(JSON.stringify(this.list))
          const array = list.filter(item => item[this.pickerLab].indexOf(value) !== -1).map(item => {
            const result = JSON.parse(JSON.stringify(item))
            return result
          })
          this.dropDownData = array
        },
        // 下拉框选择事件
        bindchange (event) {
          const idx = event.mp.detail.value
          // const val = this.dropDownData[idx][this.pickerVal]
          this.index = idx
          // this.dropDownData = this.list
          this.pickerValue = this.dropDownData[idx][this.pickerLab]
          // console.log('下拉框选择事件', event, this.dropDownData)
          this.$emit('action', { index: idx, list: this.dropDownData })
        }
      }
    }
    </script>
    <style lang="scss">
    .dh-search {
      margin-left: 30rpx;
      background: #f8f8f8;
      border-radius: 40rpx;
      font-size: 14px;
      line-height: 80rpx;
      padding-left: 30rpx;
      display: flex;
      .picker-item-input {
        margin-left: 10rpx;
        width: 80%;
        height: 100%;
        line-height: 60rpx;
        font-size: 14px;
      }
      .picker-box {
        width: 30%;
        height: 100%;
        justify-content: flex-end;
        .picker-icon {
          margin-right: 35px;
          width: 100%;
          height: 72rpx;
        }
      }
    }
    </style>
    
    

    具体使用

    <dh-search
                placeholder="请选择运送物资"
                :list="materialList"
                @action="dropDownChange($event,'materialCode')"
                pickerLab="materialCategoryName"
                pickerVal="materialCode"
                :selectLabel="autoQueueInfo.materialCategoryName"
              />
    

    参考了雨vs夜

    相关文章

    axios二次封装,接口统一存放,满足RESTful风格


    keep-alive不能缓存多层级路由(vue-router)菜单问题解决


    基于ElementUi再次封装基础组件文档

    展开全文
  • GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件 二、效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三、组件源码 1. select.wxml <view class="select-box"> <...
  • 微信小程序 select 下拉框组件 效果图 由于录屏图片质量不好,所以效果图你会看到有残影(捂脸)
  • 微信小程序原生的下拉框组件

    千次阅读 2021-11-24 17:37:42
    近日开发微信小程序时,需要一个下拉框组件,使用和PC端下拉框一样的方式会显得很丑,于是发现微信官方API有个wx.showActionSheet,但是有诸多限制,例如:最大长度只能是6项,多选等等。 由于业务需要,下面用到...
  • 主要介绍了微信小程序 picker 组件详解及简单实例的相关资料,需要的朋友可以参考下
  • 微信小程序中下拉选择中带手动输入搜索的实现
  • { classStyle ? 'overflow: hidden;... false }) }, 当点击组件下拉框的时候 设置 classStyle变量 为 true 这样就可以禁止整个页面滚动 关闭这个时候组件的时候 把 classStyle变量设置为 false 

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 923
精华内容 369
关键字:

微信小程序下拉框组件

微信小程序 订阅