本帖最后由 忽上忽下 于 2021-11-29 10:47 编辑
第一个问题:
在同一个页面里面,如果存在多个 list-view 的情况的话,然后使用 vif 进行切换,会出现 无法找到对应元素的问题,大佬看了下面代码就知道了
那么有大佬要说了,你的写法有问题,多个元素间的切换你要用vshow,这个时候就又引出了第二个问题
第二个问题:
vshow隐藏的元素标签里面不能出现 style 属性,不然vshow就废了,然后整个页面就乱了
接下来就是上代码了(代码属于问题1,需要问题2的代码,把vif 改成vshow 之后,在该元素后面加上style标签,里面加上样式就复现了):
- <template>
- <view class="page">
- <safe-area></safe-area>
- <view class="test1">
- <button @click="select(0)">显示列表1</button>
- <button @click="select(1)">显示列表2</button>
- <button @click="select(2)">显示列表3</button>
- </view>
- <view v-if="active_index == 0" class="test2">
- <list-view scroll-y="true" class="test" show-scrollbar="false" id="test1">
- <cell>
- <text>{item}</text>
- </cell>
- </list-view>
- </view>
- <view v-if="active_index == 1" class="test2">
- <list-view scroll-y="true" class="test" show-scrollbar="false" id="test2">
- <cell>
- <text>{item}</text>
- </cell>
- </list-view>
- </view>
- <view v-if="active_index == 2" class="test2">
- <list-view scroll-y="true" class="test" show-scrollbar="false" id="test3">
- <cell>
- <text>{item}</text>
- </cell>
- </list-view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'test',
- install() {
- },
- apiready() {//like created
- document.getElementById('test1').load({
- data: this.data.list1
- })
- },
- data() {
- return {
- active_index: 0,
- 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],
- 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],
- 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],
- }
- },
- methods: {
- select(index) {
- this.data.active_index = index;
- if (index == 0) {
- document.getElementById('test1').load({
- data: this.data.list1
- })
- } else if (index == 1) {
- document.getElementById('test2').load({
- data: this.data.list2
- })
- } else if (index == 2) {
- document.getElementById('test3').load({
- data: this.data.list3
- })
- }
- }
- }
- }
- </script>
- <style>
- .test2{
- width: 100%;
- height: 100%;
- }
- .test {
- flex: 1;
- }
- .test1 {
- width: 100%;
- }
- .page {
- width: 100%;
- height: 100%;
- background: #fff;
- }
- </style>
复制代码
|