小学期微信小程序实训篇5_分页加载、携参跳转、日期处理方法

2021/6/19 11:28:20

本文主要是介绍小学期微信小程序实训篇5_分页加载、携参跳转、日期处理方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录

  • 分页加载
  • 携参跳转
  • 日期处理方法

开始

一、分页加载

什么是分页加载

  • 常见的场景是微博、淘宝浏览商品信息,默认开始只加载若干页,向下滑动可以重新发请求,累计显示更多页信息
  • 数据量很大的时候会做分类加载处理,可以优化用户体验。

分类加载两种基本思路

  • 每页固定显示若干数据,限制每次获取的数据容量。

  • 从第二页开始,每次获取的数据都要跳过页码已经展示的那部分,跳过数据容量。

  • 跳过的方法体现在请求url中,可以直接在url后面加?skip=xxx&limit=xxx,也可以在request()的data中定义skip、limlit属性

    // 1.  url: 'http://192.168.1.20:3000/home/hot?skip=0&limit=12',
    // 2.  url: 'http://192.168.1.20:3000/home/hot',
     data: {
     skip: '',
     limit: ''
     },
    

使用场景流程实现分析

  • 场景:当用户页面滚动条滚动到底部的时候开始做分页,触发函数发起请求
  • 需要使用scroll-view标签可以监听滚动<scroll-view class="recommend" scroll-y,recommend是css为了给scroll-view固定高度,页面的滚动区域只是出去tabs的组件部分,否则只是页面的滚动,而不是scroll-view的滚动,无法检测触底事件。(使用参考)
  • 编写bindscrolltolower="xxx"绑定的触底事件,修改分页请求参数,再次调用函数发起请求
  • 最后使用将新请求的结果 和 以前的结果 完成数组拼接hot:[...this.data.hot,...res.data.data.list]

举栗

wxml代码

<!--
分页功能的思考:
1. 我们要滚动的区域是推荐组件,不是index页面;去除顶部tabs的部分
2. 如何能产生滚动?首先盒子要有一个固定的高度;如果没有设置高度,盒子高度由内容来撑开;
3. 内容要有溢出,内容的高度要超出盒子的高度,才能实现滚动;滚动的高度由calc计算出
4. 通过监控触底事件,分批向服务器拿数据

实现:使用scroll-view滚动视图标签来包裹推荐组件;
   1)使用scroll-y开启纵向滚动;
   2)使用css计算属性给scroll-y设置固定高度;
   3)使用bindscrolltolower绑定触底事件,实现分页
-->
<scroll-view class="recommend" scroll-y bindscrolltolower="scrolltolower">
   <!--精选大图-->
   <view class="cover_view">
      <view class="cover_item" wx:for="{{cover}}" wx:key="_id">
         <image class="my_img" mode="widthFix" src="{{ baseURL+item.thumb }}"></image>
      </view>
   </view>
   <!--月份-->
   <view class="month_view">
      <!--月份标题部分-->
      <view class="title">
         <view class="active">{{month.date_msg}}</view>
         <view>{{month.title}}</view>
         <view class="active"> 更多> </view>
      </view>
      <!--月份图片列表-->
      <view class="list">
         <!--注意!!!要循环的不是month本身,而是month里的list数组-->
         <view class="list_item" wx:for="{{month.list}}" wx:key="_id">
            <image class="my_img" mode="aspectFill" src="{{ baseURL+item.thumb }}"></image>
         </view>
      </view>
   </view>
   <!--热门-->
   <view class="hot_view">
   <!--热门标题-->
   <view class="hot_t">热门</view>
      <!--热门图片列表-->
      <view class="list">
         <view class="list_item" wx:for="{{hot}}" wx:key="_id">
            <image class="my_img" mode="aspectFill" src="{{ baseURL+item.thumb }}"></image>
         </view>
      </view>
   </view>
</scroll-view>

js代码

Component({
  data: {
    //接收精选大图的数据
    cover:[],
    //接收月份数据
    month:[],
    //接收热门数据
    hot:[],
    //定义获取热门数据的请求参数集合
    params:{
      skip: 0,
      limit: 12
    },  
    //数据的总条数
    total:0, 
    //定义图片链接的根路径
    baseURL:"http://118.190.104.39:3000/"
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //获取精选大图的请求方法
    getCover(){
      wx.request({
        //url里填写接口地址
        url: this.data.baseURL+'home/cover', 
        //请求成功以后的回调函数,在这个方法里完成对数据的处理
        //使用es6新语法,箭头函数来解决this指向性问题
        success:(res)=>{
          //console.log(res.data.data)
          //更新到data里去,方便页面实现数据绑定
          this.setData({
            cover:res.data.data
          })
        }
      })
    },
     //获取月份数据
    getMonth(){
      wx.request({
        url: this.data.baseURL+'home/month',
        success:(res)=>{
          //console.log(res.data.data)
          //拿到后台返回的数据对象
          var my_month = res.data.data
          //获取后台返回的时间戳
          var my_date = res.data.data.date
          //处理时间戳
          var date = new Date(my_date)
          //使用getMonth() 方法可以获取日期对象里的月份数据,因为索引是从0开始的,所以要执行+1
          var month = date.getMonth()+1
          //使用getDate() 方法可以获取日期对象里的日期数据
          var days = date.getDate()
          var date_msg = days+ " / "+month
          //console.log(date_msg)
          //把处理过的日期格式,追加到返回的数据对象里,新增一个属性跟属性值
          my_month.date_msg = date_msg
            //console.log(my_month)
          this.setData({
             month:my_month
          })
        }
      })
    },
    //获取热门数据
    getHot(){
        wx.request({
          //在路径里拼接请求参数是传统方法
          //url: 'http://122.114.27.185:3000/home/hot?skip=0&limit=12',
          url: this.data.baseURL+'home/hot',
          //请求的参数集合
          data: this.data.params,
          success:(res)=>{
            //console.log(res.data.data.list)
            this.setData({
              //实现新老hot数组的合并
              //es6 展开运算符
              //hot存储的不能只是每次请求到的12条数据,我们要把所请求过的数据都存到hot里面
              //此时需要进行数组合并
              //使用展开运算符实现数组合并
              //展开运算符 ==》允许一个表达式在某处展开
            //  hot:res.data.data.list,
              hot:[...this.data.hot,...res.data.data.list],
               //获取接口数据总条数,更新到data里去
               total:res.data.data.total
            })
          }
        })
    },
    //分页功能 --- 在用户向下滚动触底的时候自动触发!不需要放到生命周期函数里
    scrolltolower(){
      //首先判断一下,服务器是否还有更多数据,有就继续加载,没有就终止程序
      //使用我们每次数据请求的skip参数,判断累加是否超过总的数据条数
      if( this.data.params.skip >= this.data.total ){
        //调用微信的提示框,提示用户没有更多数据了
        wx.showToast({
          title: '我是有底线的!',
          //去掉默认图标
          icon:'none'
        })
        //终止程序
        return
      }
      console.log("触底了");
      //拿到全局的请求参数
      var params = this.data.params
      //每次对skip值进行改变--- +12
      //params.skip = params.skip+12
      params.skip += 12
      //把修改以后的参数传回到data里
      this.setData({
        params:params
      })
      //再次调用请求热门数据的方法
      this.getHot()
    }
  },
    /**
   *组件的生命周期
   */
  lifetimes: {
    attached: function() {
      // 组件创建完毕,开始请求数据
      //调用精选大图的请求方法
      this.getCover()
      //调用月份数据请求方法
      this.getMonth()
      //调用热门数据请求方法
      this.getHot()
    }
  }
})

wxss代码

.recommend {
  /*使用css计算属性,实现滚动视图高度赋值
  !!!计算属性calc()里面传参数的时候,两个参数之间一定要用空格隔开!!!
  */
  height: calc(100vh - 36px);
}
/*精选大图*/
.cover_view {
  display: flex;
  flex-wrap: wrap;
}
.cover_item {
  width: 50%;
  border: 3px solid #fff;
}
.my_img {
  width: 100%;
}
/*月份*/
.title {
  padding:20rpx 10rpx;
  display: flex;
  /*设置元素对齐方式 --- 两边贴边,剩余空间平分*/
  justify-content: space-between;
}
.active {
  color:hotpink;
  /*设置文字加粗 --- 700加粗,400正常*/
  font-weight: 700;
}
.list {
  display: flex;
  flex-wrap: wrap;
}
.list_item {
  width: 33.33%;
  border: 3px solid #fff;
}
.hot_t {
  margin:16rpx 10rpx;
  padding-left:14rpx;
  border-left: 3px solid hotpink;
  font-weight: 700;
  color: hotpink;
}

知识点

  • 新老数组的数据合并hot:[...this.data.hot,...res.data.data.list],
 	this.setData({
              //实现新老hot数组的合并
              //es6 展开运算符
              //hot存储的不能只是每次请求到的12条数据,我们要把所请求过的数据都存到hot里面
              //此时需要进行数组合并
              //使用展开运算符实现数组合并
              //展开运算符 ==》允许一个表达式在某处展开
            //  hot:res.data.data.list,
              hot:[...this.data.hot,...res.data.data.list],
               //获取接口数据总条数,更新到data里去
               total:res.data.data.total
            })
  • 组件生命周期函数lifetimes组件创建完毕attached

    • 组件的生命周期,指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

    • 其中,最重要的生命周期是 created attached detached ,包含一个组件实例生命流程的最主要时间点。

    	Component({
    	  lifetimes: {
    	    attached: function() {
    	      // 在组件实例进入页面节点树时执行
    	    },
    	    detached: function() {
    	      // 在组件实例被从页面节点树移除时执行
    	    },
    	  },
    	  // 以下是旧式的定义方式,可以保持对 <2.2.3 版本基础库的兼容
    	  attached: function() {
    	    // 在组件实例进入页面节点树时执行
    	  },
    	  detached: function() {
    	    // 在组件实例被从页面节点树移除时执行
    	  },
    	  // ...
    	})
    

二、携参跳转

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层

参考:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

  • 页面互相传值demo
wx.navigateTo({
  url: 'test?id=1',
  events: {
// 接受值
    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    acceptData: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
  // 传值
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('sendData', { data: 'send' })
  }
})
//test.js
Page({
  onl oad: function(option){
  
  // 获取原页面参数
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
// 发送
    // 执行原页面方法,传参
    eventChannel.emit('acceptData', {data: '这是目标页面执行原页面的方法 传给原页面的数据'});
    eventChannel.emit('someEvent', {data: 'sendother'});

// 接受
    // 监听sendData事件,获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('sendData', function(data) {
      console.log(data)
    })
  }
})

三、日期处理方法

    var date=1601084737033;
    // 1 将它重新转为 正常的日期类型 js 中内置  日期对象 可以直接用
    var newDate=new Date(date);
    // console.log(newDate);
    // 2 获取日期里面 月份 js中需要对月份 + 1 
    var month=newDate.getMonth()+1;
    console.log(month);
    // 3 获取 几号
    var currentDate=newDate.getDate();
    var msg=currentDate+" / " + month +" 月";
    console.log(msg);


这篇关于小学期微信小程序实训篇5_分页加载、携参跳转、日期处理方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程