項目屬于嵌入h5.掛在企業(yè)微信。由于列表過多，一般電腦端使用分頁癌幕，但是手機端分頁不合理衙耕，所以計劃用上拉到底部加載更多，實現(xiàn)分頁勺远。
一開始百度查到很多都是再用監(jiān)聽頁面滾動事件? window.addEventListener('scroll', this.scrollBottom) 橙喘，在蘋果上還好說，在安卓手機上的話如果一直上劃的話胶逢，請求一直在進行厅瞎，上拉多久請求多久，放開以后請求速度也慢初坠，代碼如下和簸。有坑啊。碟刺。锁保。
mounted () {
? ? ? ? // 添加滾動事件，檢測滾動到頁面底部
? ? ? ? window.addEventListener('scroll', this.scrollBottom)
? ? },
? ? beforeDestroy () {
? ? ? ? window.removeEventListener('scroll', this.scrollBottom);? ? //離開頁面時移除
? ? },
methods: {
????scrollBottom () {
? ? ? ? ? ? this.scrollH = document.body.scrollTop||document.documentElement.scrollTop;
? ? ? ? ? ? this.docH = document.body.scrollHeight||document.documentElement.scrollHeight;//文檔高度
? ? ? ? ? ? this.windowH = window.innerHeight||document.body.clientHeight||document.documentElement.clientHeight;//瀏覽器窗口高度
? ? ? ? ? ? //滾動到底部和頁面沒有正在執(zhí)行請求網(wǎng)絡數(shù)據(jù)的過程中的條件要同時成立才可以執(zhí)行請求請求數(shù)據(jù)操作
? ? ? ? ? ? if((this.scrollH + this.windowH)-0 >= (this.docH-2) && !this.showLoading){
? ? ? ? ? ? ? ? // 發(fā)起請求前需要阻止頁面滾動
? ? ? ? ? ? ? ? this.tip = '加載中'
? ? ? ? ? ? ? ? this.showloadmore = true
? ? ? ? ? ? ? ? // 判斷請求數(shù)量是否大于合同總數(shù)
? ? ? ? ? ? ? ? if(this.henum <= (this.PageIndex*this.starobjectarrnum)) {
? ? ? ? ? ? ? ? ? ? this.tip = '沒有更多'
? ? ? ? ? ? ? ? ? ? this.showloadmore = false
? ? ? ? ? ? ? ? ? ? return false
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.PageIndex += 1
? ? ? ? ? ? ? ? console.log(this.PageIndex)
? ? ? ? ? ? ? ? // 加載數(shù)據(jù)
? ? ? ? ? ? ? ? this.loadArticle()
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? return false
? ? ? ? ? ? }
? ? ? ? },
}
后來這個去找原因找了一天半沽。找到原因由于自己技術問題爽柒，一直解決不了。所以換了種方法者填。結果還是不錯的浩村，完美解決問題，ios占哟、安卓都沒問題心墅，不說了，上代碼
<template>
? ? <div class="stocklist">
? ? ? ? <div @touchstart="touchStart($event)" @touchend="touchEnd($event)">
? ??????????<!-- 列表 -->
????????????<div class="contract_list">...</div>
? ? ? ? ? ? <x-button v-show="isOriginHei" class="addrece_btn" @click.native="back">返回</x-button>
? ? ? ? ? ? <loading v-model="showLoading" text="獲取數(shù)據(jù)中"></loading>
? ? ? ? ? ? <div v-if="starobjectarrnum > 0 && henum >= 5">
? ? ? ? ? ? ? ? <load-more v-if="showloadmore" :tip="tip"></load-more>
? ? ? ? ? ? ? ? <load-more v-else :show-loading="false" :tip="tip"></load-more>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
</template>
<script>
import { Flexbox, FlexboxItem, AlertModule, XButton, Divider, LoadMore, Search, Group, Datetime } from 'vux'
export default {
? ? name: 'stocklist',
? ? data () {
? ? ? ? return {
? ? ? ? ? ? datatext: '錄入時間',
? ? ? ? ? ? showLoading: false,
? ? ? ? ? ? tabindex: 0,
? ? ? ? ? ? henum: 0,
? ? ? ? ? ? objectArray: [],
? ? ? ? ? ? tip: '加載更多',
? ? ? ? ? ? showloadmore: false,
? ? ? ? ? ? PageIndex: 1,
? ? ? ? ? ? starobjectarrnum: 5,
? ? ? ? ? ? startY: 0,
? ? ? ? ? ? isLoading: false,
? ? ? ? }
? ? },
? ? components: {
? ? ? ? Flexbox,
? ? ? ? FlexboxItem,
? ? ? ? AlertModule,
? ? ? ? XButton,
? ? ? ? Divider,
? ? ? ? LoadMore,
? ? ? ? Search,
? ? ? ? Group,
? ? ? ? Datetime
? ? },
? ? created () {
? ? ? ? this.tabindex = this.$route.query.page
? ? ? ? this.showLoading = true
? ? ? ? // 請求數(shù)據(jù)
? ? ? ? this.loadArticle()
? ? },
? ? methods: {
? ? ? ? touchStart(e) {
? ? ? ? ? ? // 記錄按下位置
? ? ? ? ? ? this.startY = e.targetTouches[0].pageY;
? ? ? ? },
? ? ? ? touchEnd(e) {
? ? ? ? ? ? // 計算移動
? ? ? ? ? ? if (this.isLoading) {
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? ? ? let endX = e.changedTouches[0].pageX,
? ? ? ? ? ? ? ? ? ? endY = e.changedTouches[0].pageY,
? ? ? ? ? ? ? ? ? ? dy = this.startY - endY;
? ? ? ? ? ? //判斷是否向上滑動
? ? ? ? ? ? if(dy <= 0) {
? ? ? ? ? ? ? ? return false
? ? ? ? ? ? }
? ? ? ? ? ? if(dy < 20) {
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? ? ? let scrollHeight = this.$el.scrollHeight;
? ? ? ? ? ? let scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
? ? ? ? ? ? // 判斷是否滑動到底部
? ? ? ? ? ? if (this.startY+dy >= scrollHeight) {
? ? ? ? ? ? ? ? //滑動距離到底部并且繼續(xù)下拉
? ? ? ? ? ? ? ? this.scrollToEnd(e)
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? scrollToEnd(e) {
? ? ? ? ? ? // 移動執(zhí)行判斷
? ? ? ? ? ? let scrollHeight = this.$el.scrollHeight;
? ? ? ? ? ? let clientHeight = this.$el.clientHeight;
? ? ? ? ? ? let scrollTop = this.$el.scrollTop;?
? ? ? ? ? ? if (scrollTop + clientHeight >= scrollHeight && !this.showLoading) {
? ? ? ? ? ? ? ? this.doLoadMore()?
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? doLoadMore() {
? ? ? ? ? ? this.isLoading = true
? ? ? ? ? ? this.tip = '加載中...'
? ? ? ? ? ? this.showloadmore = true
? ? ? ? ? ? if(this.henum <= (this.PageIndex*this.starobjectarrnum)) {
? ? ? ? ? ? ? ? this.tip = '沒有更多'
? ? ? ? ? ? ? ? this.showloadmore = false
? ? ? ? ? ? ? ? return false
? ? ? ? ? ? }
? ? ? ? ? ? this.PageIndex += 1
? ? ? ? ? ? console.log(this.PageIndex)
? ? ? ? ? ? // 加載數(shù)據(jù)
? ? ? ? ? ? this.loadArticle()
? ? ? ? },
? ? ? ? loadArticle () {
? ? ? ? ? ? let self= this
? ? ? ? ? ? this.showLoading = true
? ? ? ? ? ? ?this.datatext = "錄入時間"
? ? ? ? ? ? //請求合同數(shù)據(jù)
? ? ? ? ? ? var userdata = {...}
? ? ? ? ? ? this.$get('/xxxxxxxx',userdata)
? ? ? ? ? ? .then(res =>{
? ? ? ? ? ? ? ? ? ? this.isLoading = false
? ? ? ? ? ? ? ? ? ? this.showLoading = false
? ? ? ? ? ? ? ? ? ? this.tip = '加載更多'
? ? ? ? ? ? ? ? ? ? this.showloadmore = false
? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ?.catch(e => {
? ? ? ? ? ? ? ? ? ? ? ? this.isLoading = false;
? ? ? ? ? ? ? ? ? ? ? ? this.showLoading = false
? ? ? ? ? ? ? ? ? ? ? ? this.tip = '加載更多'
? ? ? ? ? ? ? ? ? ? ? ? this.showloadmore = false
? ? ? ? ? ? ? ? ? ? ? ? // console.log(e)
? ? ? ? ? ? ? ? ? ? ? ? AlertModule.show({
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: '不好意思',
? ? ? ? ? ? ? ? ? ? ? ? ? ? content: "服務器繁忙"
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ?})
? ? ? ? }
? ? }
}
</script>
