精华内容
下载资源
问答
  • 微信小程序 select 下拉框组件 效果图 由于录屏图片质量不好,所以效果图你会看到有残影(捂脸)
  • 小程序下拉框选择

    万次阅读 2019-06-10 09:48:38
    不得不吐槽下小程序下拉框问题,小程序是没有对应的下拉框标签的,如果要用到:要么自己手写,要么就用选择器代替实现。 正题(复制代码就行了) .wxml <view class='list-msg'> <view class='list-msg...

    不得不吐槽下小程序下拉框问题,小程序是没有对应的下拉框标签的,如果要用到:要么自己手写,要么就用选择器代替实现。

    正题(复制代码就行了)

    .wxml

      <view class='list-msg'>
        <view class='list-msg2' bindtap='bindShowMsg'>
            <text>{{tihuoWay}}</text>
            <!-- <image style='height:20rpx;width:20rpx;' src='/images/down.png'></image> -->
        </view>
        <cover-view class="select_box" wx:if="{{select}}">
            <cover-view class="select_one" bindtap="mySelect" data-name="玉林">玉林</cover-view>
            <cover-view class="select_one" bindtap="mySelect" data-name="上海">上海</cover-view>
         
        </cover-view>
      </view>

    .js

    //下拉框
      ,bindShowMsg() {
        this.setData({
          select: !this.data.select
        })
      },
      mySelect(e) {
        var name = e.currentTarget.dataset.name
        this.setData({
          tihuoWay: name,
          select: false
        })
      }

    .wxss

    .list-msg {
        margin: 0 10rpx;
        background-color: rgb(124, 122, 122);
         position: relative; 
        width: 16%;
        
    }
     
    .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: 82%;
        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;
    }
    

    选择器(我就不写了 别人介绍的比较全)

    https://blog.csdn.net/qq_35713752/article/details/80295372

     注意:选器索引问题   即绑     id       name  两个参数

    最好在  bindchange 改变事件改值

    展开全文
  • view> view> js代码 Page({ data: { select:false, grade_name:'--请选择--', grades: [ '北京市', '深圳市', '上海市', '广州市', ] }, bindShowMsg() { this.setData({ select: !this.data.select }) }, /** * 已...

    在这里插入图片描述

    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;
     }
    
    展开全文
  • 主要介绍了微信小程序picker组件下拉框选择input输入框的实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • 当在这个商品选择了50元优惠券,别的商品下面的“现金优惠券”下拉框就不让他选了,给个提示“暂无优惠券”
  • 小程序select下拉框选择小程序中没有select下拉框组件,不像HTML直接引用,可以自定下拉框组件 废话不多说,直接上代码 wxml <view class='select_box'> <view class='select' catchtap='selectTap'&...

    小程序select下拉框选择器

    在这里插入图片描述

    小程序中没有select下拉框组件,不像HTML直接引用,可以自定下拉框组件
    废话不多说,直接上代码

    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='/icons/arrow-up.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>
    

    wxss

    page{
      background: #f3f7f7;
    }
    .select_box{
      background: #fff;
      width: 40%;
      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;
    }
    

    js

    // pages/table/table.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
    listData:[
      show:false,//控制下拉列表的显示隐藏,false隐藏、true显示
        selectData:['请选择商品状态','出售中','短货','下架','已删除'],//下拉列表的数据
        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
        });
      console.log(this.data.index)
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })
    
    展开全文
  • 主要为大家详细介绍了微信小程序实现下拉框功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序下拉框

    2019-09-29 13:43:19
    微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top-text'> 选择接收班级 ...

    微信小程序组件里没有下拉框,正好要用到,记下来以后参考

    wxml代码

    <view class='top'>
        <view class='top-text'> 选择接收班级</view>
        <!-- 下拉框 -->
        <view class='top-selected' bindtap='bindShowMsg'>
          <text>{{grade_name}}</text>
          <image src='/images/icon/down.png'></image>
        </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>
      </view>

    wxss代码

    /* 顶部 */
    .top{
      width: 100vw;
      height: 80rpx;
      padding: 0 20rpx;
      line-height: 80rpx;
      font-size: 34rpx;
      border-bottom: 1px solid #000;
    }
    .top-text{
      float: left
    }
    /* 下拉框 */
    .top-selected{
        width: 50%;
        display: flex;
        float: right;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #ccc;
        padding: 0 10rpx;
        font-size: 30rpx;
    }
    /* 下拉内容 */
    .select_box {
        background-color: #fff;
        padding: 0 20rpx;
        width: 50%;
        float: right;
        position: relative;
        right: 0;
        z-index: 1;
        overflow: hidden;
        text-align: left;
        animation: myfirst 0.5s;
        font-size: 30rpx;
    }
    .select_one {
        padding-left: 20rpx;
        width: 100%;
        height: 60rpx;
        position: relative;
        line-height: 60rpx;
        border-bottom: 1px solid #ccc;
    }
    /* 下拉过度效果 */
    @keyframes myfirst {
        from {
            height: 0rpx;
        }
     
        to {
            height: 210rpx;
        }
    }
    /* 下拉图标 */
    .top-selected image{
      height:50rpx;
      width:50rpx;
      position: absolute;
      right: 0rpx;
      top: 20rpx;
    }

    js代码

     /**
       * 页面的初始数据
       */
      data: {
        select:false,
        grade_name:'--请选择--',
        grades: [
            '猛犸机器人1班',
            '猛犸机器人2班',
            '口才1班',
          ]
      },/**
     *  点击下拉框
     */
      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
        })
      },

    效果

     


    更多专业前端知识,请上 【猿2048】www.mk2048.com
    展开全文
  • 微信小程序 select 下拉框组件.zip
  • 微信小程序下拉框组件

    千次阅读 2020-04-19 18:03:44
    小程序有时需要使用下拉框选项,通常我会使用 picker 组件实现。pick 组件使用 mode 来区分类别,默认使用普通选择器就行。 除了上述方式,我们也可以通过自定义组件实现,代码如下: //index.js Component({ /*...
  • 小程序picker下拉框选择时间,只需要年和月 官方提供的组件可以选择到日 我们现需要选择到月,只需要在代码里加上fields="month" <view class="section"> <view class="section__title">日期选择...
  • 这篇文章主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就...
  • 主要介绍了微信小程序 select 下拉框组件功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了微信小程序select下拉框实现效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 小程序使用for循环点击按钮 view+1,for循环内使用下拉框,互不影响,可单独选择
  • 小程序中实现下拉框功能

    千次阅读 2019-12-11 11:05:03
    不得不吐槽一下,小程序中是没有下拉框这个组件的, 真的好恶心.所以一般使用选择器picker代替下拉框,或者自己手写下拉框.下面就是下拉框的实现代码,可以直接拿去使用 1.wxml中 <view class='top'> ...
  • 主要为大家详细介绍了微信小程序下拉框组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • github地址 https://github.com/pretty-git/pulldown.git 我是封装的组件可以直接在微信小程序里面引入使用,
  • 小程序-吸顶下拉框

    千次阅读 2018-08-14 19:52:22
    今天给大家带来的是在开发小程序过程中遇到一个下拉菜单,废话不多说先给大家上一波图。(感谢崔老师-其实是萌萌的大汉-给与后期帮助与完善) 一开始页面硬画出来的效果还不错,但是需求做到后面发现又有多个...
  • 主要介绍了微信小程序下拉框功能的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • firstPerson: '请选择',//未点选时显示 selectArea: false, }, mySelect: function (e) { this.setData({ firstPerson: e.target.dataset.me, store_id: e.target.dataset.value, selectPerson: true, ...
  • 小程序自定义下拉框

    2020-08-06 16:48:12
    } js: tapPages(){ this.setData({ showItems: false, }) }, showPicker(){ this.setData({ showItems: true, }) } 完成,此时点击除了下拉框内容之外的空白处都能将下拉框收起来
  • 主要介绍了微信小程序下拉框搜索功能的实现方法,内容比较简单容易理解 ,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,265
精华内容 10,106
关键字:

下拉框小程序选择