继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【金秋打卡】第4天 全新升级,基于Vue3新标准,打造后台综合解决方案 第四讲

ToRAmen
关注TA
已关注
手记 77
粉丝 10
获赞 5

课程章节: 项目架构之搭建Layout架构 解决方案与实现

主讲老师: Sunday

课程内容:

今天学习的内容包括:

Layout架构搭建的解决方案

课程收获:

4.1 心得:

var config = require("../../utils/config.js");
// 获取全局应用程序实例对象
var app = getApp();

// 创建页面实例对象
Page({
  /**
   * 页面的初始数据
   */
  data: {
    queryDate: {
      startDate: "",
      endDate: ""
    },
    city: '',
    onReachBottom: 0,
    recordListData: null,
    pageScroll: null,
    historyList: [],
    pagenum: 1,
    scrollTop: 0,
    scenicSpotList: [],
    hasMoreData: true,
    isRefreshing: false,
    isLoadingMoreData: false,
    searchText: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function onLoad(opt) {
    this.data.city = opt.city;
    if (opt.startDate != undefined && opt.startDate != null && opt.endDate != undefined && opt.endDate != null) {
      let queryDate = {};
      queryDate.startDate = opt.startDate;
      queryDate.endDate = opt.endDate;
      this.setData({
        queryDate: queryDate,
        recordListData: {
          queryDate: queryDate
        }
      });
    }
    this.callSearch = this.selectComponent("#callSearch"); 
  },
  searchScenicSpot: function(e) {
    var that = this;
    wx.request({
      url: app.getUrl(app.globalData.quickSearchScenicSpotData),
      data: {
        topNum: 10, //每页显示条数
        searchText: e.detail,
      },
      success: function(res) {
        var result = res.data;
        if (result.result) {
          var listNew = result.data; //合并数组
          that.callSearch.onBindSearchList(listNew);
        }
      },
      fail: function(err) {
        wx.showToast({
          title: '服务器正忙',
          icon: 'none'
        })
      }
    })
  },
  getScenicSpotData: function() {
    var that = this;
    wx.showLoading({
      title: "数据加载中..."
    });
    wx.request({
      url: app.getUrl(app.globalData.getIndexScenicSpotData),
      data: {
        pageNum: that.data.pagenum, //从数据里获取当前页数
        pageSize: 10, //每页显示条数
        searchText: that.data.searchText
      },
      success: function(res) {
        var result = res.data;
        if (result.result) {
          var listNew = that.data.scenicSpotList.concat(result.data.rows); //合并数组
          if (that.data.pagenum == 1)
            listNew = result.data.rows;


          that.setData({
            scenicSpotList: listNew,
            isLoadingMoreData: false
          });
          if (result.data.rows.length == 0 || result.data.rows == null) {
            that.setData({
              hasMoreData: false
            });
          }
        }
        wx.hideLoading();
      },
      fail: function(err) {
        wx.hideLoading();
      }, //请求失败
      complete: function() {} //请求完成后执行的函数
    })


  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function onUnload(opt) {
    //getApp().destroyAudioContext();//摧毁音频对象
  },

  /**
   * 点击搜索
   * @param {*} e 
   */
  onClickSearchSubmit: function onClickSearchSubmit(e) {
    console.log('点击搜索', e);
    if (e.detail.content == '') {
      return;
    }
    var that = this;
    that.data.pagenum = 1;
    that.data.searchText = e.detail.content;
    //     wx.showToast({
    //       title: '搜索' + '「' + e.detail.content + '」',
    //       icon: 'none'
    //     })
    this.getScenicSpotData();
  },

  onReachBottom: function onReachBottom() {
    var that = this;
    that.setData({
      onReachBottom: this.data.onReachBottom + 1
    });

    if (that.data.isRefreshing || that.data.isLoadingMoreData || !that.data.hasMoreData) {
      return
    }
    var pagenum = that.data.pagenum + 1; //获取当前页数并+1
    that.setData({
      pagenum: pagenum, //更新当前页数
      isLoadingMoreData: true
    })
    that.getScenicSpotData(); //重新调用请求获取下一页数据
  },

  onPageScroll: function onPageScroll(Object) {
    this.setData({
      pageScroll: Object
    });
  }
});

图片描述

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP