精华内容
下载资源
问答
  • 主要为大家详细介绍了微信小程序下拉框组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序下拉框组件

    千次阅读 2020-04-19 18:03:44
    小程序有时需要使用下拉框选项,通常我会使用 picker 组件实现。pick 组件使用 mode 来区分类别,默认使用普通选择器就行。 除了上述方式,我们也可以通过自定义组件实现,代码如下: //index.js Component({ /*...

    小程序有时需要使用下拉框选项,通常我会使用 picker 组件实现。pick 组件使用 mode 来区分类别,默认使用普通选择器就行。

    除了上述方式,我们也可以通过自定义组件实现,代码如下:

    //index.js
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        propArray: {
          type: Array,
        }
      },
      /**
       * 组件的初始数据
       */
      data: {
        selectShow: false,//初始option不显示
        selectText: "请选择",//初始内容
      },
      /**
       * 组件的方法列表
       */
      methods: {
        //option的显示与否
        selectToggle: function () {
          var nowShow = this.data.selectShow;//获取当前option显示的状态
     
          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 || nowData[nowIdx].value || nowData[nowIdx];//当前点击的内容
          //再次执行动画,注意这里一定,一定,一定是this.animation来使用动画
          this.setData({
            selectShow: false,
            selectText: nowText,
          })
          this.triggerEvent('select', nowData[nowIdx])
        }
      }
    })
    

    代码如下:

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

    样式实现:

    /* components/single-dropdown-select/index.wxss */
     
    .ms-content-box {
      width: 120px;
    }
    .ms-content {
      border: 1px solid #e2e2e2;
      background: white;
      font-size: 16px;
      position: relative;
      height: 30px;
      line-height: 30px;
    }
    .ms-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 40px 0 6px;
      font-size: 14px;
    }
    .ms-options {
      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;
    }
    .ms-option {
      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;
    }
    .ms-item:first-child {
      border-top: none;
    }
    .icon-right, .icon-down, .icon-up {
      display: inline-block;
      padding-right: 13rpx;
      position: absolute;
      right: 20rpx;
      top: 10rpx;
    }
    .icon-right::after, .icon-down::after, .icon-up::after {
      content: "";
      display: inline-block;
      position: relative;
      bottom: 2rpx;
      margin-left: 10rpx;
      height: 10px;
      width: 10px;
      border: solid #bbb;
      border-width: 2px 2px 0 0;
    }
    .icon-right::after {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    .icon-down::after {
      bottom: 14rpx;
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    .icon-up::after {
      bottom: 0rpx;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    

    如何使用呢?首先在引用组件的页面,引入组件:

    {
      "usingComponents": {
        "single-dropdown-select": "/components/single-dropdown-select/index"
      }
    }
    

    在页面中,直接使用 引入的组件,代码如下:

    <view>
        <single-dropdown-select prop-array='{{selectArray}}' bind:select='select' />
    </view>
    

    同时传入数据和监听子组件向父组件传递的 select 方法。

    Page({
      data: {
        selectArray: [{
          "id": "10",
          "value": "会计类"
        }, {
          "id": "21",
          "text": "工程类"
        }, '技术类', {'value': '其他'}]
      },
      select: function(e) {
        console.log(e.detail)
      }
    })
    

     

    展开全文
  • 微信小程序下拉框组件使用方法

    万次阅读 2019-01-17 21:50:18
    这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 适用场景 1、省市三级联动 2、出生日期...

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

    适用场景

    1、省市三级联动
    2、出生日期选择
    3、性别选择
    4、一般性的下拉选择等

    一、省市三级联动使用

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

    //.wxml
    <picker mode="region" bindchange="bindViewEvent" data-model="component"
    data-method="bindSelect" data-name="region" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
       当前选择:{{region[0]}},{{region[1]}},{{region[2]}}
    </view>
    </picker>
    

    二、出生日期选择

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

    <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindViewEvent" data-model="component" data-method="bindSelect" date-mode="date" data-name="date">
      <view class="picker">
      {{date}}
      </view>
    

    三、性别选择

    注意,不填mode默认为selector,range=”一维数组”,value=”当前选中索引”

    <picker bindchange="bindViewEvent" data-model="component" data-method="bindSelect" data-name="index" value='{{index}}' range="{{gender}}">
      <view class="label-right">
        {{gender[index]}}
      </view>
    </picker>
    

    以上都需要在.js里设置相关初始变量!

     var app = getApp();
     
     data: {
     
      region:['湖南','长沙','岳麓'],
      date:'2010-10-10',
      gender:['男','女'],
      index:0
     },
     //欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:619586920
     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();
     }
     //欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:619586920
     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;
     }
     //欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:619586920
     /*
     * 选择图片
     */
     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();
     }
     //欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:619586920
     /*
     * 删除图片
     */
     del(index) {
     
      let self = this;
     
      self.that.data[self.name].splice(index, 1);
     
      self.show();
     }
     
     
    }
    module.exports = picUploader;
    

    结语

    感谢您的观看,如有不足之处,欢迎批评指正。
    #获取资料
    本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
    对web开发技术感兴趣的同学,欢迎加入Q群:619586920,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
    最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

    展开全文
  • 微信小程序下拉框组件使用

    万次阅读 2018-01-23 21:34:32
    //绑定下拉框选择事件 bindSelect(data){ let self = this ; let mode = data.currentTarget.dataset.mode; let name = data.currentTarget.dataset.name; let picker = new select({ that: ...

    适用场景

    1、省市三级联动
    2、出生日期选择
    3、性别选择
    4、一般性的下拉选择等

    一、省市三级联动使用

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

    //.wxml
    <picker mode="region" bindchange="bindViewEvent" data-model="component" 
    data-method="bindSelect" data-name="region" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
          当前选择:{{region[0]}}{{region[1]}}{{region[2]}}
    </view>
    </picker>
    

    二、出生日期选择

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

    <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindViewEvent" data-model="component" data-method="bindSelect" date-mode="date" data-name="date">
        <view class="picker">
        {{date}}
        </view>
    </picker>

    三、性别选择

    注意,不填mode默认为selector,range=”一维数组”,value=”当前选中索引”

    <picker bindchange="bindViewEvent" data-model="component" data-method="bindSelect" data-name="index"  value='{{index}}' range="{{gender}}">
        <view class="label-right">
            {{gender[index]}}
        </view>
    </picker>

    以上都需要在.js里设置相关初始变量!

    //.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 下拉框组件.zip
  • 主要介绍了微信小程序 select 下拉框组件功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序 select 下拉框组件 效果图 由于录屏图片质量不好,所以效果图你会看到有残影(捂脸)
  • </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再次封装基础组件文档

    展开全文
  • 微信小程序的简单下拉框组件

    万次阅读 2018-09-17 16:17:38
    网上的下拉框组件都不是自己想要的于是就自己写了一个。 wxml {{dropdownData[index]}} {{selectData[index]}} 然后是js部分 data: { dropdownData:...
  • 一、源码地址 ... 二、效果图 录屏图片质量较差,所以大家会看到残影(捂脸) ...三、组件源码 1. select.wxml <view class="select-box"> <view class="select-current" catchtap=...
  • 1.组件 select.wxml <!--Componet/select/select.wxml--> <view class='com-selectBox'> <view class='com-sContent' bindtap='selectToggle'> <input value="{{nowText==''?propArra...
  • 微信小程序 简单易用 下拉框组件

    千次阅读 2019-01-19 09:23:45
    由于公司项目需要,自己开发了一个微信小组件——Miche_mini_select下拉框     本下拉框特点: 1.保证下拉框在最上层,不会被其他控件所遮挡 2.引用方便,直接引用组件即可,与页面耦合性低 3.使用方便,只...
  • 微信小程序原生wxml没有下拉框,还得自己写自定义组价好坑!!! 这个是最后效果图,是一个含下拉框的投票界面: 直接上自定义组件代码(使用了iview weapp组件): JS部分 // pages/complain/complain.js var app ...
  • 微信小程序-自定义下拉框组件

    千次阅读 2018-12-28 17:31:06
    微信小程序中没有select下拉选项框...方法参照《微信小程序-自定义组件》 第一步:创建组件 在pages同级目录下新建component目录,在当前目录下新建select文件夹,里面包含.js,,wxml,,json,,wxml四个文件。 ...
  • 主要介绍了微信小程序picker组件下拉框选择input输入框的实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,779
精华内容 3,111
关键字:

小程序下拉框组件