部分手机会出现此问题，包括部分iphone,但是大部分手机都正常打开，该部分为省市二级联动选择器，根据picker-view组件开发
示例代码:
<view class=“info-input-cell”>
<text>户籍所在地</text>
<view class=“info-input-box”>
<input type=“text”
name=“register”
bindtap=“selectDistrict”
data-tarname=“Register” disabled
placeholder=“请选择”
value="{{registerValue}}" />
</view>
</view>
<!–城市二级联动–>
<view class=“dialog-mask” style=“z-index:11;visibility:{{addressMenuIsShow ? ‘visible’: ‘hidden’}}” bindtap=“hideCitySelected” />
<view class=“animation-element-wrapper” animation="{{animationAddressMenu}}" style=“visibility:{{addressMenuIsShow ? ‘visible’:‘hidden’}}”>
<view class=“animation-element”>
<text class=“left-bt” catchtap=“cityCancel”>取消</text>
<text class=“right-bt” catchtap=“citySure”>确定</text>
<view class=“line”></view>
<picker-view class=“area-picker-common” indicator-style = “height: 80rpx;” value="{{value}}" bindchange=“cityChange”>
<!–省-->
<picker-view-column>
<view wx:for="{{provinces}}" wx:for-item=“sheng” wx:key="{{index}}">
{{sheng.rName}}
</view>
</picker-view-column>
<!–地级市–>
<picker-view-column>
<view wx:for="{{cities}}" wx:key="{{index}}">
{{item.rName}}
</view>
</picker-view-column>
</picker-view>
</view>
</view>
/* 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
that.startAddressAnimation(false)
// 将选择的城市信息显示到输入框
that.setData({
provincePicke:that.data.provinces[value[0]].id
})
let areaInfo = that.data.provinces[value[0]].rName + ‘,’ + that.data.cities[value[1]].rName
//根据tarName判断点击目标填入value
switch(that.data.tarName) {
case ‘Register’:
that.setData({
registerValue: areaInfo,
})
break;
}
},
hideCitySelected: function (e) {
this.startAddressAnimation(false)
},
// 处理省市县联动逻辑
cityChange: function (e) {
let that = this;
let value = e.detail.value
let provinces = that.data.provinces
let cities = that.data.cities
let provinceNum = value[0]
let cityNum = value[1]
// let countyNum = value[2]
if (that.data.value[0] != provinceNum) {
let id = provinces[provinceNum].id
that.setData({
value: [provinceNum, 0],
cities: AREAS.areas[provinceNum].cityRegion,
})
} else if (that.data.value[1] != cityNum) {
let id = cities[cityNum].id
that.setData({
value: [provinceNum, cityNum],
})
}
},
/* ***************************地址选择器end*************************** */
/* 省市数据 即area.js文件 */
var areas =[
{
“id”: 6,
“pId”: 1,
“rName”: “广东”,
“rType”: 1,
“cityRegion”: [
{
“id”: 79,
“pId”: 6,
“rName”: “东莞”,
“rType”: 2,
},
{
“id”: 76,
“pId”: 6,
“rName”: “广州”,
“rType”: 2,
},
{
“id”: 77,
“pId”: 6,
“rName”: “深圳”,
“rType”: 2,
},
]
},
{
“id”: 3,
“pId”: 1,
“rName”: “安徽”,
“rType”: 1,
“cityRegion”: [
{
“id”: 36,
“pId”: 3,
“rName”: “安庆”,
“rType”: 2,
},
]
},
{
“id”: 34,
“pId”: 1,
“rName”: “澳门”,
“rType”: 1,
“cityRegion”: [
{
“id”: 396,
“pId”: 34,
“rName”: “澳门”,
“rType”: 2,
}
]
},
]
module.exports = {
areas
}
请用多几部手机测试，因为是部分手机出现该问题
强力驱动