front/pages/information/boy_height_roll/boy_height_roll.vue

<template>
  <view class="container">
    <picker-view 
		@change="onPickerChange" 
		class="picker_view_box"
		:value="pickerValue" 
		mask-style="opacity:0%"
		indicator-style="height:3rem"
	>
      <picker-view-column>
        <view v-for="(item, index) in options" :key="index" class="item">
          {{ item }}
        </view>
      </picker-view-column>
    </picker-view>

    <image class="button" @click="go_to_height" src="/static/information/boy_height/pictures/button2.png"></image>
  </view>
<!-- TODO:修改 -->
</template>

<script>
// TODO:修改
export default {
  data() {
    return {
      options: this.generateHeightOptions(150, 200), 
      pickerValue: [15], // 默认选中项的索引
    };
  },
  methods: {
	generateHeightOptions(start, end) {
		const options = [];
	    for (let i = start; i <= end; i++) {
	    options.push(`${i} cm`);
	    }
	    return options;
	},
    onPickerChange(event) {
      this.pickerValue = event.detail.value; // 更新选中的索引
    },
    navigateTo(page) {
      uni.navigateTo({
        url: page
      });
    },
    
    go_to_height() {
      const selectedValue = this.options[this.pickerValue[0]]; // 获取选中的值
      this.navigateTo(`/pages/information/boy_height_end/boy_height_end?height=${selectedValue}`); // 跳转到 boy_height_end，并传递选中值
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  height: 100vh; /* 使容器充满整个视口 */
  padding: 20px;
  background-image: url("/static/information/boy_height/pictures/bkg_roll.png");
  background-size: cover;
}

.picker_view_box {
  height: 42.8vh; /* 设置 picker-view 的高度 */
  width: 80%; /* 宽度自适应 */
}

.item {
	line-height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	height: 3rem;
	color: #ffffff;
}

.button {
  margin-top: 10px; /* 按钮与选择器之间的间距 */
  position: absolute;
  height: 13%;
  width: 80%;
  right: 10%; /* 距右边 10% */
  bottom: 2%; /* 距底部 3.5% */
}
</style>