[微信小程序]下拉菜单

 有问题可以扫码加我微信，有偿解决问题。承接小程序开发。

微信小程序开发交流qq群   173683895  、 526474645 ；

正文：

<h1 style="margin-left:25px;">动画效果是使用CSS3 @keyframes 规则(使 div 元素匀速向下移动)

<pre class="has">
<code class="language-html">
<view class="nav" wx:for='{{nav_title}}' wx:key="index">
<view class="nav_item page_row {{shownavindex == index? 'on' : ''}}" bindtap="click_nav" data-index="{{index}}">
<view class="content">{{item}}
<view class="red {{shownavindex == index? 'icon' : 'no_icon'}}">>

{{item}} 确认

<pre class="has">
<code class="language-css">.nav {
height: 80rpx;
line-height: 80rpx;
width: 25%;
text-align: center;
}
.nav_centent_arr {
height: 500rpx;
animation:mymove 3s;
}
@keyframes mymove
{
from {height:0px;}
to {height:500rpx;}
}
.nav_item {
border-bottom: 1px solid #999;
}
.content {
width: 100%;
}
.red {
display: inline-block;
color: #d0d0d0;
font-size: 28rpx;
}
.icon {
display: inline-block;
color: red;
transform: rotate(90deg);
}
.nav_centent {
margin: 30rpx 25rpx 20rpx 30rpx;
font-size: 32rpx;
border-bottom: 1px solid #f2f2f2;
padding-bottom: 30rpx;
}
.page_row {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}

<pre class="has">
<code class="language-javascript">var app = getApp();
var index;
var nav_centent_list =[
['离我最近','人气最旺','月销量最多'],['价格由低至高升序','价格由高至低降序','上架时间','销量由高至低排序'],['好评最多','好评最低'],['0-200','200-500','500-1000','1000以上']];
Page({
data: {
nav_title:['店铺','综合','评价','价格'],shownavindex: null,nav_centent: null
},click_nav: function (e) {
if (index == e.currentTarget.dataset.index && this.data.nav_centent != null){
index = e.currentTarget.dataset.index;
this.setData({
nav_centent: null,})
} else if (this.data.nav_centent == null) {
console.log(11)
index = e.currentTarget.dataset.index;
this.setData({
shownavindex: index,nav_centent: nav_centent_list[Number(index)]
})
} else {
console.log(22)
index = e.currentTarget.dataset.index;
this.setData({
shownavindex: index,nav_centent: nav_centent_list[Number(index)]
})
}
}
})

如有疑问或者指导,欢迎来到微信小程序开发交流qq群(173683895)进行交流探讨