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

2022-09-24 14:27:25

目录

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

开始

一、分页加载

什么是分页加载

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

分类加载两种基本思路

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

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

  • 跳过的方法体现在请求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);
上一篇：干货|咦？还可以这样图解Word2Vec


下一篇：label smoothing