微信小程序电商系统省市区选择器(一)

原创
2016/12/20 18:55
阅读数 9.8K

动画演示

###要点一:固定底部(position:fixed)

page {
	position: relative;
	height: 100%;
}

/*弹窗主体*/
.modal-content {
	position: fixed;
	bottom: -285px;
	left: 0;
	width: 100%;
	height: 285px;
	margin-top: 5px;
	background: #fff;
	z-index: 999;
}

要点二、位移动画translateY

var animation = wx.createAnimation({
		    duration: 500,
		    timingFunction: 'ease-in-out',
		});
		this.animation = animation;
	    animation.translateY(-285).step();
	    this.setData({
	      animationData: this.animation.export(),
	      maskVisual: 'show'
	    });

<view animation="{{animationData}}" class="modal-content">

position文档出处

动画文档出处

附上完整代码:

js代码

cascadePopup: function() {
    	var animation = wx.createAnimation({
		    duration: 500,
		    timingFunction: 'ease-in-out',
		});
		this.animation = animation;
	    animation.translateY(-285).step();
	    this.setData({
	      animationData: this.animation.export(),
	      maskVisual: 'show'
	    });
    },
    cascadeDismiss: function () {
	    this.animation.translateY(285).step();
	    this.setData({
	      animationData: this.animation.export(),
	      maskVisual: 'hidden'
	    });
    }

wxml代码

<view class="modal">
	<view class="modal-mask {{maskVisual}}" bindtap="cascadeDismiss"></view>
	<view animation="{{animationData}}" class="modal-content">
	    <view class="modal-header">
	        <text class="modal-title">所在地区</text>
	        <text class="modal-close" bindtap="cascadeDismiss">X</text>
	    </view>
	    <view class="modal-body">
	    	<text class="viewpager-title">请选择</text>
	    	<view class="viewpager-divider"></view>
	    	<view class="viewpager-listview">
		    	<view>黑龙江</view>
		    	<view>内蒙古</view>
		    	<view>江苏</view>
		    	<view>山东</view>
		    	<view>安徽</view>
		    	<view>浙江</view>
		    	<view>福建</view>
	    	</view>
	    </view>
	</view>
</view>

wxss代码

page {
	position: relative;
	height: 100%;
}

/*弹窗主体*/
.modal-content {
	position: fixed;
	bottom: -285px;
	left: 0;
	width: 100%;
	height: 285px;
	/*box-shadow: 10rpx 0 30rpx rgba(0,0,0,.9);*/
	margin-top: 5px;
	background: #fff;
	z-index: 999;
}

/*遮罩层*/
.modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .8;
    z-index: 99;
}

/*弹窗头部*/
.modal-header {
	margin: 2px 0;
	font-size: 16px;
	color: #666;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	line-height: 30px;
}

/*所在地区字样*/
.modal-title {
	text-align: center;
	width: 100%;
}

/*关闭按钮*/
.modal-close {
	width: 20px;
}

.modal-body {
	font-size: 14px;
}

/*每级地区标题*/
.viewpager-title {
	padding: 0 10px;
	color: #f03118;
	line-height: 30px;
}

/*分隔线*/
.viewpager-divider {
	width: 100%;
	height: 1px;
	background: #ccc;
}

/*每行地址*/
.viewpager-listview view{
	line-height: 30px;
	padding: 0 10px;
}

/*初始隐藏*/
.hidden {
	display: none;
}

/*运行时显示*/
.show {
	display: block;
}

源码下载:关注下方的公众号->回复数字1007

对小程序开发有趣的朋友关注公众号: huangxiujie85,QQ群: 581513218,微信: small_application,陆续还将推出更多作品。

公众号

展开阅读全文
打赏
3
4 收藏
分享
加载中
更多评论
打赏
0 评论
4 收藏
3
分享
返回顶部
顶部