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

微信小程序实现一个简单的select下拉框，供大家参考，具体内容如下

用的是transform过渡，没用动画

看看效果

废话不多说，直接上代码

wxml:

<view class="item">
 <label class="first"><text>*</text>公司/商户类型：</label>
 <!-- 通过点击事件改变图片的旋转角度、自定义下拉框的高度 -->
 <view class="value" bindtap="select">
 <view style="display:inline-block;">{{type!=''?type:'选择商户类型'}}</view>
 <image src="../img/sj@2x.png" class="sanjiao" style="{{isSelect?'transform:rotateZ(180deg)':''}}"/>
 <!-- select -->
 <view class="select" style="{{isSelect?'height:'+54*types.length+'rpx;':'border:0'}}">
 <view class="type" catchtap="getType" wx:for="{{types}}" data-type="{{item}}" wx:key="type">{{item}}</view>
 </view>
 </view>
</view>

wxss:

.sanjiao{
 width: 18rpx;
 height: 10rpx;
 margin-left: 20rpx;
 transition: 0.5s;/* 选转图片过渡 */
}
.select{
 position: absolute;
 z-index: 10;
 border: 2rpx solid #aaaaaa;
 padding: 0 8rpx;
 top:46rpx;
 left: -10rpx;
 width: 210rpx;
 overflow: auto;
 height: 0;
 max-height: 200rpx;
 background-color:#fff;
 box-sizing: border-box;
 transition: height 0.5s;/* 高度变换过渡 */
}
.select .type{
 color: #aaaaaa;
 border-top: 2px solid #dadada;
 padding: 6rpx;
}
.select :first-child{
 border: 0;
}

js

data: {
 isSelect:false,//展示类型？
 types:['类型一','类型二'],//公司/商户类型
 type:"",//公司/商户类型
 },
 //点击控制下拉框的展示、隐藏
 select:function(){
 var isSelect = this.data.isSelect
 this.setData({ isSelect:!isSelect})
 },
 //点击下拉框选项，选中并隐藏下拉框
 getType:function(e){
 let value = e.currentTarget.dataset.type
 this.setData({
 type:value ,
 isSelect: false,
 })
 },

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

赞 (0)

相关推荐

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（一）

    微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一) 页面缓存的设置优化了页面加载,减少了频繁的调取接口,使用户在断网的情况下有更好的体验. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB. 注意: localSt

  • 微信小程序实现简单的购物车功能

    本文实例为大家分享了微信小程序实现简单购物车的具体代码,供大家参考,具体内容如下 实现一个购物车页面,需要哪些数据.整理下大概如下:一个购物车商品列表(carts),列表里的单个item包含:商品id(id),商品图(image),商品名(title),单价(price),数量(amount),单选按钮(selected):全选按钮,需要一个字段(selectAllStatus)表示是否全选:总价(totalPrice):总数量(totalNum).还有一个需要判断的是购物车是否为空(hasLi

  • 微信小程序实现简单购物车小功能

    微信小程序实现简单购物车小功能

    本文实例为大家分享了微信小程序实现简单购物车的具体代码,供大家参考,具体内容如下 微信小程序定制好看的购物车页面,实现购物车功能,希望对您有所帮助! 1. 应用场景2. 思路分析3. 代码分析4. 具体实现代码 效果截图: 1.应用场景 适用于商城.秒杀.商品购买等类型的小程序,负责将顾客浏览的商品保存下来,方便客户集中比较商品与购买商品. 2.思路分析 实现购物车功能前请思考以下问题: 1.小程序如何布局?使用什么布局能提升页面开发效率?? 2.将购物车功能分为四个小功能:(1)一键全选/取消

  • 微信小程序实现简单手写签名组件的方法实例

    微信小程序实现简单手写签名组件的方法实例

    目录 背景: 需求: 效果 一.思路 二.实现 1. 页面与样式 2. 初始化 3. 点击时 4. 签名时 三.总结 背景: 在做项目过程中,需要在微信小程序中实现手写签名组件.在网上找了微信小程序手写签名实现,但是都是不太理想.在实际运用中,会因为实时计算较多的贝塞尔曲线而产生卡顿.效果不理想.所以退一步,不需要笔锋以及笔迹模拟效果.只需要简单的手写签名实现. 需求: 可以实现用户在微信小程序上手写签名. 需要组件化. 效果 一.思路 在微信小程序中,我们使用canvas组件实现.将用户的输入

  • 微信小程序实现简单聊天室

    本文实例为大家分享了微信小程序实现简单聊天室的具体代码,供大家参考,具体内容如下 cha.js // pages/chat/chat.js // 获取小程序实例 let app = getApp(); Page({ /** * 页面的初始数据 */ data: { nickname:'', avatar:'', chatlists:[ { nickname:'小林', avatar:'https://timgsa.baidu.com/timg?image&quality=80&size=b

  • 微信小程序实现简单九宫格抽奖

    微信小程序实现简单九宫格抽奖

    本文实例为大家分享了微信小程序实现简单九宫格抽奖的具体代码,供大家参考,具体内容如下 废话不多说,先上样板图 代码就先wxml文件: <view id="container">   <!--左上-->   <view id="li" class='{{amplification_index===1?"indexli":""}}'>     一等奖     <view></v

随机推荐