【微信小程序——案例——本地生活(列表页面)】

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

九宫格中实现导航跳转——以汽车服务为案例(之后可以全部实现页面跳转——现在先实现一个)

在app.json中添加新页面
在这里插入图片描述

修改之前的九宫格view改为navitage
在这里插入图片描述

效果图:
请添加图片描述

请添加图片描述

动态设置标题内容——调用wx.setNavigationBarTitle( Object object)动态设置当前页面的标题

onLoad( Object query)页面加载时触发,可以在onLoad的参数中获取打开当前页面路径中的参数

onReady()页面初次渲染完成时触发,注:在对界面内容进行设置的API如:wx.setNavigationBarTitle,请在onReady()之后进行

注:如图可以看到之前home.wxml中导航栏都会传递一个参数——所以能实现动态传参
请添加图片描述

  1. 在data中申请一个数组query:{}
    在这里插入图片描述
  • 在生命周期函数onLoad中获取到页面传过来的参数,将值赋给query数组
    在这里插入图片描述

  • 在onReady()中调用wx.setNavigationBarTitle——将query中的参数赋值给wx.setNavigationBarTitle函数的属性项title
    在这里插入图片描述
    效果图:
    请添加图片描述
    请添加图片描述

分页的形式,加载指定分类下商铺列表的数据——由于请求不到数据所以我用的假数据实现的——节流处理和数据请求可以看我上一篇文章——这里只实现洗车店列表

这个请求函数不实现

(1)接口地址

  • url
  • url地址中的:cate_id是动态参数,表示分类的id (2)请求方式
  • GET请求 (3)
  • _page表示请求第几页的数据
  • _limit表示每页请求几条数据

洗车店例表数据实现效果图:

请添加图片描述

在wxml中编写

在这里插入图片描述

!--pages/car_service/car_service.wxml-->
<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
  <view class="thumb">
      <image src="{{item.icon}}"></image>
  </view>
  <view class="info">
    <text class="shop-title">店名:{{item.name}}</text>
    <text>电话:{{item.phone}}</text> 
    <text>地址:{{item.adress}}</text> 
  </view>


</view>

在js中编写假数据——黑马的url有效但是没有数据所有导致,只能这样

在这里插入图片描述

代码如下:

/**
   * 页面的初始数据
   */
  data: {
    qurey:{},
    shopList:[
      {'id':'1','name':'洗车店1','phone':'12345679','adress':'世界上的某一个地方','icon':'/images/car_png/car_service1.jpg'},
      {'id':'2','name':'洗车店2','phone':'12345678','adress':'世界上的某一个地方','icon':'/images/car_png/car_service2.jpg'},
      {'id':'3','name':'洗车店3','phone':'12345679','adress':'世界上的某一个地方','icon':'/images/car_png/car_service1.jpg'},
      {'id':'4','name':'洗车店4','phone':'12345678','adress':'世界上的某一个地方','icon':'/images/car_png/car_service2.jpg'},
      {'id':'5','name':'洗车店5','phone':'12345679','adress':'世界上的某一个地方','icon':'/images/car_png/car_service1.jpg'},
      {'id':'6','name':'洗车店6','phone':'12345678','adress':'世界上的某一个地方','icon':'/images/car_png/car_service2.jpg'},
      {'id':'7','name':'洗车店7','phone':'12345679','adress':'世界上的某一个地方','icon':'/images/car_png/car_service1.jpg'},
      {'id':'8','name':'洗车店8','phone':'12345678','adress':'世界上的某一个地方','icon':'/images/car_png/car_service2.jpg'},
      {'id':'9','name':'洗车店9','phone':'12345679','adress':'世界上的某一个地方','icon':'/images/car_png/car_service1.jpg'},
      {'id':'10','name':'洗车店10','phone':'12345678','adress':'世界上的某一个地方','icon':'/images/car_png/car_service2.jpg'}

    ],
    page:1,
    pageSize:10,
    total:0,

在wxss中编写样式:

/* pages/car_service/car_service.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:block;
  font-size:24rpx;
  margin-right: 15rpx;

}


.shop-title{
  font-weight: bold;
}

.info{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

判断数据是否加载完成——代码样式——调用wx.showToast( Object object)

判断公式:page*pageSize>=( 大于等于)total

 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
	  //判断是否在加载数据
	   ifthis.data.page*this.data.pageSize>=this.data.total){
			//证明没有下一个数据
			return wx.showToast({
					title:"数据加载完毕!"
					icon:"none"
					})
				}

      //页码值加+1
      this.setData({
        page:this.data.page+1
      })

      this.getSopList()//数据请求函数
  },

下拉刷新——onPullDownRefresh函数中实现
(1)//需要重置的数据
(2)//重新发起请求
(3)下拉刷新关闭加载版面——在函数wx.stopPullDownRefresh()

注:在上拉加载的时候不需要关闭——在下拉刷新的时候才需要关闭加载面板——通过回调函数来实现,——在onPullDownRefresh函数中传递一个回调函数

使用wxs处理手机号

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Java】内存可见性问题是什么?

文章目录 内存模型内存可见性解决方案volatile 内存模型 什么是JAVA 内存模型&#xff1f; Java Memory Model (JAVA 内存模型&#xff09;是描述线程之间如何通过内存(memory)来进行交互。 具体说来&#xff0c; JVM中存在一个主存区&#xff08;Main Memory或Java Heap Mem…

wpf下RTSP|RTMP播放器两种渲染模式实现

技术背景 在这篇blog之前&#xff0c;我提到了wpf下播放RTMP和RTSP渲染的两种方式&#xff0c;一种是通过控件模式&#xff0c;另外一种是直接原生RTSP、RTMP播放模块&#xff0c;回调rgb&#xff0c;然后在wpf下渲染&#xff0c;本文就两种方式做个说明。 技术实现 以大牛直…

信息系统项目管理师0051:管理基础(4信息系统管理—4.1管理方法—4.1.1管理基础)

点击查看专栏目录 文章目录 第四章 信息系统管理4.1管理方法4.1.1管理基础1.层次结构2.系统管理第四章 信息系统管理 在信息技术和数据资源要素的推动下,社会各领域已经并正在加速进入数字化的全新发展时期,基于智能、网络和大数据的新经济业态正在形成,从“数字融合”向“数…

OpenCV4.9图像金字塔

目标 在本教程中&#xff0c;您将学习如何&#xff1a; 使用 OpenCV 函数 pyrUp()和 pyrDown()对给定图像进行下采样或上采样。 理论 注意 下面的解释属于 Bradski 和 Kaehler 的 Learning OpenCV 一书。 通常&#xff0c;我们需要将图像转换为与原始图像不同的大小。为此…

CleanMyMac一键释放Mac潜力的智能助手

在数字化时代&#xff0c;我们的Mac电脑承载着日益增多的数据和文件&#xff0c;使得系统性能逐渐下降&#xff0c;运行缓慢。为了解决这个问题&#xff0c;我们需要一款能够深度清理、优化Mac性能的软件。CleanMyMac&#xff0c;作为Mac系统清理领域的佼佼者&#xff0c;凭借其…

Go语言入门|包、关键字和标识符

目录 Go语言 包文件 规则 关键字 规则 标识符 规则 预定义标识符 Go语言 Go语言是一种静态类型、编译型和并发型的编程语言&#xff0c;由Google开发。Go的源代码文件以.go为扩展名&#xff0c;文件名通常与包名保持一致。一个Go文件可以包含多个顶级声明&#xff0c;…

【opencv】示例-train_HOG.cpp 训练和测试基于支持向量机(SVM)的行人检测器

#include "opencv2/imgproc.hpp" // 包含OpenCV图像处理头文件 #include "opencv2/highgui.hpp" // 包含OpenCV高层GUI&#xff08;图形用户界面&#xff09;头文件 #include "opencv2/ml.hpp" // 包含OpenCV机器学习模块头文件 #includ…

jupyter切换不同的内核(虚拟环境)(anaconda 24.1.2)

jupyter切换不同的内核&#xff08;anaconda 24.1.2&#xff09; 主要的两条命令&#xff1a; conda install ipykernel python -m ipykernel install --user --name 环境名称 anaconda的版本号 conda --version实例&#xff1a; 一、首先可以看到已经创…

【JDBC入门学习】

JDBC简介 注意&#xff1a;1.注册驱动可以不写了 2.导入jar包时要注意点击右键添加 package com.wudreamer.jdbc;import java.sql.Connection; import java.sql.DriverManager; import java.sql.Statement;/* * jdbc 入门 * */ public class JdbcDemo {public static v…

软考中级工程师网络技术第二节网络体系结构

OSPF将路由器连接的物理网络划分为以下4种类型&#xff0c;以太网属于&#xff08;25&#xff09;&#xff0c;X.25分组交换网属于&#xff08;非广播多址网络NBMA&#xff09;。 A 点对点网络 B 广播多址网络 C 点到多点网络 D 非广播多址网络 试题答案 正确答案&#xff1a; …

SDUT lab5-2

7-2 sdut-JAVA-Credit Card Number Validation 分数 10 全屏浏览 切换布局 作者 马新娟 单位 山东理工大学 Each type of credit card begins with a prefix or range of prefixes and is of a certain length. Table 1 shows the details of two commonly used credit ca…

LeetCode-31-下一个排列问题

题目说明 实现获取下一个排列的函数&#xff0c;算法需要将给定数字序列重新排列成字典序中下一个更大的排列。 如果不存在下一个更大的排列&#xff0c;则将数字重新排列成最小的排列&#xff08;即升序排列&#xff09;。 必须原地修改&#xff0c;只允许使用额外常数空间。…

论文笔记:SmartPlay : A Benchmark for LLMs as Intelligent Agents

iclr 2024 reviewer评分 5688 引入了 SmartPlay&#xff0c;一种从 6 种不同游戏中提取的基准 衡量LLM作为智能体的能力 1 智能代理所需的能力 论文借鉴游戏设计的概念&#xff0c;确定了智能LLM代理的九项关键能力&#xff0c;并为每项能力确定了多个等级&#xff1a; 长文…

JVM虚拟机(五)强引用、软引用、弱引用、虚引用

目录 一、强引用二、软引用三、弱引用四、虚引用五、总结 引文&#xff1a; 在 Java 中一共存在 4 种引用&#xff1a;强、软、弱、虚。它们主要指的是&#xff0c;在进行垃圾回收的时候&#xff0c;对于不同的引用垃圾回收的情况是不一样的。下面我们就一起来看一下这 4 种引用…

白话微机:10.民风淳朴的MCS-51小镇(小镇方言:汇编)

1. 基本结构与周期 MCS-51系列单片机属于8位单片机用 8051单片机构成最小应用系统时&#xff0c;只要将单片机接上时钟电路和复位电路即可MCS-51单片机由CPU、存储器和I/O三部分组成CPU是指&#xff1a;运算器和控制器 “PC CPU 3BUS RAM I/O” 在执行指令过程中&#xff…

Java-Scanner类进阶+题目

Scanner进阶 接收整数数据时&#xff1a; 接收小数数据时&#xff1a; 例子&#xff1a; 可以先这样弄出scanner的框架&#xff1a; 未完待续... ...

介绍set和map容器

文章目录 1.什么是关联式容器2.什么是键值对3.树形结构的关联式容器3.1set3.1.2set的使用set的构造set的迭代器set的容量set的常用操作set的简单使用 3.2 mapmap的构造map的迭代器map的容量map的常用操作map的使用 3.3multiset3.4 multimap 在介绍set和map容器前先了解什么是关…

《GVL》论文笔记

原文链接 [2303.06378] Learning Grounded Vision-Language Representation for Versatile Understanding in Untrimmed Videos (arxiv.org) 原文笔记 What 《Learning Grounded Vision-Language Representation for Versatile Understanding in Untrimmed Videos》 全文一…

编曲知识19:自动化处理 发送原理 混响 延迟

自动化处理 发送原理 混响 延迟小鹅通-专注内容付费的技术服务商https://app8epdhy0u9502.pc.xiaoe-tech.com/live_pc/l_661a68eae4b023c0a96a8b36?course_id=course_2XLKtQnQx9GrQHac7OPmHD9tqbv 自动化处理 自动化 鼠标挪动到轨道左下角打开自动化轨道 或右键轨道-左键单击…

Node.js 中的 RSA 加密、解密、签名与验证详解

引言 在现代的网络通信中&#xff0c;数据安全显得尤为重要。RSA加密算法因其非对称的特性&#xff0c;广泛应用于数据的加密、解密、签名和验证等安全领域。本文将详细介绍RSA算法的基本原理&#xff0c;并结合Node.js环境&#xff0c;展示如何使用内置的crypto模块和第三方库…