微信小程序实现单列下拉菜单效果
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了微信小程序单列下拉菜单，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
接下来我想做的是一个下拉菜单用来分类的，但是在网上搜了一下，基本上全都是比较复杂的分类菜单，最简单的也是分三列的下拉菜单，但是并不想要这么复杂的，最后找了一个三列的，改成了单列。也把代码尽可能的简单化了。
实现的效果图：
合并状态：
首先狼蚁网站SEO优化是目录结构：
狼蚁网站SEO优化是实现的具体代码：
.wxml
<!--选择框-->
<view class="product-list">
<!--条件选择-->
<view class="choice-bar">
<view bindtap="opens" data-item="1" class="chioce-item" hover-class="click-once-opaque">{{start}}
<image class="icon-chioce" src="{{!isstart?openimg: offimg}}"></image>
</view>
<view class="sorting-list{{!isstart?' chioce-list-hide':' chioce-list-show'}}">
<view wx:for="{{slist}}" catchtap="onclicks1" data-index="{{index}}" class="sorting-item" hover-class="click-once" wx:key="userInfoListId" >{{item.name}}</view>
</view>
</view>
</view>
.wxss
.product-list {
width: 100%;
box-sizing: border-box;
}
.choice-bar {
position: fixed;
display: flex;
width: 100%;
font-size: 14px;
background-color: #fff;
/**z-index: 0;**/
}
.chioce-item {
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20rpx;
width: 100%;
height: 80rpx;
border-top: 1rpx solid #ddd;
border-bottom: 1rpx solid #ddd;
border-left: 1rpx solid #ddd;
/*border-right: 1rpx solid #ddd;*/
}
.icon-chioce {
height: 30rpx;
width: 30rpx;
}
.district-list,.sorting-list,.filter-list {
margin-top: 2rpx;
position: absolute;
top: 80rpx;
left: 0;
width: 100%;
background-color: #fff;
z-index: -1;
font-size: 14px;
border-bottom: 1rpx solid #ddd;
}
.chioce-list-hide {
display: none !important;
}
.chioce-list-show {
/**top: 80rpx;**/
animation: slide 500ms;
}
.sorting-item {
height: 80rpx;
line-height: 80rpx;
padding: 0 40rpx;
border-bottom: 1rpx solid #ddd;
}
.js
Page({
data: {
start: "起始地",
slist: [
{ id: 1, name: "第一类" },
{ id: 1, name: "第二类" },
{ id: 1, name: "第三类" },
{ id: 1, name: "第四类" },
{ id: 1, name: "第五类" },
],
isstart: false,
openimg: "/images/list/list.png",
offimg: "/images/list/list1.png"
},
opens: function (e) {
switch (e.currentTarget.dataset.item) {
case "1":
if (this.data.isstart) {
this.setData({
isstart: false,
});
}
else {
this.setData({
isstart: true,
});
}
break;
}
},
onclicks1: function (e) {
var index = e.currentTarget.dataset.index;
let name = this.data.slist[index].name;
this.setData({
isstart: false,
isfinish: false,
isdates: false,
start: this.data.slist[index].name,
finish: "目的地"
})
}
})
以上所述是长沙网络推广给大家介绍的微信小程序单列下拉菜单详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
上一篇：微信小程序实现的五星评价功能示例
下一篇：Vue组件通信的几种实现方法