收藏
回答

如何解决picker-view-column的ios机型渲染的问题?

      <picker-view

        :immediate-change="true"

        :indicator-style="indicatorStyle"

        indicator-class="selectLine"

        @change="bindChange"

        class="picker-view"

        :mask-style="maskStyle"

        :value="[time, min]"

      >

        <picker-view-column class="pickerContainer" style="margin-left: 15rpx;margin-right: 15rpx;">

          <view

            class="item"

            v-for="(item, index) in times"

            :key="index"

            :class="{

              size1: time == item - 1 || time == item + 1,

              size2: time > item || time < item,

            }"

          >{{ item }}</view>

        </picker-view-column>

        <picker-view-column class="pickerContainer" style="margin-left: 15rpx;margin-right: 15rpx;">

          <view

            class="item"

            v-for="(item, index) in minutes"

            :key="index"

            :class="{

              size1: min == item - 1 || min == item + 1,

              size2: min > item || min < item,

            }"

          >{{ item }}</view>

        </picker-view-column>

      </picker-view>

代码是这样的,我的数据左侧times和右侧minutes,在安卓机型中点击展示正常,iOS机型很容易出现不渲染的情况,如图。

我目前左侧需要到999元,我打印出来发现,其实数据已经处理好了,但是就是渲染不到页面中,我尝试过使用定时器,先渲染一部分,打开之后再渲染,倒是不会再出现这个问题了,但是滑动的时候页面就会很卡顿,也无法根本解决问题。所以我想知道是不是iOS会导致渲染异常,我安卓没出现过这个问题,大佬们可以帮忙解决吗?

附上赋值的代码

created() {

    for (let i = 0; i < 1000; i++) {

      this.times.push(i);

    }

    for(let i =0;i<100;i++){

      let num = i;

      if (num < 10) num = "0" + i;

      this.minutes.push(num);

    }

  },


回答关注问题邀请回答
收藏

2 个回答

登录 后发表内容