picker-view出现部分机型显示问题-微信小程序教程

时间：2019-05-07 来源：小程序工厂

部分手机会出现此问题，web-view点击左上角返回，返回后tab页面内容空白微信小程序开发教程 ...。包括部分iphone,但是大部分手机都正常打开，该部分为省市二级联动选择器，根据picker-view组件开发

示例代码:

户籍所在地

name="register"
bindtap="selectDistrict"
data-tarname="Register" disabled
placeholder="请选择"
value="{{registerValue}}" />

取消
确定

/* picker-view wxss代码部分 */
/* ***************地址选择器样式************** */
/* 遮罩层 */
.dialog-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 8;
background: rgba(0, 0, 0, 0.3);
}

.area-picker-common{
background-color: white;
padding: 0;
width: 100%;
height: 500rpx;
bottom: 0;
position: fixed;
}

.area-picker-common picker-view-column view{
width:100%;
vertical-align:middle;
font-size: 30rpx;
line-height: 30rpx;
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%;
/*background-color: rgba(0, 0, 0, 0.6);*/
transform: translateY(100vh);
z-index: 99
}
.animation-element {
display: flex;
position: fixed;
width: 100%;
height: 600rpx;
bottom: 0;
background-color: rgba(255, 255, 255, 1);
}

.left-bt,
.right-bt{
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;
}
.left-bt{
left: 30rpx;
color: #999999;
}
.right-bt {
right: 30rpx;
color:#63b64e;
}

.line{
display: block;
position: fixed;
height: 1rpx;
width: 100%;
margin-top: 89rpx;
background-color: #eeeeee;
}

/* js代码部分 */

const AREAS = require('../../data/area.js')

onReady: function () {
// 初始化动画变量
let animation = wx.createAnimation({
duration: 500,
transformOrigin: "50% 50%",
timingFunction: 'ease',
})
that.animation = animation;
// 地址选择器默认联动显示北京
that.setData({
provinces: AREAS.areas,
cities: AREAS.areas[0].cityRegion,
})
},

/* ***************************地址选择器start*************************** */
// 点击所在地区弹出选择框
selectDistrict: function (e) {
let that = this
if (that.data.addressMenuIsShow) {
return
}
let tarName = e.currentTarget.dataset.tarname;
that.setData({
tarName:tarName
})
that.startAddressAnimation(true)
console.log(e);
},
// 执行动画
startAddressAnimation: function (isShow) {
let that = this
if (isShow) {
that.animation.translateY(0 + 'vh').step()
} else {
that.animation.translateY(100 + 'vh').step()
}
that.setData({
animationAddressMenu: that.animation.export(),
addressMenuIsShow: isShow,
})
},
// 点击地区选择取消按钮
cityCancel: function (e) {
this.startAddressAnimation(false)
},
// 点击地区选择确定按钮
citySure: function (e) {
let that = this
let city = that.data.city
let value = that.data.value

上一篇：wx.playVoice不能播放wxfile://文件吗？

下一篇：picker-view出现部分机型显示问题-微信小程序教程