微信小程序里没有和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='/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>
<!--
show&&"select_img_rotate"-----给显示框右边的下拉箭头添加动画 height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;-----给改变下拉框高度,实现下拉框的显示隐藏,每个下拉选项的高度为60,下拉框的最大高度这里设置的是300,所以这里写成当数据长度大于5时,下拉框高度为300,反之下拉框高度为数据长度乘以60 index==selectData.length-1&&"border:0;"-----取消下拉选项的最后一个的下边框
-->

然后WXSS(如果不想要动画,删掉wxss里的transition:transform 0.3s;和transition: height 0.3s;即可)

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:;
}
.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:;
overflow-y: auto;
border-top:;
background: #fff;
transition: height 0.3s;
}
.option{
display: block;
line-height: 40rpx;
font-size: 30rpx;
border-bottom: 1px solid #efefef;
padding: 10rpx;
}

这里是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) { } })

完结!

有什么错误或者其他好的方法,请告知,谢谢

想了解更多的小程序的知识请添加微信小程序开发交流群:368506119,一起交流学习

微信小程序下拉框的更多相关文章

  1. 微信小程序下拉框实现

    小程序中是没有直接的下拉框标签可以使用的,所以下拉框需要手动写,或者使用框架 因为考虑到下拉框展开的时候,可能需要遮挡住其余的样式,这里就用的cover-view标签.(不考虑遮挡的可以换成普通的vi ...

  2. 微信小程序下拉框组件

    >>下拉组件 1.组件结构: 2.index.js: //index.js Component({ /** * 组件的属性列表 */ properties: { propArray: { ...

  3. 微信小程序下拉框之二维数组或对象

    在项目中,我们大多数时候传的值并不是需要这个下标,而是其他的值.像我项目中,需要获取到的是它对应的Id,那么我们如何通过它的这个下标值返回你想要的值呢? 通过picker返回的索引值,去获取匹配你想获 ...

  4. 微信小程序下拉加载和上拉刷新两种实现方法

    方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onR ...

  5. 微信小程序下拉加载下一页

    小程序做得多了,有些常用功能就有必要记录一下 请看详解: 微信小程序之下拉触底时加载下一页 wxml参考: <scroll-view class='dataContainer' scroll-y ...

  6. 微信小程序 - 下拉菜单组件

    使用: 1.导入组件 2.使用组件 3.数据传入 4. 获取数据(通过同步缓存,获取“choose”)- 发送到后端 点击下载:小程序-下拉组件.

  7. 关于微信小程序下拉出现三个小点

    包子这天看美团外卖的小程序,再瞅瞅自己的背景色,发现,美团下拉的时候有三个小点,但是我自己的校车徐下拉的时候没有三个小点,很是郁闷,于是各种的找各种的找,发现,这三个小点是微信小程序自带的,你只需要设 ...

  8. 微信小程序~下拉刷新PullDownRefresh

      一.onPullDownRefresh回调 代码: // http://itlao5.com onPullDownRefresh: function () { console.log('onPul ...

  9. 微信小程序 --- 下拉刷新上拉加载

    查看文档看到:page()函数注册页面的时候,有 onPullDownRefresh 监听用户下拉动作,onReachBottom 页面上拉触底事件的函数. 在小程序里,用户顶部下拉是默认禁止的,我们 ...

随机推荐

  1. LINUX下文件编译

    body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...

  2. python3 第十章 - 如何进行进制转化

    在计算机的世界里,2进制是主流,而在人类的自然世界中,10进制是主流,那么在这之间必然就会存在进制转化的问题.本章我们就来谈谈进制转化,也希望通过本章加深您对前些章所学知识的理解. 原理:先说说关于位 ...

  3. 一个自己稍作修改了的美赛论文LaTeX模板

    原模板(5.0)来自LaTeX工作室(latexstudio.net),我按照比赛规范做了一点小小的修改(5.0y),并加上了比原来更详细一些的注释,方便使用. 仅仅分享一下方便大家使用,模板的原创者 ...

  4. AMS的适用场景

    AMS适用于网络音视频应用的各种场合,可以独立作为直播点播平台应用,也可以嵌入到用户的各种应用平台中,为客户提供音视频核心支撑,不同于其它提供云服务租给客户使用的产品,AMS是一套安装在企业内部服务器 ...

  5. 转-Web Service中三种发送接受协议SOAP、http get、http post

    原文链接:web服务中三种发送接受协议SOAP/HTTP GET/HTTP POST 一.web服务中三种发送接受协议SOAP/HTTP GET/HTTP POST 在web服务中,有三种可供选择的发 ...

  6. PPT基础教程

    在当前演示文稿中增加新的幻灯片:快捷键>>ctrl+M  或者将鼠标定位到左侧窗格,然后按下回车键enter 母版??? 默认版式是"标题和文本"     右键 > ...

  7. ASP.NET Core Web API下事件驱动型架构的实现(三):基于RabbitMQ的事件总线

    在上文中,我们讨论了事件处理器中对象生命周期的问题,在进入新的讨论之前,首先让我们总结一下,我们已经实现了哪些内容.下面的类图描述了我们已经实现的组件及其之间的关系,貌似系统已经变得越来越复杂了. 其 ...

  8. shell获取字符串长度

    方法1: 使用wc -L命令 wc -L可以获取到当前行的长度,因此对于单独行的字符串可以用这个简单的方法获取,另外wc -l则是获取当前字符串内容的行数. 代码如下: echo "abc& ...

  9. 安装puppeteer

    Puppeteer是一个node库,他提供了一组用来操纵Chrome的API,默认headless也就是无UI的chrome,也可以配置为有UI. 其实有点类似于PhantomJS,但Puppetee ...

  10. 使用redis所维护的代理池抓取微信文章

    搜狗搜索可以直接搜索微信文章,本次就是利用搜狗搜搜出微信文章,获得详细的文章url来得到文章的信息.并把我们感兴趣的内容存入到mongodb中. 因为搜狗搜索微信文章的反爬虫比较强,经常封IP,所以要 ...