【uni-app】解决scroll-view中内嵌input真机卡顿问题

在开发微信小程序时，scroll-view组件中会嵌套多个input组件，在真机测试上会出现页面卡顿问题，这属于微信小程序底层问题，目前没有很好的解决方案。因此，需要从另一个角度解决问题，例如，在开发购物车时数量使用view或text组件包裹，点击数量时将text组件替换成input组件，当输入完成后，再将input组件替换成text组件，即可解决问题。

<template>
  <view class="content">
    <view class="page">
      <scroll-view class="scroll" scroll-x="true">
        <view class="item" v-for="(item, index) in items" :key="index">
          <view class="title">{{ item.title }}</view>
          <view class="amount-wrap">
            <view class="amount-wrap-title">数量：</view>
            <view class="amount-wrap-amount">
              <!-- 如果isInput的值为false，则显示text组件，隐藏input组件 -->
              <text class="amount-wrap-text" v-if="!item.isInput" @click="showInput(index)">
                {{ item.amount }}
              </text>
              <input
                v-else
                v-model="item.amount"
                :focus="true"
                @blur="hideInput(index)"
              />
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  name: "cart",
  data() {
    return {
      items: [
        {
          title: "JavaScript",
          amount: 1,
          isInput: false,
        },
        {
          title: "Vue1",
          amount: 2,
          isInput: false,
        },
        {
          title: "Vue2",
          amount: 3,
          isInput: false,
        },
        {
          title: "Vue3",
          amount: 4,
          isInput: false,
        },
        {
          title: "Vue4",
          amount: 5,
          isInput: false,
        },
        {
          title: "Vue5",
          amount: 6,
          isInput: false,
        },
        {
          title: "Vue6",
          amount: 7,
          isInput: false,
        },
        {
          title: "Vue7",
          amount: 8,
          isInput: false,
        },
        {
          title: "Vue8",
          amount: 9,
          isInput: false,
        },
        {
          title: "Vue9",
          amount: 10,
          isInput: false,
        },
        {
          title: "Vue10",
          amount: 11,
          isInput: false,
        },
      ],
    };
  },
  methods: {
    // 显示input组件
    showInput(index) {
      this.items[index].isInput = true;
      // 使用$set解决改变值视图不渲染的问题
      this.$set(this.items, index, this.items[index]);
    },
    // 隐藏input组件
    hideInput(index) {
      this.items[index].isInput = false;
      // 如果不填内容，则默认为0
      if(!this.items[index].amount){
        this.items[index].amount = 0
      }
      this.$set(this.items, index, this.items[index]);
    },
  },
};
</script>

<style scoped lang="scss">
.page{
  padding: 30rpx;
}
.item{
  margin: 20rpx 0;
}
.amount-wrap{
  display: flex;
  width: 100%;
}
.amount-wrap-title{
  width: auto;
}
.amount-wrap-amount{
  min-width: 70%;
}
.amount-wrap-text{
  padding: 0 30rpx 0 0;
}
</style>

注意，一定要使用v-if，不要用v-show，因为v-if不会将元素渲染到视图中。由于scroll-view组件内部并没有input组件，因此不会卡顿。还要注意的是，这里的input不是HTML的input元素，而是uni-app的input组件