精华内容
下载资源
问答
  • 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;

    更多相关内容
  • 最近在做一个项目的时候,需要用到下拉框搜索,网上搜了半天没找到想要的,决心自己动手写一个。 首先看下效果图: 左边是输入框,可以进行模糊查询,右边图标进行选择。 代码部分,我定义了五个参数,和一个...
  • 微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top-text'> 选择接收班级 <!-- 下拉框 --> <text>{{grade_name}} <image src='/images/icon/down.png'></image> &...
  • 主要为大家详细介绍了微信小程序实现下拉框功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了微信小程序 select 下拉框组件功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了微信小程序select下拉框实现效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要为大家详细介绍了微信小程序下拉框组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 资源描述资源描述资源描述:微信小程序自定义下拉框,点击空白处隐藏
  • 微信小程序下拉框选择

    千次阅读 2021-04-16 19:11:31
    this.data.select }) }, /** * 已选下拉框 */ mySelect(e) { console.log(e) var name = e.currentTarget.dataset.name this.setData({ grade_name: name, select: false }) }, }) wxss代码 /* 顶部 */ .top{ width:...

    在这里插入图片描述

    wxml代码

    <view class='top-selected' bindtap='bindShowMsg'>
      <text>{{grade_name}}</text>
    </view>
    <!-- 下拉需要显示的列表 -->
    <view class="select_box" wx:if="{{select}}">
      <view wx:for="{{grades}}" wx:key="unique">
        <view class="select_one" bindtap="mySelect" data-name="{{item}}">{{item}}</view>
      </view>
    </view>
    

    js代码

    Page({
      data: {
        select:false,
        grade_name:'--请选择--',
        grades: [
          '北京市',
          '深圳市',
          '上海市',
          '广州市',
         ]
      },
        bindShowMsg() {
          this.setData({
          select: !this.data.select
          })
        },
        /**
         * 已选下拉框
         */
        mySelect(e) {
          console.log(e)
          var name = e.currentTarget.dataset.name
          this.setData({
          grade_name: name,
          select: false
          })
        },  
     })
    

    wxss代码

    /* 顶部 */
    .top{
      width: 400rpx ;
      height: 80rpx;
      padding: 0 20rpx;
      border: 1px solid;
      line-height: 80rpx;
      font-size: 34rpx;
      border-bottom: 1px solid #000;
     }
    
     /* 下拉框 */
     .top-selected{
      width: 100px;
      border: 1px solid #ccc;
      padding: 0 10rpx;
     }
     /* 下拉内容 */
     .select_box {
      background-color: #fff;
      width: 100px;
      position: relative;
      right: 0;
      z-index: 1;
      text-align: left;
      font-size: 30rpx;
     }
     .select_one {
       padding-left: 20rpx;
       width: 100%;
       height: 60rpx;
       position: relative;
       line-height: 60rpx;
       border: 1px solid #ccc;
     }
    
    展开全文
  • 'driverCode' }, // list label字段 pickerLab: { type: String, default: 'plateNum' } }, data () { return { // 输入框值 pickerValue: this.selectLabel, // 下拉框下标 index: 0, // 下拉框数据 dropDownData:...

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

    思路

    左边是输入框,可以进行模糊查询,右边图标进行选择(简单就是根据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再次封装基础组件文档

    展开全文
  • 》》下拉组件 1.组件结构: 2.index.js: 1 //index.js 2 Component({ 3 /** 4 * 组件的属性列表 5 */ 6 properties: { 7 propArray: { 8 type: Array, ...15 selectShow: false,//初始opti

    》》下拉组件

    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.效果图:

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

    2018-11-06 13:47:00
    微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top'> <view class='top-text'> 选择接收班级</view> <!-- 下拉框 --> <view class='top-...
  • ④ 再点击下拉框值还在,也还可以自定义输入 上代码 wxml代码 <view class="datum-item clearfix"> <view class="datum-title"> <text>銀行名稱</text> </view&...
  • 主要介绍了微信小程序picker组件下拉框选择input输入框的实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • js文件 Page({ data:{ //户型 这是一个本地的对象,然后绑定到页面上 pic_array: [ { id: 13, name: ‘1室1厅1卫‘ }, { id: 14, name:...
  • 微信小程序 下拉菜单 看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; ...
  • 主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

空空如也

空空如也

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

微信小程序下拉框

微信小程序 订阅
友情链接: tracficlight.rar