请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
286
帖子
2
勋章
7万+
Y币

[开发工具] 发现一个关于list-view的bug问题

[复制链接]
发表于 2021-11-27 14:48:58
本帖最后由 忽上忽下 于 2021-11-29 10:47 编辑

第一个问题:

在同一个页面里面,如果存在多个 list-view 的情况的话,然后使用 vif 进行切换,会出现 无法找到对应元素的问题,大佬看了下面代码就知道了
那么有大佬要说了,你的写法有问题,多个元素间的切换你要用vshow,这个时候就又引出了第二个问题


第二个问题:
vshow隐藏的元素标签里面不能出现 style 属性,不然vshow就废了,然后整个页面就乱了

接下来就是上代码了(代码属于问题1,需要问题2的代码,把vif 改成vshow 之后,在该元素后面加上style标签,里面加上样式就复现了):



  1. <template>
  2.         <view class="page">
  3.                 <safe-area></safe-area>
  4.                 <view class="test1">
  5.                         <button @click="select(0)">显示列表1</button>
  6.                         <button @click="select(1)">显示列表2</button>
  7.                         <button @click="select(2)">显示列表3</button>
  8.                 </view>
  9.                 <view v-if="active_index == 0" class="test2">
  10.                         <list-view scroll-y="true" class="test" show-scrollbar="false" id="test1">
  11.                                 <cell>
  12.                                         <text>{item}</text>
  13.                                 </cell>
  14.                         </list-view>
  15.                 </view>
  16.                 <view v-if="active_index == 1" class="test2">
  17.                         <list-view scroll-y="true" class="test" show-scrollbar="false" id="test2">
  18.                                 <cell>
  19.                                         <text>{item}</text>
  20.                                 </cell>
  21.                         </list-view>
  22.                 </view>
  23.                 <view v-if="active_index == 2" class="test2">
  24.                         <list-view scroll-y="true" class="test" show-scrollbar="false" id="test3">
  25.                                 <cell>
  26.                                         <text>{item}</text>
  27.                                 </cell>
  28.                         </list-view>
  29.                 </view>
  30.         </view>
  31. </template>

  32. <script>
  33. export default {
  34.         name: 'test',
  35.         install() {

  36.         },
  37.         apiready() {//like created
  38.                         document.getElementById('test1').load({
  39.                                         data: this.data.list1
  40.                                 })
  41.         },
  42.         data() {
  43.                 return {
  44.                         active_index: 0,
  45.                         list1: [1, 4, 7, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 33, 55, 66, 77, 88, 1111, 2222, 1, 1, 1, 1, 1, 1, 1, 1, 1, 33, 55, 66],
  46.                         list2: [2, 5, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 33, 55, 66, 77, 88, 1111, 2222, 1, 1, 1, 1, 1, 1, 1, 1, 1, 33, 55, 66],
  47.                         list3: [3, 6, 9, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 33, 55, 66, 77, 88, 1111, 2222, 1, 1, 1, 1, 1, 1, 1, 1, 1, 33, 55, 66],
  48.                 }
  49.         },
  50.         methods: {
  51.                 select(index) {
  52.                         this.data.active_index = index;
  53.                         if (index == 0) {
  54.                                 document.getElementById('test1').load({
  55.                                         data: this.data.list1
  56.                                 })
  57.                         } else if (index == 1) {
  58.                                 document.getElementById('test2').load({
  59.                                         data: this.data.list2
  60.                                 })
  61.                         } else if (index == 2) {
  62.                                 document.getElementById('test3').load({
  63.                                         data: this.data.list3
  64.                                 })
  65.                         }
  66.                 }
  67.         }
  68. }
  69. </script>

  70. <style>
  71. .test2{
  72.         width: 100%;
  73.         height: 100%;
  74. }
  75. .test {
  76.         flex: 1;
  77. }
  78. .test1 {
  79.         width: 100%;
  80. }
  81. .page {
  82.         width: 100%;
  83.         height: 100%;
  84.         background: #fff;
  85. }
  86. </style>
复制代码

10
帖子
1
勋章
5636
Y币
"你的写法有问题,多个元素间的切换你要用vshow"
286
帖子
2
勋章
7万+
Y币
我操,惊现大佬
杨永安 · 2021-11-27 14:58"你的写法有问题,多个元素间的切换你要用vshow"
您需要登录后才可以回帖 登录

本版积分规则