接下來我想做的是一個(gè)下拉菜單用來分類的，但是在網(wǎng)上搜了一下，基本上全都是比較復(fù)雜的分類菜單，最簡單的也是分三列的下拉菜單，但是并不想要這么復(fù)雜的，最后找了一個(gè)三列的，改成了單列。也把代碼盡可能的簡單化了。
五華網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)2013年開創(chuàng)至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
實(shí)現(xiàn)的效果圖：
合并狀態(tài)：
首先下面是目錄結(jié)構(gòu)：
下面是實(shí)現(xiàn)的具體代碼：
.wxml
{{start}} {{item.name}}
.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: "目的地"
})
}
})
以上所述是小編給大家介紹的微信小程序單列下拉菜單詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
