小程序day03

目标

页面导航

声明式导航

1.导航到tabBar页面

2.导航到非tabbar页面

3.后退导航 

编程式导航

1.导航到tabBar页面

 2.导航到非tabBar页面

 3.后退导航

导航传参

1.声明式导航传参

2.编程式导航传参

3.在onLoad中接收导航参数

页面事件

下拉刷新

 

 

这个可以获取完数据之后再停止效果. 

 上拉触底

 

上拉触底案例

 

可以看见的是得到新数据之后是将新数据和旧数据拼接在一起再渲染在页面上的.

 

生命周期

 

 

WXS脚本

 

 

 与js比较

 

案例-本地生活(列表页面)

实现效果

在app.json加上一个“pages/shoplist/shoplist”的路径创建新的页面。

 然后改造主页面的九宫格的每一个的view标签变成navigator标签，然后修改一下url并且传递两个参数。以下是实现效果图。

动态设置页面标题 

使用提供的api在固定的生命周期里面进行渲染. 

 在shoplist的生命周期函数里面，接收传过来的数据只能是onLoad()，所以要先在data里面复制一份，再在onReady里面使用。

获取并渲染商铺列表数据

获取数据

 在js文件里面定义这样一个函数，在onLoad里面调用，函数里要对data的数据进行合并更新。

  getShopList(){wx.showLoading({title: '数据加载中...',})wx.request({url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`, method: 'GET',data:{_page:this.data.page,_limit:this.data.pageSize},success:(res)=>{this.setData({shopList:[...this.data.shopList,...res.data],total:res.header['X-Total-Count']-0})},complete:()=>{wx.hideLoading()}})},

UI渲染

<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
<view class="thumb">
<image src="{{item.images[0]}}" mode=""/>
</view>
<view class="info">
<text class="shop-title">{{item.name}}</text>
<text>电话:{{item.phone}}</text>
<text>地址:{{item.address}}</text>
<text>营业时间:{{item.businessHours}}</text>
</view>
</view>
/* pages/shoplist/shoplist.wxss */
.shop-item{display:flex;padding: 15rpx ;border: 1rpx solid #efefef;margin: 15rpx;border-radius: 8rpx; box-shadow: 1rpx 1rpx 15rpx #ddd;
}
.thumb image{width: 250rpx;height: 250rpx;display: flex;margin-right: 15rpx;
}
.info{display: flex;flex-direction: column;justify-content: space-around;font-size: 24rpx;
}
.shop-title{font-weight: bold;}

效果如图

有边距,有布局，有圆角，有阴影,有加粗。

初步实现上拉加载效果

这里先是设置上拉触底的距离，然后页码值要在上拉加载后加1，然后再调用分页查询获取新数据.

然后是要用一个新字段实现节流效果。

// pages/shoplist/shoplist.js
Page({/*** 页面的初始数据*/data: {query:{},shopList:[],page:1 ,pageSize:10,total:0,isLoading:false},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.setData({query:options})this.getShopList()}, getShopList(){this.setData({isLoading:true})wx.showLoading({title: '数据加载中...',})wx.request({url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`, method: 'GET',data:{_page:this.data.page,_limit:this.data.pageSize},success:(res)=>{this.setData({shopList:[...this.data.shopList,...res.data],total:res.header['X-Total-Count']-0})},complete:()=>{wx.hideLoading()this.setData({isLoading:false})}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {  wx.setNavigationBarTitle({title: this.data.query.title})},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {if(this.data.isLoading) returnthis.setData({page:this.data.page+1})this.getShopList()},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

判断数据是否加载完成

 按照上面加载数据的逻辑，一直上拉加载的话是会一直请求下一页的数据的。但是数据就那么多,也不可能一直加载. 再一直请求都是没有新数据。

没有消息时显示提示框提示没有新的消息。 

 如果判断数据加载完了就不再请求并弹窗提示

  /*** 页面上拉触底事件的处理函数*/onReachBottom() {if(this.data.page*this.data.pageSize>=this.data.total){//证明没有下一页数据return  wx.showToast({title: '数据加载完毕!',icon: 'none'})}if(this.data.isLoading) returnthis.setData({page:this.data.page+1})this.getShopList()},

开启下拉刷新

在配置文件里面进行开启，并配置背景色灰色和小圆点效果.

  "enablePullDownRefresh": true,"backgroundColor": "#efefef","backgroundTextStyle": "dark"

效果图如下 

在下拉刷新时需要对关键数据进行重置。

 /*** 页面相关事件处理函数--监听用户下拉动作*/ onPullDownRefresh() {//重置关键数据this.setData({page:1,shopList: [],total:0})//重新发起数据请求this.getShopList()},

  然后需要在请求数据之后关闭下拉刷新窗口,但是只应该在下拉刷新的数据请求时才进行关闭，上拉加载时就不需要。 

        wx.stopPullDownRefresh()

这里采用传递回调函数的方式，有传回调函数的就调用回调函数关闭下拉刷新窗口.

数据请求改成如下格式.

使用短路运算判断是否有回调函数

  getShopList(cb){this.setData({isLoading:true})wx.showLoading({title: '数据加载中...',})wx.request({url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`, method: 'GET',data:{_page:this.data.page,_limit:this.data.pageSize},success:(res)=>{this.setData({shopList:[...this.data.shopList,...res.data],total:res.header['X-Total-Count']-0})},complete:()=>{wx.hideLoading()this.setData({isLoading:false})// wx.stopPullDownRefresh()cb&cb()}})},

然后在下拉刷新监听函数里面调用时用一个箭头函数进行关闭.

  /*** 页面相关事件处理函数--监听用户下拉动作*/ onPullDownRefresh() {//重置关键数据this.setData({page:1,shopList: [],total:0})//重新发起数据请求this.getShopList(()=>{wx.stopPullDownRefresh()})},

使用wxs处理手机号

处理完之后会使用减号进行分割

<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
<view class="thumb">
<image src="{{item.images[0]}}" mode=""/>
</view>
<view class="info">
<text class="shop-title">{{item.name}}</text>
<text>电话:{{tools.splitPhone( item.phone)}}</text>
<text>地址:{{item.address}}</text>
<text>营业时间:{{item.businessHours}}</text>
</view>
</view>
<wxs src="../../utils/tools.wxs" module="tools"/>

 新建一个wxs脚本，并在页面上进行调用

function splitPhone(str){if(str.length!==11) return strvar arr=str.split('')arr.splice(3,0,'-')arr.splice(8,0,'-')return arr.join('')
}
module.exports={splitPhone:splitPhone
}

总结

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/158243.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Docker学习——①

Docker学习——①

文章目录 1、什么是虚拟化、容器化&#xff1f;2、为什么要虚拟化、容器化&#xff1f;3、虚拟化实现方式3.1 应用程序执行环境分层3.2 虚拟化常见类别3.3 常见虚拟化实现3.3.1 主机虚拟化(虚拟机)实现3.3.2 容器虚拟化实现3.3.3 空间隔离实战--基础知识3.3.4 PID 隔离3.3.5 Mo…
阅读更多...
二叉树OJ题（用前序和中序遍历构建二叉树，用中序和后续遍历构建二叉树）

二叉树OJ题（用前序和中序遍历构建二叉树，用中序和后续遍历构建二叉树）

文章目录 二叉树OJ题一、用前序和中序遍历构建二叉树1.思路2.代码 二、用中序和后续遍历构建二叉树1.思路2.代码 二叉树OJ题 一、用前序和中序遍历构建二叉树 1.思路 1.根据前序遍历找到根结点root 2.在中序遍历中&#xff08;inBegin0和inEndelem.length-1范围之间&#xff09…
阅读更多...
Kafka、RabbitMQ、RocketMQ中间件的对比

Kafka、RabbitMQ、RocketMQ中间件的对比

消息中间件现在有不少&#xff0c;网上很多文章都对其做过对比&#xff0c;在这我对其做进一步总结与整理。 RocketMQ 淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件&#xff0c;使用Mysql作为消息存储媒介&#xff0c;可完全水平扩容&#xff0c;为了进一步降低成…
阅读更多...
三门问题 最通俗解释+拓展

三门问题 最通俗解释+拓展

三门问题是概率论比较经典的一个问题&#xff0c;答案有点反直觉&#xff0c;所以值得学习&#xff0c;理性第一&#xff01;但是&#xff0c;很多网上解释都让人云里雾里&#xff0c;或者干脆解释就是错了&#xff0c;或一上来就贝叶斯公式开始搞数学&#xff0c;其实很简单可…
阅读更多...
Wonder3D安装完美教程

Wonder3D安装完美教程

话不多说，先附上地址： https://github.com/xxlong0/Wonder3D#wonder3dhttps://github.com/xxlong0/Wonder3D#wonder3d 目录 一、预览 二、环境配置
阅读更多...
2023年四川省网络与信息安全技能大赛 决赛个人赛Writeup

2023年四川省网络与信息安全技能大赛 决赛个人赛Writeup

文章目录 Web前端验证PHP_Try MiscHelloWorld密码在这easy_log Cryptobaser 线下“断网”CTF个人赛&#xff0c;题都很简单(新手级难度)&#xff0c;总共10道题目&#xff0c;解了6题。 赛题附件请自取&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1lgNEBO7a1L4KLE2t…
阅读更多...
PerfectPixel 插件，前端页面显示优化工具

PerfectPixel 插件，前端页面显示优化工具

1.简介 PerfectPixel 插件是一款适用于 Chrome 浏览器的网页前端页面显示优化工具&#xff0c;该插件能够帮助开发人员和标记设计人员在开发时将设计图直接加载至网页中&#xff0c;与已成型的网页进行重叠对比&#xff0c;以规范网页像素精度 作为一款可以优化前端页面显示的…
阅读更多...
AtCoder abc143

AtCoder abc143

D - Triangles 排序后two pointer # -*- coding: utf-8 -*- # time : 2023/6/2 13:30 # author : yhdutongwoo.cn # desc : # file : atcoder.py # software : PyCharmimport bisect import copy import sys from sortedcontainers import SortedList from coll…
阅读更多...
【沧元图】梅元知命运逆转，但遗憾下线，孟川新形态揭晓

【沧元图】梅元知命运逆转，但遗憾下线，孟川新形态揭晓

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 深度爆料&#xff0c;《沧元图》是近年来备受期待的动画作品之一&#xff0c;其独特的画风和精彩的剧情吸引了众多观众的关注。这部动画的播出计划备受瞩目&#xff0c;据主创团队透露&#xff0c;本季共有26…
阅读更多...
华为RS设备状态及接口配置命令

华为RS设备状态及接口配置命令

1、查看硬件信息 ①查看序列号 查看整机序列号 display esn display sn ②、查看功率 电源功率 display power 查看光模块功率 display transceiver interface gigabitethernet 1/0/0 verbose ③、查看风扇 display fan ④、查看温度 display temperature all ⑤、查看硬…
阅读更多...
Kubernetes 架构

Kubernetes 架构

Kubernetes 架构 Kubernetes 最初源于谷歌内部的 Borg，提供了面向应用的容器集群部署和管理系统。Kubernetes 的目标旨在消除编排物理 / 虚拟计算，网络和存储基础设施的负担，并使应用程序运营商和开发人员完全将重点放在以容器为中心的原语上进行自助运营。Kubernetes 也提…
阅读更多...
云原生环境下JAVA应用容器JVM内存如何配置？—— 筑梦之路

云原生环境下JAVA应用容器JVM内存如何配置？—— 筑梦之路

Docker环境下的JVM参数非定值配置 —— 筑梦之路_docker jvm设置-CSDN博客 之前简单地记录过一篇&#xff0c;这里在之前的基础上更加细化一下。 场景说明 使用Java开发且设置的JVM堆空间过小时&#xff0c;程序会出现系统内存不足OOM&#xff08;Out of Memory&#xff09;的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023