动画效果是使用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)进行交流探讨

[微信小程序]下拉菜单相关推荐

微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
微信小程序--下拉刷新
实现微信小程序下拉刷新步骤一 json文件配置(若需要全局配置,则在app.json 反正就配置本界面得到json即可) {"enablePullDownRefresh": tr ...
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果由于最近一段时间真的是太忙了,没有顾上即使更新博客,还请粉丝们见谅,最近要实现这样一个效果,这个效果跟淘宝二层楼和新 ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
微信小程序下拉不触发onPullDownRefresh
微信小程序下拉onpulldownrefresh不触发简单记录下微信小程序下拉不触发方法的问题 1.下拉出发需要在app.json中配置下拉的内容 "window": {&quo ...
微信小程序下拉刷新问题
微信小程序下拉刷新问题我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享一下,有这个问题朋友,赶紧从死胡 ...
下拉多选框微信小程序_微信小程序下拉框功能的实例代码
微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码选择接收班级 {{grade_name}} {{item}} wxss代码 /* 顶部 */ .top{ width: 100vw ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法
这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正.[推荐教程:小程序开发教程] 适用场景 ...

[微信小程序]下拉菜单

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

正文：

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

[微信小程序]下拉菜单相关推荐

最新文章

热门文章