android仿微信小程序下拉,微信小程序丨scroll-view实现下拉列表弹窗

在一些特殊的UI设计中，需要点击某一处然后弹出下拉菜单列表进行交互。下面介绍一种比较简单的实现方法：

wxml文件，使用isShowSelectList参数来控制列表是否隐藏，添加绑定事件bindtap="tapSelectBackView"。

请选择设备

箱子名称

其它箱子

箱子名称

箱子名称

箱子名称

箱子名称

wxss文件，将.selectListView的位置设置为position: absolute;

page {

background: #F9F9F9;

color: #13243C;

font-size: 17px;

}

.selectDevice,.selectConnect {

margin-top: 15px;

margin-left: 30px;

margin-right: 30px;

}

.selectBackView {

background: #3C3D54;

margin-top: 10px;

margin-left: 30px;

margin-right: 30px;

display: flex;

flex-direction: row;

align-items:center;

width: auto;

height: 55px;

border-radius: 4px 4px 0px 0px;

}

.selDevIcon {

width: 38px;

height: 38px;

margin-left: 20px;

}

.selDevName {

color: white;

font-size: 18px;

margin-left: auto;

margin-right: 5px;

}

.selRightIcon {

width: 20px;

height: 20px;

margin-right: 20px;

}

.selectListView {

background: white;

position: absolute;

margin-left: 30px;

display: flex;

flex-direction: column;

width: calc(100% - 30px * 2);

height: calc(55px * 3);

white-space: nowrap;

}

.selCellView {

background: #00B99B;

display: flex;

flex-direction: row;

align-items:center;

width: 100%;

height: 55px;

}

.unselCellView {

background: white;

display: flex;

flex-direction: row;

align-items:center;

width: 100%;

height: 55px;

}

.unselDevName {

font-size: 18px;

margin-left: auto;

margin-right: 5px;

}

js文件，在tapSelectBackView点击事件中控制isShowSelectList的值来让列表进行展示。

Page({

/**

* 页面的初始数据

*/

data: {

isShowSelectList: false,

},

tapSelectBackView: function() {

this.setData({

isShowSelectList: !this.data.isShowSelectList

})

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function(options) {

}

})