mint-ui上拉更新时数据加载后,拉动滑回到首页

原因见地址:https://blog.csdn.net/woyidingshijingcheng/article/details/79899823

解决方法:获取手机屏幕高度,设置高度为100%的大小。

<template>
  <div id='carList' style="overflow-y: scroll;">
    <!--:top-method="loadTop"-->
    <mt-loadmore v-if="total>0" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false">
      <div v-for="(item, index) in list" class="block" @click="goCarDetail(index)">
        <div class="inline-b" style="width:35%;">
          <img :src="item.picRemotePath + '/' + item.picName1" class="pic">
        </div>
        <div class="inline-b" style="width:63%;line-height: 25px;">
          <div>车牌号码:<span class="value-size">{{item.plateNum}}</span></div>
          <div>车牌类型:<span class="value-size">{{item.vehicleTypeCV}}</span></div>
          <div>拍摄时间:<span class="value-size">{{item.captureTime }}</span></div>
        </div>
      </div>

    </mt-loadmore>
    <div v-else-if="!isLoading" style="margin-left: 42%;">
      暂无记录
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {carList} from '@/api/car'
  import { Toast } from 'mint-ui'
  export default {
    name: 'carList_index',
    data: function () {
      return {
        isLoading: false,
        prefixPath: '',
        path: '',
        list: [{
          carNo: '',
          picPath: '',
          watchTime: '',
          driveway: ''
        }],
        allLoaded: false,
        pageSize: 7,
        currentPage: 1,
        total: 0,
        mobileHeight: ''
      }
    },
    methods: {
      loadTop() {
        this.getCarList()
        this.$refs.loadmore.onTopLoaded();
      },
      loadBottom() {
        // debugger
        if (this.pageSize*this.currentPage < this.total) {
          this.currentPage ++
          this.loadMoreList()
          this.$refs.loadmore.onBottomLoaded();
        } else {
          Toast({
            message: '沒有更多数据了',
            position: 'middle'
          });
          this.$refs.loadmore.onBottomLoaded();
          // this.allLoaded = true;// 若数据已全部获取完毕
        }
      },
      goCarDetail(index) {
        // sessionStorage.setItem("id", this.list[index].id);
        let carDetail = JSON.stringify(this.list[index])
        sessionStorage.setItem('carDetail',carDetail)
        this.$router.push({ name: '车辆详情' })
      },
      loadMoreList() {
        let self = this
        let params = {}
        params = JSON.parse(sessionStorage.getItem("param"))
        params.currentPage = this.currentPage
        params.pageSize = this.pageSize
        params.needPage = true
        this.isLoading = true
        return new Promise((resolve, reject) => {
          carList(params).then(response => {
            if (response.data && response.code === 200) {
              if (response.data.list.length > 0) {
                self.list = this.list.concat(response.data.list)
                self.total = response.data.total
                // let carlist = JSON.stringify(this.list)
                // sessionStorage.setItem("carlist", carlist);
                this.$refs.loadmore.onBottomLoaded();
              }
            }
            this.isLoading = false
            // resolve()
          }).catch(error => {
            // reject(error)
          })
        })
      },
      getCarList() {
        let params = {}
        params = JSON.parse(sessionStorage.getItem("param"))
        this.currentPage = 1
        params.currentPage = this.currentPage
        params.pageSize = this.pageSize
        params.needPage = true
        this.isLoading = true
        return new Promise((resolve, reject) => {
          carList(params).then(response => {
            if (response.data && response.code === 200) {
              if (response.data.list.length > 0) {
                this.list = response.data.list
                this.total = response.data.total
                // let carlist = JSON.stringify(this.list)
                // sessionStorage.setItem("carlist", carlist);
                this.$refs.loadmore.onTopLoaded();
              }
            }
            this.isLoading = false
            // resolve()
          }).catch(error => {
            // reject(error)
          })
        })
      }
    },
    created() {
      this.getCarList()
    },
    mounted() {
      this.mobileHeight = window.innerHeight + "px"
      console.log(this.mobileHeight)
      let item = document.getElementById('carList')
      item.style.height = this.mobileHeight
    },
    computed: {
      ...mapState({
        //获取vuex中的feedbackData
        token: state => state.user.token
      })
    }
  }
</script>


猜你喜欢

转载自blog.csdn.net/qq_15576765/article/details/84034157