微信小程序select下拉框实现源码

这篇文章主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉,这里为了更清楚的显示小程序层级 就把源码直接复制过来了

<view class='list-msg'>

<view class='list-msg1'>

<text>商品金额</text>

<text>¥99.00</text>

</view>

<!--下拉框 -->

<view class='list-msg2' bindtap='bindShowMsg'>

<text>{{tihuoWay}}</text>

<image style='height:20rpx;width:20rpx;' src='/images/down.png'></image>

</view>

<view class='list-msg1'>

<text>运费</text>

<text></text>免邮</view>

<view class='list-msg1'>

<text>实际付款</text>

<text style='color:red'>¥99.00</text>

</view>

<!-- 下拉需要显示的列表 -->

<view class="select_box" wx:if="{{select}}">

<view class="select_one" bindtap="mySelect" data-name="重庆分店">重庆分店</view>

<view class="select_one" bindtap="mySelect" data-name="东莞南城分店">东莞南城分店</view>

<view class="select_one" bindtap="mySelect" data-name="东莞总店">东莞总店</view>

</view>

</view>

下面是js代码

Page({

/**

* 页面的初始数据

*/

data: {

select: false,

tihuoWay: '门店自提'

},

/**

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

*/

onLoad: function(options) {

},

bindShowMsg() {

this.setData({

select: !this.data.select

})

},

mySelect(e) {

var name = e.currentTarget.dataset.name this.setData({

tihuoWay: name,

select: false

})

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function() {

}

})

.list - msg {

padding: 0 20rpx;

background - color: #fff;

position: relative;

}

.list - msg1 {

height: 60rpx;

display: flex;

align - items: center;

justify - content: space - between;

}

.list - msg.list - msg2 {

height: 60rpx;

display: flex;

align - items: center;

justify - content: space - between;

border: 1px solid#ccc;

padding: 0 10rpx;

}

.select_box {

background - color: #eee;

padding: 0 10rpx;

width: 93 % ;

position: absolute;

top: 130rpx;

z - index: 1;

overflow: hidden;

animation: myfirst 0.5s;

}

@keyframes myfirst {

from {

height: 0rpx;

}

to {

height: 210rpx;

}

}

.select_one {

height: 60rpx;

line - height: 60rpx;

border - bottom: 1px solid#ccc;

}

以上是 微信小程序select下拉框实现源码 的全部内容, 来源链接: utcz.com/z/332485.html

回到顶部