• 当前标签:下拉选项

程序开发 小程序下拉选项动画效果

下拉选项模态框,点击时有慢慢下来、收回动画: wxml: <view class='flex_aic nav'>     <view class='nav_li'>       <view bindtap='open_box' data-type='0' class="nav_li_tit {{box_zhiwu?'text_color':''}}">         <text>菜单一</text>         <text class="iconfont icon-xiala {{box_zhiwu?'text_color':''}}"></text>       </view>       <!-- box -->       <view class='zhiwu_box' hidden="{{!box_zhiwu}}">         <view bindtap='open_box' data-type='0' class='box_bg'></view>         <view class='box_list' style="top:{{top}};" animation="{{animationData}}">           <view bindtap='bindtap' data-type='0' wx:for="{{zhiwu_list}}" data-id='{{item.id}}' wx:key="{{item.id}}" class="box_li {{item.id == zhiwu_active?'text_color':''}}">             <text>{{item.title}}</text>              <icon wx:if="{{item.id == zhiwu_active}}" type="success_no_circle" size="15" color="#ED7701"/>           </view>         </view>       </view>       <!-- box end -->     </view>     <view class='nav_li'>       <view bindtap='open_box' data-type='1' class="nav_li_tit {{box_source?'text_color':''}}">         <text>菜单二</text>         <text class="iconfont icon-xiala {{box_source?'text_color':''}}"></text>       </view>       <!-- box -->       <view class='zhiwu_box' hidden="{{!box_source}}">         <view bindtap='open_box' data-type='1' class='box_bg'></view>         <view class='box_list' style="top:{{top}};" animation="{{animationData}}">           <view bindtap='bindtap' data-type='1' wx:for="{{source_list}}" data-id='{{item.id}}' wx:key="{{item.id}}" class="box_li {{item.id == source_active?'text_color':''}}">             <text>{{item.title}}</text>              <icon wx:if="{{item.id == source_active}}" type="success_no_circle" size="15" color="#ED7701"/>           </view>         </view>       </view>       <!-- box end -->     </view>     <view class='nav_li'>       <view bindtap='open_box' data-type='2' class="nav_li_tit {{box_status?'text_color':''}}">         <text>菜单三</text>         <text class="iconfont icon-xiala {{box_status?'text_color':''}}"></text>       </view>       <!-- box -->       <view class='zhiwu_box' hidden="{{!box_status}}">         <view bindtap='open_box' data-type='2' class='box_bg'></view>         <view class='box_list' style="top:{{top}};" animation="{{animationData}}">           <view bindtap='bindtap' data-type='2'  wx:for="{{status_list}}" data-id='{{item.id}}' wx:key="{{item.id}}" class="box_li {{item.id == status_active?'text_color':''}}">             <text>{{item.title}}</text>              <icon wx:if="{{item.id == status_active}}" type="success_no_circle" size="15" color="#ED7701"/>           </view>         </view>       </view>       <!-- box end -->     </view>   </view> wxss:(仅供参考) .nav {   height: 50px;   padding: 20px 10px;   background-color: #fff;   border-bottom: 1px solid #eee;   font-size: 30rpx;   position: relative; } .nav_li {   border-right: 1px solid #ccc;   padding: 0 10px;   margin: 10px 0;   line-height: 1; } .nav_li_tit {   margin-left: 10px; } .nav_li_tit .icon-xiala {   margin-left: 5px;   color: #d3d3d3; } .zhiwu_box {   position: absolute;   top: 50px;   left: 0;   overflow: hidden;   width: 100vw;   z-index: 1; } .box_bg {   position: fixed;   top: 60px;   left: 0;   width: 100vw;   height: calc(100vh - 50px);   background-color: rgba(0, 0, 0, 0.5);   z-index: 1; } .box_list {   position: relative;   left: 0;   top: 0;   z-index: 2;   background-color: #fff; } .box_li {   width: 100%;   height: 40px;   display: flex;   align-items: center;   justify-content: space-between;   padding: 10px;   border-bottom: 1px solid #eee;   font-size: 30rpx; } js:(重点来了) var animation = wx.createAnimation({     duration: 500,     timingFunction: "linear",     delay: 0   })   Page({ /**      * 页面的初始数据      */     data: {       zhiwu_active: 1, // 职务列表默认id       source_active: 1, // 简历来源默认id       status_active: 1, // 简历状态默认id       box_zhiwu: false, // 招聘职务盒子       box_source: false, // 简历来源盒子       box_status: false, // 简历状态盒子       top: '-1000px', // 下拉列表初始位置       animationData: {},       zhiwu_list: [         {           id: 1,           title: '全部'         },         {           id: 2,           title: '律师'         },         {           id: 3,           title: '会计助理'         },         {           id: 4,           title: '数据分析师'         },       ],       source_list: [         {           id: 1,           title: '全部'         },         {           id: 2,           title: '自荐'         },         {           id: 3,           title: '智能匹配'

2018-03-02 09:01:47 184 0 0
阅读详情
  • 1
前往