小程序中是没有h5中的下拉标签的所以要实现下拉功能就必须自己动手写拉

这里为了更清楚的显示层级就把源码直接复制过来了

视图类='列表-消息'视图类='列表-消息1 '文本商品金额/text text99.00/text /view！-下拉框-view class=' list-msg 2 ' bind tap=' bindshomsg ' text { { TihuaWey } }/text image style=' height :20 rpx；宽度宽度：20rpx'src='/images/down。png '/image/view view class=' list-msg 1 '文本运费/text文本/text免邮/view view class='list-msg1 '文本实际付款/text text style=' color : red '99.00/text/view！-下拉需要显示的列表-view class=' select _ box ' wx : if=' { { select } } ' view class=' select _ one ' bind tap=' my select ' data-name='重庆分店'重庆分店/view view class=' select _ one ' bind tap=' MySelect ' data-name='东莞南城分店'东莞南城分店/view view class=' select _ one ' bind tap=' MySelect ' data-name='东莞总店'东莞总店/视图/视图/视图下面是射流研究…代码

页面({ /** *页面的初始数据*/data: { select: false，tihuoWay: '门店自提' }, /** * 生命周期函数-监听页面加载*/onLoad:函数（选项){ }，BindShowMSG(){ this。SetDATa({ select :this.data.select }) }，my select(e){ var name=e . current target。数据集。说出这个。setdata({ tiho way : name，select: false }) }，/** *用户点击右上角分享*/onsharepmessage :函数(){ }})。list-msg { padd : 0 20 rpx；背景-color : # fff；相对位置：} .列表-msg 1 {高度： 60 rpxdisplay : flex align-items :居中；正义-内容：空格；} .列表-消息。列表-msg 2 {高度： 60 rpxdisplay : flex align-items :居中；正义-内容：空格；border: 1px固体# cccpadding: 0 10rpx}。select _ box {底色： # eepadding: 0 10rpx宽度： 93%;绝对位置：top : 130 rpxz-index : 1；飞越：隐藏；animation: myfirst 0.5s} @关键帧myfirst { from { height: 0rpx}至{ height: 210rpx}}。select _ one { height: 60rpx线高： 60 rpx边框-底部： 1px实心# ccc}以上所述是小编给大家介绍的微信小程序挑选下拉框实现效果详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！