custom-tab-bar-tab1.uvue

<template>
  <scroll-view ref="listView" class="list" :rebound="false" :scroll-with-animation="true" :scroll-y="true" @scrolltolower="loadData()"
    @scroll="onScroll">
    <view class="list-item" v-for="(item, index) in dataList" :key="index">
      <!-- <text class="title">{{item.title}}</text> -->
      <view class="cell-item">
        <text class="title">内容：{{item.title}}</text>
        <input class="title" style="margin-top: 8px;" placeholder="备注:"/>
      </view>
    </view>
  </scroll-view>
</template>

<script>
  type ListItem = {
    title : string
  }

  export default {
    data() {
      return {
        dataList: [] as ListItem[]
      }
    },
    created() {
      this.loadData()
      // console.log("tab1 created");
    },
    methods: {
      loadData() {
        let index = this.dataList.length
        for (let i = 0; i < 20; i++) {
          this.dataList.push({
            title: index.toString(),
          } as ListItem)
          index++
        }
      },
      onScroll(e : ScrollEvent) {
        uni.$emit('tabchange', e.detail.scrollTop)
      },
      scrollTop(top : number) {
        (this.$refs["listView"] as UniElement).scrollTop = top
        // console.log("tab1 to top");
      }
    }
  }
</script>

<style>
  .list {
    flex: 1;
    background-color: #ffffff;
  }

  .list-item {
    flex-direction: row;
    padding: 30px;
    border-bottom: 1px solid #dbdbdb;
  }

  .title {
    font-size: 16px;
    text-align: left;
  }

  .cell-item {
    display: flex;
    flex-direction: column;
  }
</style>