wxml:
<view class="classify-kuangjia">
<view class="classify-kuangjia2">
<view>商品分类:</view>
<!-- 下拉框 -->
<view class='classify' bindtap='bindShowMsg'>
<text>{{grade_name}}</text>
<image class="classify-tupian" src='/images/classify.png'></image>
<!-- 下拉需要显示的列表 -->
<view class="select_box" wx:if="{{select}}">
<view wx:for="{{grades}}" wx:key="unique">
<view class="select_one" catchtap="mySelect" data-name="{{item}}">{{item}}</view>
</view>
</view>
</view>
</view>
</view>
wxss:
.classify-kuangjia{
height: 50rpx;
background-color: red;
display: flex;
justify-content: center;
}
.classify-kuangjia2{
width: 90%;
height: 50rpx;
display: flex;
justify-content: space-between;
}
.classify{
padding-left: 20rpx;
align-items: center;
justify-content: space-between;
width: 50%;
position:relative;
}
.classify-tupian{
width: 50rpx;
height: 25rpx;
position: absolute;
right: 0rpx;
top: 15rpx;
}
.select_box{
width: 100%;
background-color: cornflowerblue;
position: absolute;
right: 0rpx;
top:50rpx;
animation: myclassify 1s;
overflow: hidden;
}
.select_one {
padding-left: 20rpx;
width: 100%;
height: 60rpx;
position: relatiave;
line-height: 60rpx;
border-bottom: 1px solid #ccc;
}
/* 下拉过度效果 */
@keyframes myclassify {
from {
height: 0rpx;
}to {
height: 210rpx;
}
}
js:
Page({
/**
* 页面的初始数据
*/
data: {
DqOpenid: '',
select: false,
grade_name: '--请选择--',
grades: ['猛犸机器人1班', '猛犸机器人2班', '口才1班',]
},
// 点击下拉框
bindShowMsg() {
this.setData({
select: !this.data.select
})
},
// 已选下拉框
mySelect(e) {
console.log(e)
var name = e.currentTarget.dataset.name
this.setData({
grade_name: name,
select: false
})
},
})
素材:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/53e0dfc6ef6e001de6c0f15e1534a37e.png)
效果图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f55a3b8d9ef074126baff9ec1bdd1dda.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/05566a96dd44e6bd332e0d2456c30167.png)