微信小程序下拉框功能的实例代码微信小程序下拉框功能的实例代码
微信小程序组件里没有下拉框，正好要用到，记下来以后参考
wxml代码
<view class='top'>
<view class='top-text'> 选择接收班级</view>
<!-- 下拉框 -->
<view class='top-selected' bindtap='bindShowMsg'>
<text>{{grade_name}}</text>
<image src='/images/icon/down.png'></image>
</view>
<!-- 下拉需要显示的列表 -->
<view class="select_box" wx:if="{{select}}">
<view wx:for="{{grades}}" wx:key="unique">
<view class="select_one" bindtap="mySelect" data-name="{{item}}">{{item}}</view>
</view>
</view>
</view>
wxss代码
/* 顶部 */
.top{
width: 100vw;
height: 80rpx;
padding: 0 20rpx;
line-height: 80rpx;
font-size: 34rpx;
border-bottom: 1px solid #000;
}
.top-text{
float: left
}
/* 下拉框 */
.top-selected{
width: 50%;
display: flex;
float: right;
align-items: center;
justify-content: space-between;
border: 1px solid #ccc;
padding: 0 10rpx;
font-size: 30rpx;
}
/* 下拉内容 */
.select_box {
background-color: #fff;
padding: 0 20rpx;
width: 50%;
float: right;
position: relative;
right: 0;
z-index: 1;
overflow: hidden;
text-align: left;
animation: myfirst 0.5s;
font-size: 30rpx;
}
.select_one {
padding-left: 20rpx;
width: 100%;
height: 60rpx;
position: relative;
line-height: 60rpx;
border-bottom: 1px solid #ccc;
}
/* 下拉过度效果 */
@keyframes myfirst {
from {
height: 0rpx;
}
to {
height: 210rpx;
}
weixin_38590541
- 粉丝: 6
- 资源: 937
最新资源
- VCSEL芯片，中国前5强生产商排名及市场份额（by QYResearch）.pdf
- 办公型钢笔，全球前11强生产商排名及市场份额（by QYResearch）.pdf
- 车库卷帘门，全球前16强生产商排名及市场份额（by QYResearch）.pdf
- 机器人减速机，全球前10强生产商排名及市场份额（by QYResearch）.pdf
- 低温真空泵，全球前8强生产商排名及市场份额（by QYResearch）.pdf
- 钢制气瓶，全球前5强生产商排名及市场份额（by QYResearch）.pdf
- 加工油，全球前10强生产商排名及市场份额（by QYResearch）.pdf
- 瓶装水灌装设备，全球前7强生产商排名及市场份额（by QYResearch）.pdf
- 氢燃料电池无人机，全球前8强生产商排名及市场份额（by QYResearch）.pdf
- 全球功能纺织面料产业链，现状和趋势.pdf
- 全球轨道交通信号检测和监测各地区市场现状分析.pdf
- 全球吹雪机产业链，现状和趋势.pdf
- 全球轨道交通检测和监测市场现状分析.pdf
- 输送机托辊，全球前20强生产商排名及市场份额.pdf
- 全球轨道交通通信检测和监测各地区市场现状分析.pdf
- 压电堆叠执行器，全球前14强生产商排名及市场份额（by QYResearch）.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页