小程序详情页面多规格弹窗

在做小程序项目的时候  特别死像商城网站类的  商品有很多规格  需要点击触发弹窗，但是用直接显示和隐藏不能满足产品的需求，一般都是从下到上的弹出。官方文档

detail.wxml

<!-- 规则弹窗 -->
	<view class="popup {{open?'show':'hide'}}">
		<view class="popup-layout" catchtap="closeTap"></view>
		<view class="popup-container" wx:if="{{flag}}" animation="{{animationData}}">
			<view class="title text-center relative">
				<text>活动规则</text>
				<image catchtap="closeTap" src="../../images/chose.png"></image>
			</view>
			<view class="conts">
				<view class="font26 strong">下单返现规则：</view>
				<text>1、返现需3新用户首笔下单金额不低于你下单金额，如低于则返现最低下单金额</text>
				
			</view>
		</view>
	</view>

detail.js

 data: {
		
		open:false,
		flag:false,
		animationData:{},  //判断弹出上下滑动的
		
    },
// 规则弹窗
	ruleTap:function(){
		var that= this
		// 创建一个动画实例
		var animation  = wx.createAnimation({
		  // 动画持续时间
		    duration:300,
		    // 定义动画效果，当前是匀速
		    timingFunction:'linear'
		})
		 // 将该变量赋值给当前动画
		that.animation = animation
		// 先在y轴偏移，然后用step()完成一个动画
		animation.translateY(600).step()
		// 用setData改变当前动画
		that.setData({
			open:true,
			// 通过export()方法导出数据
			animationData: animation.export(),
			// 改变view里面的Wx：if
			flag:true
		})
		// 设置setTimeout来改变y轴偏移量，实现有感觉的滑动
		setTimeout(function(){
			animation.translateY(0).step()
			that.setData({
				animationData: animation.export()
			})
		},100);
	},
	//隐藏属性框
	closeTap:function(e){
	    var that = this;
	    var animation = wx.createAnimation({
	      duration:100,
	      timingFunction:'linear'
	    })
	    that.animation = animation
	    animation.translateY(600).step()
	    that.setData({
			open:false,
			animationData:animation.export()
	    })
	},

wxss

.popup{position: fixed;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;z-index: 99;}
.popup-layout{position: absolute;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.6);z-index: 100;}
.popup-container{position: absolute;left: 0;bottom: 0;right: 0; background: #fff;border-radius: 20rpx 20rpx 0 0;height: 60%; z-index: 999;}
.popup-container .title{height: 90rpx;line-height: 90rpx;}
.popup-container .title image{width: 39rpx;height: 39rpx;position: absolute;top: 25rpx;right: 25rpx;z-index: 999999;}
.conts{height: 90%;overflow-y: auto;padding-bottom: 30rpx;}
.conts .font26{width: 92%;display: block;margin: 0 auto;}
.conts text{width: 92%;display: block;margin: 0 auto;font-size: 22rpx;}

记录一下