html52.com
我爱小程序-开发者交流社区

picker-view出现部分机型显示问题

问题模块 API/组件名称 终端类型 微信版本 基础库版本
API和组件 picker-view 客户端 6.6.1 1.6.0

   },    ]    module.exports = {      areas    }请用多几部手机测试,因为是部分手机出现该问题部分手机会出现此问题,包括部分iphone,但是大部分手机都正常打开,该部分为省市二级联动选择器,根据picker-view组件开发


部分手机会出现此问题,包括部分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

    }




请用多几部手机测试,因为是部分手机出现该问题



评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

真正的个人免签约支付接口

云免签H5支付