微信小程序实现select下拉框

 更新时间:2022年07月08日 14:23:23   作者:小小小菜鸟1997  
这篇文章主要为大家详细介绍了微信小程序实现select下拉框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现select下拉框的具体代码,供大家参考,具体内容如下

实现代码如下:

<view class="fenlei">
    <!-- 下拉框 -->
    <view class="select_box">
      <view class="select" catchtap="selectTaps">
        <text class="select_text">{{selectDatas[indexs]}</text>
        <image class="select_img:{{shows&&'select_img_rotate'}}"
   src="../../../static/img/lifeCircle/arroundServe/xiala.png"></image>
      </view>
      <view class="option_box" style="height:{{shows?(selectDatas.length>8?890:selectDatas.length*110):0}}rpx;">
        <text class="option-list" wx:for="{{selectDatas}}" wx:key="this" data-index="{{index}}" catchtap="optionTaps"
          style="{{indexs==selectDatas.length-1&&'border:0;'}}">{{item}}</text>
      </view>
    </view>
</view>

css:

/* fenlei */
.fenlei{
  margin: 0 25rpx;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  align-items: center;
  background-color:#F5F6F7;
}
.fenlei text{
  font-size: 30rpx;
  color: #999999;
  margin-left: 15rpx;
}
/* 下拉框 */
.select_box {
  width: 100%;
  text-align: left;
  position: relative;
}

.select {
  box-sizing: border-box;
  width: 100%;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.select_text {
  font-size: 32rpx;
  flex: 1;
  color: #999999;
}

.select_img {
  width: 37rpx;
  height: 30rpx;
  display: block;
  transition: transform 0.3s;
}

.select_img_rotate {
  transform: rotate(180deg);
}

.option_box {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  border-top: 0;
  background: #fff;
  z-index: 100;
  text-align:center;
  transition: height 0.3s;
  overflow-y: auto;
}

.option-list {
  display: block;
  line-height: 106rpx;
  font-size: 32rpx;
  border-bottom: 1px solid #efefef;
  padding: 10rpx;
  color: rgb(102, 102, 102);
  cursor: pointer;
}

js:

 /**
   * 页面的初始数据
   */
  data: {
    shows: false, //控制下拉列表的显示隐藏,false隐藏、true显示
    selectDatas: ['再生资源回收点', '家政服务点', '综合超市','生鲜超市','邮政快递综合服务点','维修点','照相文印店','美容美发店'], //下拉列表的数据
    indexs: 0, //选择的下拉列 表下标,
  },
// 点击下拉显示框
selectTaps(e) {
  console.log(e)
  this.setData({
    shows: !this.data.shows,
  });
},
// 点击下拉列表
optionTaps(e) {
  let Indexs = e.currentTarget.dataset.index; //获取点击的下拉列表的下标
  console.log(Indexs)
  this.setData({
    indexs: Indexs,
    shows: !this.data.shows
  });
},

注意:用catchtap,而不用bindtap的原因是为了阻止事件冒泡!

效果如下:

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

相关文章

  • 常见的javascript跨域通信方法

    常见的javascript跨域通信方法

    这篇文章主要介绍了常见的javascript跨域通信方法
    2015-12-12
  • javascript屏蔽右键代码

    javascript屏蔽右键代码

    屏蔽右键在某些特殊的情况下还是比较有用的,下面与大家分享个常用的屏蔽方法
    2014-05-05
  • 前端实现打印功能的两种方法详解

    前端实现打印功能的两种方法详解

    当页面设计好后需要打印出来,如网页的的打印浏览和打印功能,有些公司需要让前端开发好页面打印出来或者转为pdf格式的文档,下面这篇文章主要给大家介绍了关于前端实现打印功能的两种方法,需要的朋友可以参考下
    2023-01-01
  • javascript[js]获取url参数的代码

    javascript[js]获取url参数的代码

    多浏览器兼容用javascript获取url参数的方法比较推荐的一种
    2007-10-10
  • c#和Javascript操作同一json对象的实现代码

    c#和Javascript操作同一json对象的实现代码

    刚开始学Javascript,接触到json对象,json可以看作是用于客户端数据实体对象的载体。json对象一般都是通过ajax方式传送给服务层
    2012-01-01
  • layer实现弹窗提交信息

    layer实现弹窗提交信息

    这篇文章主要为大家详细介绍了layer实现弹窗提交信息的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • file-loader打包图片文件时路径错误输出为[object-module]的解决方法

    file-loader打包图片文件时路径错误输出为[object-module]的解决方法

    这篇文章主要介绍了file-loader打包图片文件时路径错误输出为[object-module]的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • JavaScript数组常用方法

    JavaScript数组常用方法

    这篇文章主要介绍了JavaScript数组常用方法的相关资料,非常的详细,需要的朋友可以参考下
    2015-03-03
  • JavaScript中定时控制Throttle、Debounce和Immediate详解

    JavaScript中定时控制Throttle、Debounce和Immediate详解

    大家可能都知道JavaScript遵循事件驱动的编程范例,这意味着一些行为可以激活一些响应,并且这些响应仅在发生特定的行为时才被激活。这篇文章将给大家详细介绍JavaScript中的定时控制Throttle、Debounce和Immediate,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-11-11
  • 利用JavaScript中的高阶函数和闭包实现命令模式

    利用JavaScript中的高阶函数和闭包实现命令模式

    命令模式提供了一种优雅的解决方案,使得我们能够灵活地封装和管理代码操作,所以本文将为大家介绍命令模式的概念、应用场景以及在JavaScript中的实现方式,需要的可以参考一下
    2023-06-06

最新评论