在uniapp中想写一个获取数字的组件1到20滑动选择数字这个要怎么写

在uniapp中，你可以使用uni-app官方提供的picker组件来实现滑动选择数字的功能。以下是一个简单的示例代码：

在 pages 目录下创建一个名为 number-picker 的页面，页面结构如下所示：

<template>
  <view class="content">
    <picker :value="selectedNumber" mode="selector" range="{{numberRange}}" @change="handleNumberChange">
      <view class="picker">
        <text>{{selectedNumber}}</text>
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedNumber: 1,
      numberRange: Array.from({ length: 20 }, (_, i) => i + 1)
    };
  },
  methods: {
    handleNumberChange(event) {
      this.selectedNumber = event.mp.detail.value + 1;
    }
  }
};
</script>

<style>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.picker {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}
</style>

在 pages.json 文件中注册 number-picker 页面：

{
  "pages": [
    {
      "path": "pages/number-picker/number-picker",
      "style": {
        "navigationBarTitleText": "Number Picker"
      }
    }
  ]
}

在需要使用该组件的页面中，可以通过 navigator 组件跳转到 number-picker 页面：

<navigator url="/pages/number-picker/number-picker">选择数字</navigator>

以上代码实现了一个简单的滑动选择数字的组件，数字范围为1到20。当用户选择数字时，会触发 @change 事件，通过 handleNumberChange 方法来更新选中的数字。用户选择的数字会显示在指定的区域内。

你可以根据自己的需求对组件进行进一步的样式和功能定制