vue開發H5簡單上拉加載功能代碼全vue監聽滾動底部

原創 qq_42221334 2020-06-20 19:19

沒用ui框架寫簡單的實現了下功能

思路:上拉加載肯定要滾動到底部，所以就先監聽滾動條滾動到底部 然後執行分頁+1請求數據push到渲染列表中即可；

同時判斷最後一頁時不請求，展示無數據狀態

主要代碼：

1：監聽滾動底部

<script>

export default {
  name: "index_SearchPage",
  data() {
    return {
     
    };
  },
  components: {
    headAssembly
  },
  created() {
    var that=this
    window.onscroll = function() {
      //變量scrollTop是滾動條滾動時，距離頂部的距離
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //變量windowHeight是可視區的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight; //變量scrollHeight是滾動條的總高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight; //滾動條到底部的條件
      if (scrollTop + windowHeight == scrollHeight) {        
           //已滾動底部
          that.information_Load();
      }
    };
  },
  mounted() {
    this.inputTyping();
  },


2.滾動底部後頁面+1 請求數據 push到渲染列表 page爲最大值時 展示無數據狀態

inputTyping() {
      this.information_page=1
      
      var that = this;
      var baseUrl = process.env.API_ROOT;
      
        //信息廣場
        var formData0 = new FormData();
        formData0.append("page", 1);
        formData0.append("q", that.inputVal);
        formData0.append("source", 3);
        axios
          .post(
            baseUrl + "/apiyd/Information/",
            formData0
          ) // 問號後面是要傳送的參數
          .then(res => {
            //  請求成功後的函數
            if (res.data.code == 1000) {
              that.information_list = res.data.data.data;//渲染列表數據
              that.information_last_page = res.data.data.last_page;//獲得總頁數
            } else {
              $.alert(res.data.message);
            }
          });
    }


information_Load() {
      //信息上拉加載
      let pageNum = this.information_page + 1;//頁面+1
      let last_page = this.information_last_page;//總頁數
      if (pageNum < last_page + 1) {
        this.information_page = pageNum;
        this.information_list_NoData = false;
        $.showLoading("數據加載中");
        var that = this;
        var baseUrl = process.env.API_ROOT;
        //信息廣場
        var formData0 = new FormData();
        formData0.append("page", that.information_page);
        formData0.append("q", that.inputVal);
        formData0.append("source", 3);
        axios
          .post(
            baseUrl + "/apiyd/Information/",
            formData0
          ) // 問號後面是要傳送的參數
          .then(res => {
            //  請求成功後的函數
            if (res.data.code == 1000) {
              $.hideLoading();
              that.information_list.push(...res.data.data.data);
            } else {
              $.hideLoading();
              $.alert(res.data.message);
            }
          });
      } else {//當大於總頁數展示無數據狀態
        this.information_list_NoData = true;
      }
    },

完整代碼：

<template>
  <div>
    <div class="longinPage">
      <headAssembly textTitle="搜索" ifReturn="1"/>

      <div class="page__bd">
        <div class="weui-search-bar" id="searchBar">
          <form class="weui-search-bar__form">
            <div class="weui-search-bar__box">
              <i class="weui-icon-search"></i>
              <input
                @input="inputTyping"
                type="search"
                v-model="inputVal"
                class="weui-search-bar__input"
                id="searchInput"
                placeholder="搜索"
                required
              >
              <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText">
              <i class="weui-icon-search"></i>
              <span>搜索</span>
            </label>
          </form>
          <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
        </div>
      </div>

      <div class="page__bd">
        <div class="weui-tab">
          <div class="weui-navbar">
            <a
              class="weui-navbar__item"
              v-for="(item,index) in tabs"
              :key="index"
              :class="{'weui-bar__item--on':activeIndex == index}"
              @click="tabClick(index)"
            >{{item}}</a>
          </div>
        </div>
      </div>
      <div class="page__bd_bottom">
        <div class="main" v-if="ifTaba0">
          <div
            class="main_list"
            v-for="(item,index) in information_list"
            :key="index"
            @click="toDetails(item.uuid)"
          >
            <img class="main_list_img" :src="imgurl+item.user_pics">
            <div class="main_list_content">
              <div>
                <p class="content_nama">{{item.user_nickname}}</p>
                <p class="content_mark" v-if="item.user_auth==2">個人</p>
                <p class="content_mark" v-if="item.user_auth==3">企業</p>
                <p class="content_mark" v-if="item.user_auth==1"></p>
              </div>
              <div>
                <p class="content_title">{{item.mation_title}}</p>
                <div class="content_detailed">
                  <div class="content_hot" v-if="item.mation_recomm==1">薦</div>
                  <div class="content_num">{{item.browse_number}}</div>
                  <div class="content_time">{{item.create_time}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="weui-loadmore weui-loadmore_line" v-if="information_list_NoData">
            <div class="weui-loadmore__tips weui-loadmore__tips_in-line">暫無數據</div>
          </div>
        </div>

        <div class="xmain" v-if="ifTaba1">
          <div
            class="xmain_list"
            v-for="(item,index) in demand_list"
            :key="index"
            @click="toDetails1(item.uuid)"
          >
            <img class="xmain_list_img" :src="imgurl+item.company_pics">
            <div class="xcontent">
              <p class="xcontent_title">{{item.company_title}}</p>
              <div class="xcontent_Second">
                <div>{{item.cate1_name1}}</div>
                <div>{{item.project_number1}}頭</div>
                <div>￥{{item.project_price1}}-{{item.project_price2}}</div>
              </div>
              <p class="xcontent_time">截止時間:{{item.project_time3}}</p>
            </div>
          </div>

          <div class="weui-loadmore weui-loadmore_line" v-if="demand_list_NoData">
            <div class="weui-loadmore__tips weui-loadmore__tips_in-line">暫無數據</div>
          </div>
        </div>

        <div class="ymain" v-if="ifTaba2">
          <div
            class="ymain_list"
            v-for="(item,index) in Corn_list"
            :key="index"
            @click="toCornDetails(item.uuid)"
          >
            <img class="ymain_list_img" :src="imgurl+item.maize_pics">
            <div class="ymain_list_content">
              <p class="ycontent_title">{{item.maize_title}}</p>
              <div class="ycontent_mark">{{item.maize_scope}}</div>
              <p class="ycontent_Price">
                價格：￥
                <span>{{item.maize_price}}</span>元/斤
              </p>
              <p class="ycontent_address">地址：{{item.address}}</p>
            </div>
            <a href="tel:+18610687360">
              <img class="phone_img" src="../../static/img/phone.png">
            </a>
          </div>

          <div class="weui-loadmore weui-loadmore_line" v-if="Corn_list_NoData">
            <div class="weui-loadmore__tips weui-loadmore__tips_in-line">暫無數據</div>
          </div>
        </div>

        <div class="ymain" v-if="ifTaba3">
          <div
            class="ymain_list"
            v-for="(item,index) in Veterinary_list"
            :key="index"
            @click="toVeterinaryDetails(item.uuid)"
          >
            <img class="ymain_list_img" :src="imgurl+item.marian_pics">
            <div class="ymain_list_content">
              <p class="ycontent_title">{{item.narian_title}}</p>
              <div class="ycontent_mark">{{item.mation_scope}}</div>
              <p>&nbsp;</p>
              <p class="ycontent_address">地址：{{item.address}}</p>
            </div>
            <a href="tel:+18610687360">
              <img class="phone_img" src="../../static/img/phone.png">
            </a>
          </div>

          <div class="weui-loadmore weui-loadmore_line" v-if="Veterinary_list_NoData">
            <div class="weui-loadmore__tips weui-loadmore__tips_in-line">暫無數據</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import headAssembly from "../components/headAssembly/headAssembly.vue";
export default {
  name: "index_SearchPage",
  data() {
    return {
      imgurl: this.imgurl, //請求圖片域名
      inputShowed: false,
      inputVal: "",
      tabs: ["信息", "需求", "玉米", "獸醫"],
      activeIndex: 0,
      fontSize: 30,

      information_list: [],
      information_list_NoData: false,
      information_last_page: "",
      information_page: 1,

      demand_list: [],
      demand_list_NoData: false,
      demand_last_page: "",
      demand_page: 1,

      Corn_list: [],
      Corn_list_NoData: false,
      Corn_last_page: "",
      Corn_page: 1,

      Veterinary_list: [],
      Veterinary_list_NoData: false,
      Veterinary_last_page: "",
      Veterinary_page: 1,

      ifTaba0: true,
      ifTaba1: false,
      ifTaba2: false,
      ifTaba3: false
    };
  },
  components: {
    headAssembly
  },
  created() {
    var that=this
    window.onscroll = function() {
      //變量scrollTop是滾動條滾動時，距離頂部的距離
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //變量windowHeight是可視區的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight; //變量scrollHeight是滾動條的總高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight; //滾動條到底部的條件
      if (scrollTop + windowHeight == scrollHeight) {        

        if (that.activeIndex == 0) {
          that.information_Load();
        } else if (that.activeIndex == 1) {
          that.demand_Load();
        } else if (that.activeIndex == 2) {
          that.Corn_Load();
        } else if (that.activeIndex == 3) {
          that.Veterinary_Load();
        }
      }
    };
  },
  mounted() {
    this.inputTyping();
  },
  methods: {
    information_Load() {
      //信息上拉加載
      let pageNum = this.information_page + 1;
      let last_page = this.information_last_page;
      if (pageNum < last_page + 1) {
        this.information_page = pageNum;
        this.information_list_NoData = false;
        $.showLoading("數據加載中");
        var that = this;
        var baseUrl = process.env.API_ROOT;
        //信息廣場
        var formData0 = new FormData();
        formData0.append("page", that.information_page);
        formData0.append("q", that.inputVal);
        formData0.append("source", 3);
        axios
          .post(
            baseUrl + "/apiyd/Information/getApiinformationListInfo/",
            formData0
          ) // 問號後面是要傳送的參數
          .then(res => {
            //  請求成功後的函數
            if (res.data.code == 1000) {
              $.hideLoading();
              that.information_list.push(...res.data.data.data);
            } else {
              $.hideLoading();
              $.alert(res.data.message);
            }
          });
      } else {
        this.information_list_NoData = true;
      }
    },
    //to獸醫詳情
    toVeterinaryDetails(uuids) {
      this.$router.push({ path: "/VeterinaryDetails", query: { uuid: uuids } });
    },
    //to玉米詳情
    toCornDetails(uuids) {
      this.$router.push({ path: "/CornDetails", query: { uuid: uuids } });
    },
    //to需求詳情
    toDetails1(uuids) {
      this.$router.push({ path: "/DemandDetails", query: { uuid: uuids } });
    },
    //to信息詳情
    toDetails(uuids) {
      this.$router.push({
        path: "/InformationDetails",
        query: { uuid: uuids }
      });
    },
    //tab切換
    tabClick(index) {
      this.activeIndex = index;

      if (this.activeIndex == 0) {
        (this.ifTaba0 = true),
        (this.ifTaba1 = false),
        (this.ifTaba2 = false),
        (this.ifTaba3 = false);
        this.information_page=1
      } else if (this.activeIndex == 1) {
        (this.ifTaba0 = false),
          (this.ifTaba1 = true),
          (this.ifTaba2 = false),
          (this.ifTaba3 = false);
      } else if (this.activeIndex == 2) {
        (this.ifTaba0 = false),
          (this.ifTaba1 = false),
          (this.ifTaba2 = true),
          (this.ifTaba3 = false);
      } else if (this.activeIndex == 3) {
        (this.ifTaba0 = false),
        (this.ifTaba1 = false),
        (this.ifTaba2 = false),
        (this.ifTaba3 = true);
      }
      
    },
    inputTyping() {
      this.information_page=1
      this.demand_page=1
      this.Corn_page=1
      this.Veterinary_page=1
      var that = this;
      var baseUrl = process.env.API_ROOT;
      if (that.activeIndex == 0) {
        //信息廣場
        var formData0 = new FormData();
        formData0.append("page", 1);
        formData0.append("q", that.inputVal);
        formData0.append("source", 3);
        axios
          .post(
            baseUrl + "/apiyd/Information/getApiinformationListInfo/",
            formData0
          ) // 問號後面是要傳送的參數
          .then(res => {
            //  請求成功後的函數
            if (res.data.code == 1000) {
              that.information_list = res.data.data.data;
              that.information_last_page = res.data.data.last_page;
            } else {
              $.alert(res.data.message);
            }
          });
      } else if (that.activeIndex == 1) {
        //需求
        var formData1 = new FormData();
        formData1.append("page", 1);
        formData1.append("q", that.inputVal);
        formData1.append("source", 3);
        axios
          .post(baseUrl + "/apiyd/project/getApiprojectListInfo/", formData1) // 問號後面是要傳送的參數
          .then(res => {
            //  請求成功後的函數
            if (res.data.code == 1000) {
              that.demand_list = res.data.data.data;
              that.demand_last_page = res.data.data.last_page;
            } else {
              $.alert(res.data.message);
            }
          });
      } else if (that.activeIndex == 2) {
        //玉米
        var formData2 = new FormData();
        formData2.append("page", 1);
        formData2.append("q", that.inputVal);
        formData2.append("source", 3);
        axios
          .post(baseUrl + "/apiyd/maize/getApimaizeListInfo/", formData2) // 問號後面是要傳送的參數
          .then(res => {
            //  請求成功後的函數
            if (res.data.code == 1000) {
              that.Corn_list = res.data.data.data;
              that.Corn_last_page = res.data.data.last_page;
            } else {
              $.alert(res.data.message);
            }
          });
      } else if (that.activeIndex == 3) {
        //獸醫
        var formData3 = new FormData();
        formData3.append("page", 1);
        formData3.append("q", that.inputVal);
        formData3.append("source", 3);
        axios
          .post(
            baseUrl + "/apiyd/Veterinaria/getApiveterinarianListInfo/",
            formData3
          ) // 問號後面是要傳送的參數
          .then(res => {
            //  請求成功後的函數
            if (res.data.code == 1000) {
              that.Veterinary_list = res.data.data.data;
              that.Veterinary_last_page = res.data.data.last_page;
            } else {
              $.alert(res.data.message);
            }
          });
      }
    }
  }
};
</script>

<style scoped>
.longinPage {
  width: 100%;
}
.main {
  width: 100%;
  overflow: hidden;
  background: #fff;
  padding: 0 5%;
  box-sizing: border-box;
}
.main_list {
  width: 100%;
  height: 0.8rem;
  border-bottom: 0.01rem solid #f3f3f3;
  position: relative;
}
.main_list_img {
  width: 0.55rem;
  height: 0.5rem;
  border-radius: 0.05rem;
  margin-top: 0.15rem;
}
.main_list_content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-left: 0.65rem;
  box-sizing: border-box;
  padding-top: 0.15rem;
  box-sizing: border-box;
}
.main_list_content > div {
  float: left;
  font-size: 0.15rem;
  color: #333333;
}
.main_list_content > div:nth-child(1) {
  text-align: center;
  width: 0.7rem;
}
.main_list_content > div:nth-child(2) {
  position: absolute;
  top: 0.15rem;
  right: 0;
  width: 100%;
  padding-left: 1.45rem;
  box-sizing: border-box;
}
.content_mark {
  font-size: 0.12rem;
  color: #999999;
  margin-top: 0.05rem;
}
.content_detailed {
  margin-top: 0.05rem;
  display: flex;
  justify-content: space-between;
}
.content_hot {
  width: 0.27rem;
  height: 0.14rem;
  line-height: 0.14rem;
  font-size: 0.1rem;
  color: #de584b;
  background: #f6c3be;
  border: 0.01rem solid #ef8e85;
  border-radius: 0.075rem;
  text-align: center;
}
.content_num {
  font-size: 0.1rem;
  color: #006a3c;
}
.content_time {
  font-size: 0.1rem;
  color: #999999;
}

.xmain {
  width: 100%;
  overflow: hidden;
  padding: 0 3%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.xmain_list {
  width: 49%;
  height: 1.88rem;
  background: #fff;
  box-shadow: 0 0.02rem 0.04rem 0 rgba(229, 227, 227, 0.5);
  margin-bottom: 0.1rem;
}
.xmain_list_img {
  width: 100%;
  height: 1.08rem;
}
.xcontent {
  width: 90%;
  margin: 0 auto;
}
.xcontent_title {
  font-size: 0.12rem;
  color: #333333;
  margin-top: 0.05rem;
}
.xcontent_Second {
  display: flex;
  justify-content: space-between;
  margin-top: 0.05rem;
  margin-bottom: 0.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xcontent_Second > div {
  font-size: 0.12rem;
  color: #333333;
}
.xcontent_Second > div:nth-child(3) {
  font-size: 0.15rem;
  color: red;
  line-height: 0.17rem;
}
.xcontent_time {
  font-size: 0.12rem;
  color: #787777;
}

.ymain {
  width: 100%;
  overflow: hidden;
  background: #fff;
  padding: 0 5%;
  box-sizing: border-box;
}
.ymain_list {
  width: 100%;
  height: 1rem;
  border-bottom: 0.01rem solid #f3f3f3;
  position: relative;
}
.ymain_list_img {
  width: 0.9rem;
  height: 0.66rem;
  float: left;
  margin-top: 0.17rem;
  margin-right: 0.2rem;
  border-radius: 0.05rem;
}
.phone_img {
  width: 0.25rem;
  height: 0.25rem;
  position: absolute;
  top: 0.41rem;
  right: 0;
}
.ymain_list_content {
  width: 60%;
  float: left;
  padding-top: 0.1rem;
  box-sizing: border-box;
}
.ycontent_title {
  font-size: 0.16rem;
  color: #333333;
}
.ycontent_mark {
  width: 0.5rem;
  height: 0.14rem;
  text-align: center;
  line-height: 0.14rem;
  border: 0.01rem solid #f87700;
  border-radius: 0.075rem;
  font-size: 0.08rem;
  color: #f87700;
}
.ycontent_Price {
  font-size: 0.13rem;
  color: #333333;
}
.ycontent_address {
  font-size: 0.13rem;
  color: #818080;
}

.content_nama,
.content_title,
.ycontent_title,
.ycontent_address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weui-bar__item--on {
  background: #fff;
  color: #333;
  border-bottom: 0.02rem solid #006a3c;
}
.page__bd_bottom {
  margin-top: 0.6rem;
}
</style>

 

 

更多技巧請查看vue專欄   https://blog.csdn.net/qq_42221334/column/info/27230/1

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Vue加載OpenLayer入門教程（超簡單）

Vue加載OpenLayer很簡單，很簡單，很簡單第一步：創建vue項目第二步 加載openlayer 很簡單，很簡單，很簡單 學會了vue，開始測試mapbox的搭配，學會了mapbox，有整了一下openlayer的導入，剛開

来日可期啊 2020-07-08 12:37:34

Element-ui

Element-ui一、什麼是Element-ui 一、什麼是Element-ui element 是基於 vue 實現的一套不依賴業務的 UI 組件庫，提供了豐富的PC端組件，減少用戶對常用組件的封裝，降低了開發的難易程度

狂风 2020-07-08 11:49:25

vue引入echarts的自定義主題

1、首先從官網上配置屬於自己的主題，然後點擊導出配置，即可導出對應的json文件 2、通過後臺數據庫，自動選擇對應主題文件 3、然後再需要使用的地方使用即可

Agwenbi 2020-07-08 11:38:51

ElementUI的Drawer加上滾動條

第一種： 出處：https://www.cnblogs.com/jaycethanks/p/12507203.html <style lang="scss"> /*1.顯示滾動條：當內容超出容器的時候，可以拖動：*/ .el-drawe

肖潇不吃丸子 2020-07-08 11:18:09

Vue中出現“‘xxxxx‘ is defined but never used”解決辦法

 【解決辦法】： 在package.json或者.eslintrc.js中找到  eslintConfig  塊，在其rules下加入"no-unused-vars": "off"即可，如下圖   然後重新npm run serve即

肖潇不吃丸子 2020-07-08 11:18:09

使用npm上傳包教程

1、首先擁有自己的上傳文件，例如 class lc{ constructor(){ this.arr = []; } map(){ this.arr.map((item)=>{

Agwenbi 2020-07-08 11:00:30

vue在history的路由模式下，刷新後界面報404

需要配置下nginx，位置在/conf/vhosts/*.conf，將當前目錄下的所有conf都修改一下最好 server { listen 80; server_name agwenb

Agwenbi 2020-07-08 11:00:30

vue使用element-resize-detector監聽元素寬度變化

如圖，當我們切換左側菜單展示效果的時候，右側內容會對應變寬，但此時的echarts並不能執行自適應效果，這是因爲切換菜單展示效果並沒有觸發window.onresize，所以爲解決類似此問題，我們可使用element-resize-det

Agwenbi 2020-07-08 11:00:30

vuex進行分包管理

1、創建對應的目錄結構 2、index.js文件的內容 import Vue from 'vue' import Vuex from 'vuex' import moduleIndex from "./module/module-in

Agwenbi 2020-07-08 11:00:30

vue項目，使用前端微服務

1、先看最終的實現效果，主項目上的導航欄中的子項目菜單下的所有導航界面，均屬於副項目的界面 2、首先我們先新建兩個vue項目，例如一個是parent，另一個是child 3、主項目輸入命令 vue add vue-cli-plugin

Agwenbi 2020-07-08 11:00:30

富文本/整段文本中右側無法對齊的問題之text-align: justify(css)

今天的重點是：text-align: justify（實現兩端對齊） 對於整個段落，用的最多的要數富文本（作用於商品詳情頁），但用正常的形式排下去，右邊的效果就像小狗啃了一般，參差不齊。所以應該如何修飾呢？ 要使文本兩端沿着它的外邊線對齊

Syleapn 2020-07-08 07:14:58

uni-app中組件間方法調用

在此總結下，供參考！ 一、先上結果圖，如下：     二、項目說明 紅色圈起來的爲子組件，綠色圈起來的爲父組件。 uni-app項目，所以具體組件引入流程不在詳細說明，直接列出代碼。   三、代碼 1、子組件child.vue <t

Syleapn 2020-07-08 07:14:58

Spring Boot + Vue實現樹形結構

一、前言 開發過程中，涉及到多級菜單的應用，樹形結構比較常見，今天就做了一個Spring Boot + Vue + Element-UI 實現樹形結構的一個小demo。 Tree組件最適合的結構是無序列列表ul，創建一個遞歸組件Item表

素小暖 2020-07-08 06:49:16

Vue入門（12）webpack上

1.安裝 npm i [email protected] -D 2.編譯打包生成build.js 看下目錄結構 首先新建一個main.js. main.js是整個程序的入口文件。 main.js中 import Vue from "

徐扬_前端小白的成长之路 2020-07-08 06:33:45

element-ui+vue彈出多個message的問題處理

如果出現網絡問題，刷新頁面，或者有多個接口請求就會出現報錯，那麼提示就會連續彈出幾個： 解決方案：重寫Message。彈出前判斷是否有相同彈出框，若有則關閉它再彈出新的 resetMessage.js： import {Mess

zeke_x 2020-07-08 06:07:33