<template>
<view>
<picker-view style="height: 200px;" :value="value" :indicator-style="indicatorStyle">
<picker-view-column>
<view class="item" v-for="(item, i) in list" :key="i">{{ getItem(item) }}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
data () {
return {
value: [1],
list: ['选项1', '选项2', '选项3'],
indicatorStyle: `height: 34px`
}
},
methods: {
getItem (item) {
return item
}
}
}
</script>
<style>
.item {
text-align: center;
height: 34px;
line-height: 34px;
}
</style>
liub1934
- 发布：2020-09-04 11:20
- 更新：2023-03-30 15:15
- 阅读：1511
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 2.8.10
第三方开发者工具版本号： 1.0.3
基础库版本号： 未知
项目创建方式： HBuilderX
示例代码：
操作步骤：
在小程序中运行示例代码即可
在小程序中运行示例代码即可
预期结果：
picker-view设置的是[1]，按理应该会选中第二个选项2
picker-view设置的是[1]，按理应该会选中第二个选项2
实际结果：
实际在小程序端都是选中的第一个选项1
实际在小程序端都是选中的第一个选项1
bug描述：
picker-view-column中显示的内容如果用一个方法返回，如示例代码中的getItem(item)，在小程序端会造成picker-view中设置的value失效。目前测试微信、百度的小程序有这种现象，估计其他的小程序端也是如此。
2 个回复
李肉肉
解决了，遇到了同样的问题
1***@qq.com
可以试试这样 const currenIndex = computed(() => {
return [pageState.index];
});