微信小程序 功能函数picker-view的弹出模态
2023-09-11 14:17:23 时间
<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;
}
相关文章
- 【小程序】微信小程序实现富文本图文代码嵌入view(已解决)
- 微信小程序端在函数组件中使用 mobx 注入 store 失败
- taro + iview 实现跨平台开发(App,Wap,微信小程序)
- 微信小程序实战之 pay(支付页面)
- 微信小程序 - 父组件调用子组件的函数方法(像 Vue.js 中 ref 属性一样,直接 this.$refs.xx 获取子组件数据和方法)详细教程示例代码
- 微信小程序 - 每隔一段时间请求后端接口获取最新数据,页面每隔一段时间就触发一个函数(实时刷新数据,页面每隔 N 秒自动请求接口数据)让页面每隔一段时间就请求一次接口,详细示例教程可运行示例
- 微信小程序 - 在自定义组件中请求后端 API 数据接口(引入该组件的页面触发)组件在哪个生命周期钩子函数中请求接口数据呢?
- 微信小程序 - 在视图组件上绑定函数并携带参数(事件对象自定义属性传参)
- 微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
- JavaScript - vue.js / nuxt.js / uni-app / 微信小程序 js 时间戳与日期格式互转(时间戳转日期字符串格式,日期回转时间戳格式)支持转为日期字符串后自动补0
- 微信小程序前端function封装
- 微信小程序组件化开发框架WePY
- 微信小程序开发工具“当前系统代理不是安全代理”
- 微信小程序 功能函数 替换字符串内的指定字符
- 微信小程序 功能函数 把数字1,2,3,4换成春,夏,秋,冬
- 微信小程序 功能函数 openid本地和网络请求
- 微信小程序组件 日历
- 微信小程序 功能函数 支付接口
- 微信小程序 功能函数 客服
- 微信小程序 功能函数 购物车商品删除
- 微信小程序云开发实现增删改查(删)
- 微信小程序图片上传(土豆温床)
- 微信小程序~页面跳转
- 微信小程序webview打开第三方页面
- 微信小程序:防止多次点击跳转(函数节流)
- 微信小程序 - 使用npm(第三方包)
- 个微信小程序云开发云函数
- 微信小程序版本自动更新
- 【Serverless】云函数微信小程序