精华内容
下载资源
问答
  • 小程序下拉框
    2021-12-14 13:44:04

    页面

     <view class="info info-name">
    				<label class="info-lable">所属街道</label>
    		
    				<picker bindchange="bindPickerChange2" range-key='{{"cboText"}}' style="float:left; margin-left: 5%" range="{{AreaCode}}">
    					<view>
    						<text style="color:#848484">{{AreaCode[qx].cboText}}</text>
    					</view>
    				</picker>
    			</view>
    

    JS

    data{
      AreaCode: [{
          cboValue: '',
          cboText: '请选择区县'
        }],
        selectQA: '',
        qx:0
        }
    
    onload:function(options)
    {
    this.GetAreaCode()//调用查询方法
    //回填下拉框数值
    查询成功后再setData中赋值
    this.setData({
    selectQA:.areaCode,
    })
    }
      GetAreaCode: function () {
    
        var that = this;
        wx.request({
          url: app.globalData.ApiPath + 'api/Common/GetComAreaCodeList',
          method: 'post',
          header: {
            'content-type': 'application/json' // 默认值
          },
          success(res) {
    
            that.setData({
              ['AreaCode[0].cboValue']: '',
              ['AreaCode[0].cboText']: '请选择区县'
            })
    
            for (var i = 0; i < res.data.length; i++) {
           
              var cboValue = 'AreaCode[' + (i + 1) + '].cboValue';
              var cboText = 'AreaCode[' + (i + 1) + '].cboText';
              //console.log(cboValue,cboText)
              that.setData({
                [cboValue]: res.data[i].areaCode,
                [cboText]: res.data[i].areaName
              })
            }
            if (that.data.selectQA != "") {
              for (let i = 0; i < that.data.AreaCode.length; i++) {
                if (that.data.AreaCode[i].cboValue == that.data.selectQA) {
                  that.setData({
                    qx: i
                  })
                }
              }
            }
            //console.log(that.data.AreaCode)
          }
        })
      },
      //获取下拉框值
       bindPickerChange2: function (e) {
    
        //console.log('picker发送选择改变,携带值为', e.detail.value)
        var areacode = this.data.AreaCode[e.detail.value].cboValue;
        this.setData({
          qx: e.detail.value,
          selectQA: areacode
        })
       
      },
    
    更多相关内容
  • 主要介绍了微信小程序下拉框搜索功能的实现方法,内容比较简单容易理解 ,需要的朋友可以参考下
  • 主要介绍了微信小程序下拉框功能的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 一、源码地址 ...二、效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三、组件源码 1. select.wxml ... <text class=current-name>{{current.name}} ...view class=option-list wx:if={{isShow}} catchtap
  • 主要为大家详细介绍了微信小程序实现下拉框功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了微信小程序下拉框组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉  这里为了更清楚的显示层级 就把源码直接复制过来了 商品金额 ¥99.00 <!--下拉框 --> <text>{{tihuoWay}} <image ...
  • 微信小程序下拉框选择

    千次阅读 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再次封装基础组件文档

    展开全文
  • 'picker_gray': ''}}"> {{categoryOneTxt}} 使用微信小程序提供的picker标签完成选择器效果,这里对属性进行一下说明: bindchange: 点击确认后触发的方法 value: 用于获取需要的下标 这里很麻烦,绑定的是下标,...

    效果:

    <view class="weui-cell weui-cell_input">
                  <view class="weui-cell__hd">
                        <view class="weui-label">经营类目</view>
                   </view>
                   <view class="weui-cell__bd">
                         <picker bindchange="pickerChange" value="{{categoryOneIndex}}" range="{{categoryOneArr}}" range-key="firstMcc" data-type="categoryOne">
                            <view class="{{categoryOneTxt == '选择一级经营类目' ? 'picker_gray': ''}}">
                                        {{categoryOneTxt}}
                             </view>
                            </picker>
                    </view>
     </view>
    

    使用微信小程序提供的picker标签完成选择器效果,这里对属性进行一下说明:
    bindchange: 点击确认后触发的方法
    value: 用于获取需要的下标 这里很麻烦,绑定的是下标,数据回显的时候要先查到本条数据的下标位置才能回显, 需要多一步
    range: 要加载的列表
    range-key: 列表内容,例如用户列表中要展示每个用户姓名,填入字段名即可
    data-xxx: 用于获取选中记录的一些附加信息,data-是开头,后面名字自己随便取

    data里的数据

      // 类目 一级  
        categoryOneIndex: 0,
        categoryOneTxt: "选择一级经营类目", 
        categoryOneArr: [],
    

    事件:

    pickerChange(e) {
     if (data.type == "categoryOne") { 
          let firstMcc = this.data.categoryOneArr[e.detail.value].firstMcc;
          this.setData({
            categoryOneMcc: firstMcc,
            categoryOneIndex: e.detail.value,
            categoryOneTxt: firstMcc,
          }); 
        } 
    }
    

    categoryOneArr数据格式:

    在这里插入图片描述

    展开全文
  • 资源描述资源描述资源描述:微信小程序自定义下拉框,点击空白处隐藏
  • 》》下拉组件 1.组件结构: 2.index.js: 1 //index.js 2 Component({ 3 /** 4 * 组件的属性列表 5 */ 6 properties: { 7 propArray: { 8 type: Array, ...15 selectShow: false,//初始opti
  • 这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。【推荐教程:小程序开发教程】适用场景1、...
  • { classStyle ? 'overflow: hidden;... false }) }, 当点击组件下拉框的时候 设置 classStyle变量 为 true 这样就可以禁止整个页面滚动 关闭这个时候组件的时候 把 classStyle变量设置为 false 
  • 主要介绍了微信小程序picker组件下拉框选择input输入框的实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • ④ 再点击下拉框值还在,也还可以自定义输入 上代码 wxml代码 <view class="datum-item clearfix"> <view class="datum-title"> <text>銀行名稱</text> </view&...
  • 小程序下拉框的实现

    千次阅读 2018-11-09 15:15:38
    文章来自:源码在线https://shengli.me/wxxcx/198.html       js    

空空如也

空空如也

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

小程序下拉框

友情链接: FTPClient01_src.zip