网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2025/3/4 浏览:3 次 )

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

用的是transform过渡,没用动画

看看效果

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

废话不多说,直接上代码

wxml:

<view class="item">
 <label class="first"><text>*</text>公司/商户类型:</label>
 <!-- 通过点击事件改变图片的旋转角度、自定义下拉框的高度 -->
 <view class="value" bindtap="select">
 <view style="display:inline-block;">{{type!=''"../img/sj@2x.png" class="sanjiao" style="{{isSelect"/>
 <!-- select -->
 <view class="select" style="{{isSelect">
 <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,
 })
 },

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

上一篇:JavaScript前后端JSON使用方法教程
下一篇:记录一次websocket封装的过程
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap