小学期微信小程序实训篇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_分页加载、携参跳转、日期处理方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-22微信小程序的接口信息py可以抓到吗？-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数？-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接？-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置？-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗？-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号？-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能？-icode9专业技术文章分享
- 2024-11-20微信小程序全栈教程：从零开始的全攻略
- 2024-11-19微信小程序全栈学习：从零开始的完整指南
