1、效果图
2、页面
<view class="top">
<view class='list_msg'>
<!--下拉框 -->
<view class='list_msg2' bindtap='bindShowMsg'>
<text>{{tihuoWay}}</text>
<image style='height:20rpx;width:20rpx;' src='/images/down.png'></image>
</view>
<!-- 下拉需要显示的列表 -->
<view class="select_box" wx:if="{{select}}">
<block wx:for="{{items}}">
<view class="select_one" bindtap="mySelect" data-name="{{item.txt}}">{{item.txt}}</view>
</block>
</view>
</view>
</view>
2、样式
.top {
width: 100%;
position: fixed;
top: 0;
background-color: #fff;
z-index: 8;
border-bottom: 1px solid #f2f2f2;
}
.list_msg {
padding: 0 20rpx;
background-color: #fff;
position: relative;
}
.list_msg .list_msg2 {
height: 80rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10rpx;
}
.select_box {
background-color: #fff;
padding: 0 10rpx;
width: 93%;
position: absolute;
top: 90rpx;
z-index: 1;
overflow: hidden;
animation: myfirst 0.5s;
}
@keyframes myfirst {
from {
height: 0rpx;
}
to {
height: 80rpx;
}
}
.select_one {
height: 80rpx;
line-height: 80rpx;
border-bottom: 1px solid #f2f2f2;
}
3、js
Page({
/**
* 页面的初始数据
*/
data: {
select: false,
tihuoWay: '请选择课程'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.tempData();
},
bindShowMsg() {
this.setData({
select: !this.data.select
})
},
mySelect(e) {
var name = e.currentTarget.dataset.name;
this.setData({
tihuoWay: name,
select: false
})
},
//测试临时数据
tempData: function() {
var items = [{
txt: "数学"
},
{
txt: "英语"
},
{
txt: "马克思哲学"
},
{
txt: "中国近代史"
},
{
txt: "C++"
},
{
txt: "计算机原理"
},
{
txt: "前端开发"
},
{
txt: "java基础"
},
{
txt: "精益培训"
},
{
txt: "运维设计"
},
{
txt: "淘宝开店"
},
];
this.setData({
items: items
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})