经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序实现下拉框功能
来源:jb51  时间:2019/7/16 9:03:22  对本文有异议

微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果

下面来看一下代码:

首先WXML

  1. <view class='select_box'>
  2. <view class='select' catchtap='selectTap'>
  3. <text class='select_text'>{{selectData[index]}}</text>
  4. <image class='select_img {{show&&"select_img_rotate"}}' src='/image/gobottom.png'></image>
  5. </view>
  6. <view class='option_box' style='height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;'>
  7. <text class='option' style='{{index==selectData.length-1&&"border:0;"}}' wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'>{{item}}</text>
  8. </view>
  9. </view>
  10. <!--
  11. show&&"select_img_rotate"-----给显示框右边的下拉箭头添加动画
  12.  
  13. height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;-----给改变下拉框高度,实现下拉框的显示隐藏,每个下拉选项的高度为60,下拉框的最大高度这里设置的是300,所以这里写成当数据长度大于5时,下拉框高度为300,反之下拉框高度为数据长度乘以60
  14.  
  15. index==selectData.length-1&&"border:0;"-----取消下拉选项的最后一个的下边框
  16. -->

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

  1. page{
  2. background: #f3f7f7;
  3. }
  4. .select_box{
  5. background: #fff;
  6. width: 80%;
  7. margin: 30rpx auto;
  8. position: relative;
  9. }
  10. .select{
  11. box-sizing: border-box;
  12. width: 100%;
  13. height: 70rpx;
  14. border:1px solid #efefef;
  15. border-radius: 8rpx;
  16. display: flex;
  17. align-items: center;
  18. padding: 0 20rpx;
  19. }
  20. .select_text{
  21. font-size: 30rpx;
  22. flex: 1;
  23. }
  24. .select_img{
  25. width: 40rpx;
  26. height: 40rpx;
  27. display: block;
  28. transition:transform 0.3s;
  29. }
  30. .select_img_rotate{
  31. transform:rotate(180deg);
  32. }
  33. .option_box{
  34. position: absolute;
  35. top: 70rpx;
  36. width: 100%;
  37. border:1px solid #efefef;
  38. box-sizing: border-box;
  39. height: 0;
  40. overflow-y: auto;
  41. border-top: 0;
  42. background: #fff;
  43. transition: height 0.3s;
  44. }
  45. .option{
  46. display: block;
  47. line-height: 40rpx;
  48. font-size: 30rpx;
  49. border-bottom: 1px solid #efefef;
  50. padding: 10rpx;
  51. }

这里是JS

  1. Page({
  2.  
  3. data: {
  4. show:false,//控制下拉列表的显示隐藏,false隐藏、true显示
  5. selectData:['1','2','3','4','5','6'],//下拉列表的数据
  6. index:0//选择的下拉列表下标
  7. },
  8. // 点击下拉显示框
  9. selectTap(){
  10. this.setData({
  11. show: !this.data.show
  12. });
  13. },
  14. // 点击下拉列表
  15. optionTap(e){
  16. let Index=e.currentTarget.dataset.index;//获取点击的下拉列表的下标
  17. this.setData({
  18. index:Index,
  19. show:!this.data.show
  20. });
  21. },
  22. onLoad: function (options) {
  23. }
  24.  
  25. })

完结!

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号