精华内容
下载资源
问答
  • 主要为大家详细介绍了微信小程序实现下拉框功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了微信小程序select下拉框实现效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序自定义下拉框实现根据输入过滤下拉项
  • 微信小程序 select 下拉框组件.zip
  • 主要介绍了微信小程序 select 下拉框组件功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序 select 下拉框组件 效果图 由于录屏图片质量不好,所以效果图你会看到有残影(捂脸)
  • 资源描述资源描述资源描述:微信小程序自定义下拉框,点击空白处隐藏
  • 微信小程序select下拉框实现

    万次阅读 多人点赞 2018-08-11 15:11:03
    小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉  这里为了更清楚的显示层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'>...

    小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉

     这里为了更清楚的显示层级 就把源码直接复制过来了

    <view class='list-msg'>
        <view class='list-msg1'>
            <text>商品金额</text>
            <text>¥99.00</text>
        </view>
    <!--下拉框  -->
        <view class='list-msg2' bindtap='bindShowMsg'>
            <text>{{tihuoWay}}</text>
            <image style='height:20rpx;width:20rpx;' src='/images/down.png'></image>
        </view>
        <view class='list-msg1'>
            <text>运费</text>
            <text></text>免邮</view>
        <view class='list-msg1'>
            <text>实际付款</text>
            <text style='color:red'>¥99.00</text>
        </view>
    <!-- 下拉需要显示的列表 -->
        <view class="select_box" wx:if="{{select}}">
            <view class="select_one" bindtap="mySelect" data-name="重庆分店">重庆分店</view>
            <view class="select_one" bindtap="mySelect" data-name="东莞南城分店">东莞南城分店</view>
            <view class="select_one" bindtap="mySelect" data-name="东莞总店">东莞总店</view>
        </view>
    </view>
    

    下面是js代码

    Page({
    
        /**
         * 页面的初始数据
         */
        data: {
            select: false,
            tihuoWay: '门店自提'
        },
    
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
    
        },
        bindShowMsg() {
             this.setData({
                 select:!this.data.select
             })
        },
        mySelect(e) {
            var name = e.currentTarget.dataset.name
            this.setData({
                tihuoWay: name,
                select: false
            })
        },
    
    
        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {
    
        }
    })
    
    .list-msg {
        padding: 0 20rpx;
        background-color: #fff;
        position: relative;
    }
    
    .list-msg1 {
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .list-msg .list-msg2 {
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #ccc;
        padding: 0 10rpx;
    }
    
    .select_box {
        background-color: #eee;
        padding: 0 10rpx;
        width: 93%;
        position: absolute;
        top: 130rpx;
        z-index: 1;
        overflow: hidden;
        animation: myfirst 0.5s;
    }
    
    @keyframes myfirst {
        from {
            height: 0rpx;
        }
    
        to {
            height: 210rpx;
        }
    }
    
    .select_one {
        height: 60rpx;
        line-height: 60rpx;
        border-bottom: 1px solid #ccc;
    }

     

    展开全文
  • 微信小程序原生wxml没有下拉框,还得自己写自定义组价好坑!!! 这个是最后效果图,是一个含下拉框的投票界面: 直接上自定义组件代码(使用了iview weapp组件): JS部分 // pages/complain/complain.js var app ...

    微信小程序原生wxml没有下拉框,还得自己写自定义组件好坑!!!

    这个是最后效果图,是一个含下拉框的投票界面:

    在这里插入图片描述
    直接上自定义组件代码(使用了iview weapp组件):
    JS部分

    // pages/complain/complain.js
    var app = getApp();//这里是获url的
    const { $Toast } = require('../../dist/base/index');
    Page({
    
      formSubmit(e) {
        var that = this; 
        console.log(e.detail.value)
        if(e.detail.value.name==null||e.detail.value.number==null||e.detail.value.phoneNumber==null||e.detail.value.collageMajor==null||e.detail.value.detail==null||e.detail.value.name==''||e.detail.value.number==''||e.detail.value.phoneNumber=='' ||e.detail.value.collageMajor=='' ||e.detail.value.detail=='')
        {
            $Toast({
              content: '所有填写内容都不能为空哦!',
              type: 'warning'
            });
       }else{
        $Toast({
          content: '提交成功!',
          type: 'success'
        });
        wx.request({ 
          
          url: app.globalData.url+'addFan',  
          data:{
            'name': e.detail.value.name,   
            'number': e.detail.value.number,   
            'phoneNumber': e.detail.value.phoneNumber,   
            'collageMajor': e.detail.value.collageMajor,   
            'detail': e.detail.value.detail,   
          },  
          method: 'POST',  
          header: {
            'content-type': 'application/json'
          },
          success:function(res) {  
            console.log('submit success');    
          },  
          fail:function(res){  
              console.log('submit fail');  
          }
      }) 
    }
    },
    
      data: {
    
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })
    

    json部分

    {
      "usingComponents":
      {
           "i-input": "../../dist/input/index" ,
           "i-button": "../../dist/button/index",
           "i-card": "../../dist/card/index",
           "i-toast": "../../dist/toast/index"
      }
    }
    

    wxml部分

    <text> \n </text>
    <form bindsubmit="formSubmit">
        <i-input name="name"  title="反馈人" type="textarea" autofocus placeholder="姓名" />
        <i-input name="number" title="学号" type="textarea" placeholder="请输入学号" />
        <i-input name="phoneNumber"  type="textarea" title="联系电话" placeholder="请输入手机号" />
        <i-input name="collageMajor" type="textarea" title="学院及专业" placeholder="学院和专业简称"/>
        <i-input name="detail" type="textarea" title="反馈内容" placeholder="请输入详细反馈内容" />
    <text> \n </text>
    <i-card title="小贴士">
    <view slot="content">在这里可以反馈学校相关问题和对学校建设的意见,请一定要详细反馈自己的想法哦,这样问题才能得到最快的解决!</view>
    </i-card>
    <text> \n </text>
    <text> \n </text>
    <text> \n </text>
    <text> \n </text>
    <button form-type="submit" type="ghost">提交</button>
    </form>
    <i-toast id="toast" />
    

    主页面代码:

    <text >\n</text>
    <Select prop-array='{{selectArray}}' bind:myget='getDate1' now-text='历史与文化'></Select>
    
    <Select prop-array='{{selectArray2}}' bind:myget='getDate2' now-text='艺术与审美'></Select>
    
    <Select prop-array='{{selectArray3}}' bind:myget='getDate3' now-text='数学与自然科学'></Select>
    
    <Select prop-array='{{selectArray4}}' bind:myget='getDate4' now-text='社会、经济与管理'></Select>
    
    <Select prop-array='{{selectArray5}}' bind:myget='getDate5' now-text='创新创业'> </Select>
    
    <Select prop-array='{{selectArray6}}' bind:myget='getDate6' now-text='其他'></Select>
    <form bindsubmit="formSubmit">
     
    <input class="input" disabled="ture" name="like1" value="{{likeSome1}}">{{likeSome1}}</input> 
    <input class="input" disabled="ture" name="like2" value="{{likeSome2}}">{{likeSome2}}</input>
    <input class="input" disabled="ture" name="like3" value="{{likeSome3}}">{{likeSome3}}</input>
    <input class="input" disabled="ture" name="like4" value="{{likeSome4}}">{{likeSome4}}</input>
    <input class="input" disabled="ture" name="like5" value="{{likeSome5}}">{{likeSome5}}</input>
    <input class="input" disabled="ture" name="like6" value="{{likeSome6}}">{{likeSome6}}</input>
    <text class="txt">(点击提交按钮即可投票,一天只能进行一次投票哦!)</text>
    <button type="ghost"  open-type="getUserInfo" bindgetuserinfo="getUserInfo" bindtap="buttonForm" disabled="{{disabled}}" id="btn" class="btn" form-type="submit" >提交</button>
    </form> 
    <i-toast id="toast" />
    

    这里使用了骚操作,为了实现表单提交在页面下面写了6个透明的input框,只实现表单提交功能而不可见。

    /* pages/like/like.wxss */
    select{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5rpx;
    }
    .btn {
        width: 80%;
        height: 80%;
        margin-top: 20rpx;
        background-color: #ffcc66;
        color: rgb(255, 255, 255);
        border-radius: 98rpx;
    } 
    .input{
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        width: 300rpx;
        border-radius: 6rpx;
        margin: 0 0 3px 350rpx;
        opacity: 0.0;
    }
    .image{
        width: 100%;
        height: 30%;
    }
    .txt{
        font-size: 28rpx;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 6rpx;
        margin: 0 0 3px 35rpx;
    }
    
    {
      "usingComponents": {
        "i-checkbox-group": "../../dist/checkbox-group/index",
        "i-checkbox": "../../dist/checkbox/index",
        "Select": "../../Componet/Componet",
        "i-card": "../../dist/card/index",
        "i-toast": "../../dist/toast/index"
      }
    }
    

    js放上重点部分,这个页面整体的代码量还是挺大的,需要在下拉框选择的内容要放在
    data:{
    selectArray: [
    { “id”: “T020002”,//这个id没什么用可以不写
    “text”: “易经与中国文化” }
    ]
    }
    以这个格式使用(光选择部分我就写了600+行代码,手抽筋。。。)

    var app = getApp();
    const { $Toast } = require('../../dist/base/index');
    Page({  
    
        getUserInfo:function(e){
          var that = this
            wx.login({
                success: function(res) {
                  //console.log(app.globalData.url+'onlogin')
                  // 发送 res.code 到后台换取 openId, sessionKey, unionId
                  //if (res.code) {
                    
                    wx.request({
                      url: app.globalData.url+'onlogin',          //本地调试,是获取不到code的,所以要实现,还是得传服务
                      data: {
                        "code": res.code
                      },
                      header: {
                        'content-type': 'application/json' // 默认值
                      },
                      success: function (res) {
                       console.log(res.data.openid)
                       var OD=res.data.openid
      
        var userInfo = e.detail.userInfo
        console.log(userInfo.nickName)
        wx.request({    
            url: app.globalData.url+'time',  
            data:{
              'userName': e.detail.userInfo.nickName, 
                 "openId":OD
            },  
            method: 'GET',  
            header: {
              'content-type': 'application/json'
            },
            success:function(res) {  
                that.setData(
                    {
                    flag : res.data
                  }
                )
                console.log(res) 
            }, 
            
            fail:function(res){  
                console.log('submit fail');  
            },  
        })
    }
    })
    }
    })
      },
        formSubmit(e) 
      {
        var that = this
        console.log(this.data.flag);  
        setTimeout(function () { 
        if(that.data.flag == false)
        {
          $Toast({
              content: '投票成功!',
              type: 'success'
            })
    
    
          wx.request({    
            url: app.globalData.url+'zan',  
            data:{
              'like1': e.detail.value.like1,   
              'like2': e.detail.value.like2,   
              'like3': e.detail.value.like3,   
              'like4': e.detail.value.like4,   
              'like5': e.detail.value.like5, 
              'like6': e.detail.value.like6,  
            },  
            method: 'POST',  
            header: {
              'content-type': 'application/json'
            },
            success:function(res) {  
              console.log('submit success');    
            },  
            fail:function(res){  
                console.log('submit fail');  
            },  
        }) 
    }else{
        $Toast({
          content: '投票失败!可能是网络问题或24小时内重复投票哦!',
          type: 'warning'
        })
      }
      
    }
    , 1750)
      }
    

    这个页码应该还有很多可以优化的地方,但是我当时写的真的也非常费劲了,这里实现了自定义组件和主页面之间的通信。

    希望微信小程序赶紧推出下拉框组件吧!!!

    展开全文
  • 审批操作 请选择审批方式 {{array[index]}} 点击此处查找指定人员 .label-1, .label-2{ margin-bottom: 15px;... } }, onShareAppMessage: function () { } }) 下拉框选择 通过 和 拒绝 显示如图: 选择转办:
    <view class="main" style="margin-top:120rpx">
      <text>审批操作</text>
      <view class="weui-form-preview__item title" data-index='1' catchtap='switchDetailShow'>
      </view> 
      <view class="weui-form-preview__hd">
    		<view class="weui-form-preview__item">
    			<view class="db1">
    				<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    					<view class="weui-form-preview__label" style="font-size:24rpx;">请选择审批方式  <span style="color:black; margin-left:8rpx">{{array[index]}}</span></view>
    				</picker>
    			</view>
    			<view class="weui-form-preview__item" wx:if="{{showuIndex == 1}}">
    				<view style="background-color:#fff;height:11rpx;"></view>
    				<view bindtap="selectUserName" class="weui-form-preview__label" style="background-color:#fafafa;">点击此处查找指定人员</view>
    			</view>
    		</view>
    	</view>
    </view>
    
    
    .label-1, .label-2{
    
        margin-bottom: 15px;
    
    }
    
    .label-1__text, .label-2__text {
    
        display: inline-block;
    
        vertical-align: middle;
    
    }
    
    .label-1__icon {
    
        position: relative;
    
        margin-right: 10px;
    
        display: inline-block;
    
        vertical-align: middle;
    
        width: 18px;
    
        height: 18px;
    
        background: #CAE1FF;
    
    }
    
    .label-1__icon-checked {
    
        position: absolute;
    
        top: 3px;
    
        left: 3px;
    
        width: 12px;
    
        height: 12px;
    
        background: #1f1e1e;
    
    }
    
    .label-2__icon {
    
        position: relative;
    
        display: inline-block;
    
        vertical-align: middle;
    
        margin-right: 10px;
    
        width: 18px;
    
        height: 18px;
    
        background: rgb(144, 145, 143);
    
        border-radius: 50px;
    
    }
    
    .label-2__icon-checked {
    
        position: absolute;
    
        left: 3px;
    
        top: 3px;
    
        width: 12px;
    
        height: 12px;
    
        background: #111111;
    
        border-radius: 50%;
    
    }
    
    .section__title{
    
      display: block;
    
      text-align: center;
    
      color: #9400D3;
    
    }
    
    .content{
    
      padding-bottom: 15px;
    
    }
    
    Page({
      data: {
        statusBarHeight: getApp().globalData.statusBarHeight,
        navigationBarTitle: '',
        index: 0,
        showuIndex: 0,
        array: ['通过', '转办', '拒绝'],
        objectArray: [
          {
            id: 0,
            name: '通过 '
          },
          {
            id: 1,
            name: '转办'
          },
          {
            id: 2,
            name: '拒绝'
          },
        ],
      },
    
      onLoad: function (options) {
    
      },
      bindPickerChange(e) {
        console.log(e.detail);
        console.log('picker country 发生选择改变,携带值为', e.detail.value);
        // console.log(this.data.approvalType[e.detail.value].typeID);
        var typeID = e.detail.value;//this.data.approvalType[e.detail.value].typeID;
    
    
        // console.log(this.data.approvalType[e.detail.value].typeName);
        this.setData({
          index: e.detail.value,
        });
        console.log("typeID is :" + typeID);
        if (typeID == 1) {
          this.setData({
            showuIndex: 1,
          });
    
        }
        else {
          this.setData({
            showuIndex: 0,
          });
        }
    
      },
    
      onShareAppMessage: function () {
    
      }
    })
    

    下拉框选择 通过 和 拒绝 显示如图:
    在这里插入图片描述
    选择转办:
    在这里插入图片描述

    展开全文
  • wxml文件 <view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}<...image class='select_img {{show&...

    效果:

    在这里插入图片描述

    wxml文件

    <view class='select_box'>
     <view class='select' catchtap='selectTap'>
      <text class='select_text'>{{selectData[index]}}</text>
      <image class='select_img {{show&&"select_img_rotate"}}' src='/image/gobottom.png'></image>   
     </view>
     <view class='option_box' style='height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;'>
      <text class='option' style='{{index==selectData.length-1&&"border:0;"}}' wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'>{{item}}</text>
     </view>
    </view>
    

    js文件

    Page({
     
     data: {
     show:false,//控制下拉列表的显示隐藏,false隐藏、true显示
     selectData:['1','2','3','4','5','6'],//下拉列表的数据
     index:0//选择的下拉列表下标
     },
     // 点击下拉显示框
     selectTap(){
     this.setData({
      show: !this.data.show
     });
     },
     // 点击下拉列表
     optionTap(e){
     let Index=e.currentTarget.dataset.index;//获取点击的下拉列表的下标
     this.setData({
      index:Index,
      show:!this.data.show
     });
     },
     onLoad: function (options) {
      
     }
     
    })
    

    wxss文件

    page{
     background: #f3f7f7;
    }
    .select_box{
     background: #fff;
     width: 80%;
     margin: 30rpx auto;
     position: relative;
    }
    .select{
     box-sizing: border-box;
     width: 100%;
     height: 70rpx;
     border:1px solid #efefef;
     border-radius: 8rpx;
     display: flex;
     align-items: center;
     padding: 0 20rpx;
    }
    .select_text{
     font-size: 30rpx;
     flex: 1;
    }
    .select_img{
     width: 40rpx;
     height: 40rpx;
     display: block;
     transition:transform 0.3s;
    }
    .select_img_rotate{
     transform:rotate(180deg); 
    }
    .option_box{
     position: absolute;
     top: 70rpx;
     width: 100%;
     border:1px solid #efefef;
     box-sizing: border-box;
     height: 0;
     overflow-y: auto;
     border-top: 0;
     background: #fff;
     transition: height 0.3s;
    }
    .option{
     display: block;
     line-height: 40rpx;
     font-size: 30rpx;
     border-bottom: 1px solid #efefef;
     padding: 10rpx;
    }
    
    展开全文
  • 说明:用 catchtap 而不用 bindtap 是为了阻止事件冒泡,为了实现点击页面其他地方关闭 select, 所以在父页面(index.wxml)最外层绑定了 bindtap="close" 方法, 不阻止冒泡的话会执行父组件的 close 方法 ...
  • 1.微信官方文档展示日期为年,月,日,如图所示: 项目要求日期下拉框组件显示只要年,月,修改如下,只需要添加属性fields="month"就可以了,如果只显示年那就是 fields="year",start和end...
  • 自从2017年1月份微信推出小程序以来,小程序的火热...小程序搜索下拉框展示长尾关键词是用户在搜索时与微信搜索引擎的第一步互动,在互动过程中,搜索引擎会对展示关键词不断进行调整来满足用户的个性需求,优化小程...
  • 微信小程序下拉框加请求数据

    千次阅读 2020-03-07 23:59:55
    <v`<van-dropdown-menu class="van-hairline--bottom"> <van-dropdown-item value="{{ value1 }}" options="{{ third_cat_option }}" bind:change="changeThirdCat"/> <van-d...

空空如也

空空如也

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

微信小程序实现下拉框

微信小程序 订阅