不多说直接上代码
1、WXML代码:
<view class="container">
<view class="goods-type">
<view class="select-content">
<view class="select-border" bindtap="showSelectBox">
<text>{{chooseItem}}</text>
<text class="arrow"></text>
</view>
<view class="select-box" wx:if="{{selectBox}}">
<view class="select-item" bindtap="chooseSelectItem" data-name="分类一">分类一</view>
<view class="select-item" bindtap="chooseSelectItem" data-name="分类二">分类二</view>
<view class="select-item" bindtap="chooseSelectItem" data-name="分类三">分类三</view>
</view>
</view>
</view>
</view>
2、 WXSS代码:文章来源:https://www.toymoban.com/news/detail-561404.html
.container {
width: 100%;
min-height: 100vh;
background-color: rgba(238, 239, 241, 1)
}
.goods-type {
height: 80rpx;
background-color: #fff;
padding: 0 20rpx;
}
.select-content {
position: relative
}
.select-border {
width: calc(50% - 20rpx);
height: 60rpx;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #f55095;
padding: 0 10rpx
}
.select-border .arrow {
width: 0;
height: 0;
border-style: solid;
border-width: 8.7px 5px 0 5px;
border-color: #f55095 transparent transparent transparent;
}
.select-box {
background-color: #fff;
padding: 0 10rpx;
width: calc(50% - 20rpx);
position: absolute;
z-index: 99;
overflow: hidden;
border: 1rpx solid #f55095;
border-top: none;
}
.select-item {
height: 60rpx;
line-height: 60rpx;
}
.select-item:last-child {
border: none;
}
3、JS代码:文章来源地址https://www.toymoban.com/news/detail-561404.html
Page({
/**
* 页面的初始数据
*/
data: {
selectBox: false,
chooseItem: '全部分类'
},
//选择下拉选项
chooseSelectItem: function(e){
let name = e.currentTarget.dataset.name;
this.setData({
selectBox: false,
chooseItem: name
})
},
//显示隐藏下拉列表
showSelectBox: function(){
this.setData({
selectBox: !this.data.selectBox
})
}
})
到了这里,关于微信小程序实现下拉筛选的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!