mpvue小程序 上拉菜单

template

<view class="drawer_screen" v-if="updateTel"></view> //遮罩层

<view :animation="animationData" class="drawer_attr_box" v-if="updateTel"> 

<view class="drawer_content">

//里面可以放你想要的一些东西

</view>

</view>

 

script

 

//放一些点击显示的效果

util(currentStatu) {

/* 动画部分 */

// 第1步：创建动画实例

var animation = wx.createAnimation({

duration: 200, //动画时长

timingFunction: "linear", //线性

delay: 0 //0则不延迟

});

// 第2步：这个动画实例赋给当前的动画实例

this.animation = animation;

// 第3步：执行第一组动画：Y轴偏移240px后(盒子高度是240px)，停

animation.translateY(240).step();

// 第4步：导出动画对象赋给数据对象储存

this.animationData = animation.export();

// 第5步：设置定时器到指定时候后，执行第二组动画

setTimeout(

function() {

// 执行第二组动画：Y轴不偏移，停

animation.translateY(0).step();

// 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象

this.animationData = animation;

}.bind(this),

200

);

// 显示抽屉

if (currentStatu == "address_open") {

this.addAddress = true;

}

if (currentStatu == "update_open") {

this.updateAddresss = true;

}

}

 

style

//样式

 

.drawer_screen {

100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 1000;

background: #000;

opacity: 0.2;

overflow: hidden;

}

/*content*/

.drawer_attr_box {

100%;

overflow: hidden;

position: fixed;

bottom: 0;

left: 0;

z-index: 1001;

background: #fff;

}

.drawer_content {

padding: 20rpx 40rpx;

height: 470rpx;

overflow-y: scroll;

}

 

这是目前对于我来说还算差不多满意的一个,推荐给大家!!!