微信小程序 功能函数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;
}
