[微信小程序]下拉菜单

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

   承接微信小程序开发。扫码加微信。

正文：

动画效果是使用CSS3 @keyframes 规则(使 div 元素匀速向下移动)

 

 

<view class=' page_row'>
  <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'}}">></view>
      </view>
    </view>
  </view>
</view>
<view class='nav_centent_arr' wx:if="{{nav_centent.length}}">
  <view style="height:408rpx">
    <block wx:for="{{nav_centent}}" wx:key="index">
      <view class='nav_centent'>{{item}}</view>
    </block>
  </view>
  <button class='nav_btn'>确认</button>
</view>

 

.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;
}

 

 

 

 

 

 

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,
        shownavindex: 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)进行交流探讨