You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

87 lines
2.1 KiB

<template>
<view class="container">
<picker-view
@change="onPickerChange"
mask-style="opacity:0%"
indicator-style="height:3rem"
:value="pickerValue"
class="picker_view_box"
>
<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_weight_end" src="/static/information/boy_weight/pictures/button2.png"></image>
</view>
</template>
<script>
export default {
data() {
return {
options: this.generateWeightOptions(40, 150),
pickerValue: [15], // 默认选中项的索引
};
},
methods: {
generateWeightOptions(start, end) {
const options = [];
for (let i = start; i <= end; i++) {
options.push(`${i} kg`);
}
return options;
},
onPickerChange(event) {
this.pickerValue = event.detail.value; // 更新选中的索引
},
navigateTo(page) {
uni.navigateTo({
url: page
});
},
go_to_weight_end() {
const selectedValue = this.options[this.pickerValue[0]]; // 获取选中的值
this.navigateTo(`/pages/information/boy_weight_end/boy_weight_end?weight=${selectedValue}`); // 跳转到 boy_weight_end并传递选中值
},
},
};
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center; /* 水平居中 */
justify-content: center; /* 垂直居中 */
height: 100vh; /* 使容器充满整个视口 */
background-image: url("/static/information/boy_weight/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>