微信小程序:页面全局参数(注意不是小程序的全局变量globalData)
为什么要使用页面全局参数:方便使用数据。
由于总页数需要再另外的一个方法中使用,所以要把总页数变成一个页面全局参数。因为取数据使用this.xxx即可,中间不用加data,给页面全局参数赋值页方便,直接使用this.xxx=值即可,不需要使用setData()
页面全局参数与data同层级。
Page({
/**
* 页面的初始数据
*/
data: {
goodsList: [],
total: 0
},
//接口要的参数
QueryParams: {
query: '',
cid: '',
pagenum: 1,
pagesize: 10
},
// 总页数
totalPages: 1,
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//console.log(options)
this.QueryParams.cid = options.cid || ''
this.QueryParams.query = options.query || ''
this.getGoodsList();
},
async getGoodsList(){
//console.log(this.QueryParams)
const res = await request({url: "/goods/search",data: this.QueryParams})
console.log(res)
//获取总条数
const total = res.total
//计算总页数
this.totalPages = Math.ceil(total / this.QueryParams.pagesize)
console.log(this.totalPages)
this.setData({
//拼接了数组
goodsList: [...this.data.goodsList,...res.goods]
})
wx.stopPullDownRefresh();
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.setData({
goodsList: []
})
this.QueryParams.pagenum = 1;
this.getGoodsList();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
// console.log("页面触底")
//判断还有没有下一页
if(this.totalPages > this.QueryParams.pagenum){
//console.log("还有下一页")
this.QueryParams.pagenum++;
this.getGoodsList();
}else{
//console.log("没有下一页了")
wx.showToast({
title: '没有下一页数据了!'
});
}
},
})
注意:获取data数据模型中的值是通过this.data.xx来获取的。注意:微信小程序中获取数据模型中的值和给数据模型中的属性赋值都与vue中的不一样。
把输入框的值赋值给data当中使用setData方法。
微信小程序:页面全局参数(注意不是小程序的全局变量globalData)的更多相关文章
- 微信小程序页面带参数跳转
页面传递参数的方式 data-para js获取参数
- 微信小程序页面带参数跳转及接收参数内容navigator
功能从index页面跳转到draw页面,并在draw页面获取id及imgUrl index.wxml <navigator class='looks-view' wx:for="{{i ...
- 小程序页面收录 sitemap
微信现已开放小程序内搜索,你的小程序页面将可能展示在微信搜索等多个公开场景中.当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引. 若小程序中存在不适合展示信息如用户个人信息.商 ...
- 微信小程序跳转页面时参数过长导致参数丢失
问题描述: 微信小程序:跳转页面时传参,参数过长导致参数丢失 跳转到文章详情页时,使用的文章链接e.currentTarget.dataset.id过长导致参数丢失 handleClickArticl ...
- 微信小程序 (全局配置和页面配置)
全局配置 app.json 文件用来对微信小程序进行全局配置. 一.配置页面路径 二.window 配置全局默认的窗口 navigationBarTextStyle:导航栏的标题颜色 navigati ...
- Java 获取微信小程序二维码(可以指定小程序页面 与 动态参数)
一.准备工作 微信公众平台接口调试工具 小程序的唯一标识(appid) 小程序的密钥(secret) 二.获取access_token 打开微信公众平台接口调试工具,在参数列表中输入小程序的appid ...
- 微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 <navigator url="/page/navigate/navi ...
- 在微信小程序页面间传递数据总结
在微信小程序页面间传递数据 原文链接:https://www.jianshu.com/p/dae1bac5fc75 在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况, ...
- 微信小程序页面跳转的三种方式总结
原文链接 https://blog.csdn.net/zgmu/article/details/72123329 首先我们了解到,小程序规定页面路径只能有五层,所以我们尽量避免多层级的页面跳转 页面跳 ...
随机推荐
- 文本处理三剑客简介(grep、awk、sed)
本章内容: 命令 描述 awk 支持所有的正则表达式 sed 默认不支持扩展表达式,加-r 选项开启 ERE,如果不加-r 使用花括号要加转义符\{\} grep 默认不支持扩展表达式,加-E 选项开 ...
- LaTeX 环境安装&编译器配置
推荐网站:https://www.latexstudio.net/articles/ (基本所有的latex疑惑都可以在这里得到解决) 入门视频:两小时短小精悍,让你轻松入门,https://www. ...
- C# 网络加密与解密
数据在网络传输过程中的保密性是网络安全中重点要考虑的问题之一.由于通过网络传递数据是在不安全的信道上进行传输的,因此通信双方要想确保任何可能正在侦听的人无法理解通信的内容,而且希望确保接收方接收的信息 ...
- 【转】Redis数据备份和重启恢复
一.对Redis持久化的探讨与理解 目前Redis持久化的方式有两种: RDB 和 AOF 首先,我们应该明确持久化的数据有什么用,答案是用于重启后的数据恢复.Redis是一个内存数据库,无论是RDB ...
- Python——控制鼠标键盘
一.安装包 pip install pynput 二.引用包 from pynput import mouse,keyboard 三.控制鼠标 from pynput.mouse import But ...
- select函数详细用法解析
1.表头文件 #include #include #include 2.函数原型 int select(int n,fd_set * readfds,fd_set * writefds,fd_set ...
- 计算机网络 part2
一.UDP协议 1.概述 UDP提供不可靠的服务,无连接(不存在建立连接的时延),首部开销相对TCP小,没有拥塞控制,提供最大努力交付,面向报文(无论多长的报文UDP也只加一个头部就往下发:TCP面向 ...
- mybatis(四)缓存机制
转载:https://www.cnblogs.com/wuzhenzhao/p/11103043.html 缓存是一般的ORM 框架都会提供的功能,目的就是提升查询的效率和减少数据库的压力.跟Hibe ...
- 对于kmp求next数组的理解
首先附上代码 1 void GetNext(char* p,int next[]) 2 { 3 int pLen = strlen(p); 4 next[0] = -1; 5 int k = -1; ...
- LWIP再探----内存堆管理
LWIP的内存管理主要三种:内存池Pool,内存堆,和C库方式.三种方式中C库因为是直接从系统堆中分配内存空间且易产生碎片因此,基本不会使用,其他两种是LWIP默认全部采用的方式,也是综合效率和空间的 ...