mint-ui上拉更新時資料載入後,拉動滑回到首頁
阿新 • • 發佈:2018-12-25
原因見地址: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>