list-view-multiplex.uvue

<template>
  <view style="flex: 1;">
    <scroll-view direction="horizontal" style="flex-direction: row;">
      <button class="button_item" @click="delayShow">测试延时显示</button>
      <button class="button_item" @click="switchItemContent">修改item子元素</button>
    </scroll-view>
    <list-view v-show="list_show" id="listview" style="flex: 1;" show-scrollbar=false @scrolltolower="onScrollTolower">
      <list-item v-for="index in item_count" class="item" @click="itemClick(index)">
        <text >item-------<text>{{index}}</text></text>
        <text v-if="displayArrow" >item-------<text>{{index}}</text></text>
      </list-item>
    </list-view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				item_count: 20,
        list_show: true,
        listViewElement: null as UniListViewElement|null,
        displayArrow: false
			}
		},
    onReady() {
      this.listViewElement = uni.getElementById<UniListViewElement>('listview')
    },
		methods: {
      onScrollTolower(_: ScrollToLowerEvent) {
        setTimeout(() => {
          this.item_count += 20
        }, 300)
      },
      //用于自动化测试
      listViewScrollByY(y : number) {
        this.listViewElement?.scrollBy(0, y)
      },
      itemClick(index: number) {
        console.log("itemTextClick---"+index)
      },
      delayShow() {
        this.list_show = !this.list_show
        this.item_count += 20
        //延时显示list-view 测试list-item延时显示bug
        setTimeout(()=>{
          this.list_show = !this.list_show
        }, 400)
      },
      switchItemContent() {
        this.displayArrow = !this.displayArrow
      }
		}
	}
</script>

<style>
  .item {
    padding: 15px;
    margin: 0 0 5px 0;
    background-color: #fff;
    border-radius: 5px;
  }
  .button_item {
    width: 200px;
  }

</style>