微信小程序 功能函数picker-view的弹出模态

<view class="list">

<form bindsubmit="formSubmit">

<view class="item-addr flexa" bindtap="translate">

<view>所在城市：</view>

<view style='color:#666' wx:if="{{valuetext?'':true}}">请选择</view>

<view>{{valuetext}}</view>

<input style='display:none' name="valuetext" placeholder-style="color:#333" placeholder="请选择" class="animation-button" bindtap="translate" value="{{valuetext}}"></input>

</view>

</form>

<!-- 地址代码 -->

<view class="animation-element-wrapper" animation="{{animation}}" style="visibility:{{show ? 'visible':'hidden'}}" bindtap="hiddenFloatView" data-id="444">

<view class="animation-element">

<text class="left-bt" catchtap="hiddenFloatView" data-id="555">取消</text>

<text class="right-bt" catchtap="hiddenFloatView" data-id="666">确定</text>

<view class="line"></view>

<picker-view indicator-style="height: 50rpx;" indicator-class="ccc" value="{{value}}" bindchange="bindChange">

<!--省-->

<picker-view-column >

<view wx:for="{{provinces}}" wx:for-item="sheng" wx:key="">

{{sheng.name}}

</view>

</picker-view-column>

<!--地级市-->

<picker-view-column>

<view wx:for="{{citys}}" wx:key="">

{{item.name}}

</view>

</picker-view-column>

<!--区县-->

<picker-view-column>

<!-- <view class="picker-view" wx:key="months{{index}}" wx:for="{{picker_month}}" style="line-height: 50px">{{item}}月</view> -->

<view wx:for="{{countys}}" wx:key="">

{{item.name}}

</view>

</picker-view-column>

</picker-view>

</view>

</view>

</view>

//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

 

//获取应用实例

var app = getApp()

// 地址相关数据---------------------

// var area = require('../../utils/date.js')

var pickerViewT = 0;

var show = false;

var moveY = 200;

// 地址相关数据尾部---------------------

Page({

data: {

cur_year:'',

cur_month:'',

cur_days: '',

cur_value: [0, 0, 0],

days: '',

},

// 地址相关函数 -----------------

 

// 地址相关函数 尾部-----------------

onLoad: function (options) {

},

// ------------------- 分割线 --------------------

onReady: function () {

},

//移动按钮点击事件

translate: function (e) {

if (pickerViewT == 0) {

moveY = 0;

show = false;

pickerViewT= 1;

} else {

moveY = 200;

show = true;

pickerViewT = 0;

}

// this.animation.translate(arr[0], arr[1]).step();

animationEvents(this, moveY, show);

},

//隐藏弹窗浮层

hiddenFloatView(e) {

// console.log(e);

moveY = 200;

show = true;

pickerViewT = 0;

animationEvents(this, moveY, show);

},

//------------------------------------------------------------

})

//动画事件

function animationEvents(that, moveY, show) {

// console.log("moveY:" + moveY + "\nshow:" + show);

that.animation = wx.createAnimation({

transformOrigin: "50% 50%",

duration: 400,

timingFunction: "ease",

delay: 0

}

)

that.animation.translateY(moveY + 'vh').step()

that.setData({

animation: that.animation.export(),

show: show

})

}

//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

.ccc{

border-top:2px solid #839AAF;

border-bottom:2px solid #839AAF;

}

picker-view-column{

margin: 0 20rpx;

}

/* 地址相关数据---------------------------------------------------- */

picker-view{

">white;

padding: 0;

width: 100%;

height: 380rpx;

bottom: 0;

position: fixed;

}

picker-view-column view{

vertical-align:middle;

font-size: 28rpx;

line-height: 28rpx;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

}

.animation-element-wrapper {

display: flex;

position: fixed;

left: 0;

top:0;

height: 100%;

width: 100%;

">rgba(0, 0, 0, 0.6);

overflow: hidden;

}

.animation-element {

display: flex;

position: fixed;

width: 100%;

height: 470rpx;

bottom: 0;

">rgba(255, 255, 255, 1);

}

.animation-element text{

color: #999999;

display: inline-flex;

position: fixed;

margin-top: 20rpx;

height: 50rpx;

text-align: center;

line-height: 50rpx;

font-size: 34rpx;

font-family: Arial, Helvetica, sans-serif;

}

.animation-element .left-bt{

left: 30rpx;

}

.animation-element .right-bt {

right: 30rpx;

}

.animation-element .line{

display: block;

position: fixed;

height: 1rpx;

width: 100%;

margin-top: 89rpx;

">#eeeeee;

}