微信小程序实现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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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的原因是为了阻止事件冒泡！

效果如下：

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

赞 (0)

相关推荐

  • 微信小程序下拉框搜索功能的实现方法

    微信小程序下拉框搜索功能的实现方法

    最近在做一个项目的时候,需要用到下拉框搜索,网上搜了半天没找到想要的,决心自己动手写一个. 首先看下效果图: 左边是输入框,可以进行模糊查询,右边图标进行选择. 代码部分,我定义了五个参数,和一个自定义的方法, list:下拉框数组, _width:组件宽度, _height:组件高度, bind:action: 自定义方法 考虑到每个人用的时候用的对象数组结构不同我预留了两个字段,做自定义(可不写),怎么样是不是很强大. actualvalue:下拉框实际值, showvalue:下拉框显示值

  • 微信小程序select下拉框实现效果

    微信小程序select下拉框实现效果

    小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉 这里为了更清楚的显示层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>￥99.00</text> </view> <!--下拉框 --> <view class='list-msg2' bindtap='bi

  • 微信小程序picker组件下拉框选择input输入框的实例

    微信小程序picker组件下拉框选择input输入框的实例

    微信小程序picker组件下拉框选择input输入框的实例 实现效果图: 页面 <view class="row-wrap"> <view class="label">预约项目</view> <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">

  • 微信小程序select下拉框实现源码

    微信小程序select下拉框实现源码

    这篇文章主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉,这里为了更清楚的显示小程序层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>￥99.00<

  • 微信小程序下拉框组件使用方法详解

    本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = region,以及value = "一维数组" //.wxml <picker mode="region" bindchange="bindViewEvent" data-model="component" data-me

  • 微信小程序下拉框功能的实例代码

    微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top'> <view class='top-text'> 选择接收班级</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text> <image src='/images/icon/do

  • 微信小程序实现下拉框功能

    微信小程序实现下拉框功能

    微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML <view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}</text> <image class='select_img {{show&&&q

  • 微信小程序 select 下拉框组件功能

    微信小程序 select 下拉框组件功能

    一.源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. select.wxml <view class="select-box"> <view class="select-current" catchtap="openClose"> <text class="current-name

  • 微信小程序实现简单的select下拉框

    微信小程序实现一个简单的select下拉框,供大家参考,具体内容如下 用的是transform过渡,没用动画 看看效果 废话不多说,直接上代码 wxml: <view class="item"> <label class="first"><text>*</text>公司/商户类型:</label> <!-- 通过点击事件改变图片的旋转角度.自定义下拉框的高度 --> <view class

  • 微信小程序实现select下拉框

    实现代码如下: <view class="fenlei">    <!-- 下拉框 -->    <view class="select_box">      <view class="select" catchtap="selectTaps">        <text class="select_text">{{selectDatas[inde

  • 微信小程序自定义select下拉选项框组件的实现代码

    知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了. 第一步:创建组件所需的文件 我喜欢把共用的内容都放在和pages文件同级的地方,所以有了下面的目录结构 (1) 先创建一个自定义名字的文件夹,例如我上面的Componet (2) 再创建一个select文件夹,然后:右键这个文件

  • 微信小程序自定义select下拉选项框的方法

    微信小程序自定义select下拉选项框的方法

    本文实例为大家分享了微信小程序自定义select下拉选项框的具体代码,供大家参考,具体内容如下 第一步:创建组件所需的文件 第二步:开始配置组件 select.json {   "component": true,   "usingComponents": {     "select": "./select"   } } 第三步:自定义组件样式及js select.wxml <view class='com-select

  • 微信小程序实现页面下拉刷新和上拉加载功能详解

    微信小程序实现页面下拉刷新和上拉加载功能详解

    本文实例讲述了微信小程序实现页面下拉刷新和上拉加载功能.分享给大家供大家参考,具体如下: web手机端或App中经常会有下拉刷新,上拉加载这些功能. 微信小程序中如何实现下拉刷新,上拉加载的功能. 实现思路: 1.监听界面的下拉刷新事件和上拉加载事件 bindscrolltolower 监听上拉加载 bindscrolltoupper 监听下拉刷新 2.下拉刷新时清空数据列表,并重新请求数据进行界面展示. 3.上拉加载增量请求数据,增量增加数据列表,增量界面展示 效果图: 实现代码: Water

  • 微信小程序实现单列下拉菜单效果

    微信小程序实现单列下拉菜单效果

    接下来我想做的是一个下拉菜单用来分类的,但是在网上搜了一下,基本上全都是比较复杂的分类菜单,最简单的也是分三列的下拉菜单,但是并不想要这么复杂的,最后找了一个三列的,改成了单列.也把代码尽可能的简单化了. 实现的效果图: 合并状态: 首先下面是目录结构:  下面是实现的具体代码: .wxml <!--选择框--> <view class="product-list"> <!--条件选择--> <view class="choice-b

  • 微信小程序 详解下拉加载与上拉刷新实现方法

    微信小程序 详解下拉加载与上拉刷新实现方法

    微信小程序下拉刷新上拉加载的两种实现方法 实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性             属性   类型                           描述 enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数. 设置js里onPullDownRefresh和onReachBottom方法 属性    类

  • 微信小程序实现列表下拉刷新上拉加载

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,从而对页面数据进行修改! 页面配置JSON enablePullDownRefresh:开启下拉刷新: onReachBottomDistance:页面上拉触底事件触发时距页面底部距离,单位为px. { "enablePullDown

  • 微信小程序CSS3动画下拉菜单效果

    微信小程序CSS3动画下拉菜单效果

    微信小程序没有自带的下拉菜单组件,因此我们需要自己需要写一个 思路 利用列表来存储菜单项,在外面套一个view元素作为外框,将其设置为overflow:hidden,使用CSS3动画逐渐改变外层view元素的高度,当高度为0时,里面嵌套的列表元素被完全隐藏,相当于菜单关闭.而当view元素的高度大于列表元素的高度时,相当于菜单显示. 效果图 wxml button按钮用于触发菜单的打开和关闭,first_click参数使用户第一次点击按钮之前菜单不可见,state参数用于控制菜单的打开和关闭状态

  • 微信小程序实现顶部下拉菜单栏

    微信小程序实现顶部下拉菜单栏

    本文实例为大家分享了微信小程序实现下拉菜单栏的具体代码,供大家参考,具体内容如下 js代码 var cityData = require('../../utils/city.js'); Page({ data: { //选择的终点城市暂存数据 endselect: "", //终点缓存的五个城市 endcitys: [], //用户选择省份之后对应的城市和县城 endkeys: {}, //用户选择县城 town: [], //所有车长 commanders: cityData.get

随机推荐