微信小程序本地生活（列表页面）

news2025/10/31 17:03:34

一、实现效果

在这里插入图片描述

二、实现步骤

  1. 主要实现功能：
  • 页面导航并传参
  • 上拉触底时加载下一页数据
  • 下拉刷新列表数据
  1. 实现步骤
  • 创建列表页面
  • 动态设置页面标题
  • 定义数据，发起请求获取数据
  • 渲染数据并美化样式
  • 实现上拉加载数据效果
  • 对上拉触底进行节流处理
  • 上拉触底请求数据前，判断数据是否加载完毕
  • 下拉刷新处理数据
  • 使用WXS处理手机号

三、具体代码

  1. 创建列表页面：在app.json的pages配置项新增shopList
"pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/shopList/shopList"
  ],
  1. 动态设置页面标题
    query 用来接收点击页面传递给shopList页面的参数，包括id和title。
/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query: options
    });
    this.getShoplist();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  },
  1. 定义数据，发起请求获取数据
data: {
    query: {},
    shoplist: [],
    page: 1, // 当前是第几页
    pageSize: 10, // 每一页数据条数
    total: 0, // 所有数据条数
    isLoading: false
  },
  getShoplist(a) {
    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
        });
      },
    })
  },
  1. 渲染数据并美化样式
// WXML 文件
<view wx:for="{{shoplist}}" wx:key="id" class="shop-item">
  <view class="thumb">
    <image src="{{item.images[0]}}" />
  </view>
  <view class="info">
    <text>{{item.name}}</text>
    <text>电话：{{item.phone}}</text>
    <!-- <text>电话：{{item.phone}}</text> -->
    <text>地址：{{item.address}}</text>
    <text>营业时间：{{item.businessHours}}</text>
  </view>
</view>

// WXSS 文件
.shop-item {
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  margin: 15rpx;
  box-shadow: 1rpx 1rpx 20rpx #ddd;
}
.thumb image {
  width: 250rpx;
  height: 250rpx;
  vertical-align: middle;
  margin-right: 15rpx;
}
.info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}
.info text:nth-child(1) {
  font-weight: bolder;
}
  1. 实现上拉加载数据效果
    通过wx.showLoading(Object object)实现，当数据没有加载出来，显示“数据加载中”，数据请求完成隐藏该效果。
  getShoplist(a) {
    // 展示loading效果
    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: ()=>{
        // 隐藏loading效果
        wx.hideLoading();
      }
    })
  },
  1. 对上拉触底进行节流处理，分为以下几步：
  • 在 data 中定义 isloading 节流阀。isloading 为布尔值，false 表示当前没有进行任何数据请求，可以请求， true 表示当前正在进行数据请求，重新触发的下一页请求都要被屏蔽。
  • 在 getShopList() 方法中修改 isloading 节流阀的值。当开始发起请求时，调用 getShopList 时将节流阀设置 true，数据请求完成之后，在网络请求的 complete回调函数中，将节流阀重置为 false。
  • 在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制。如果节流阀的值为 true，则阻止当前请求。如果节流阀的值为 false，则发起数据请求。
Page({
  /**
   * 页面的初始数据
   */
  data: {
    query: {},
    shoplist: [],
    page: 1, // 当前是第几页
    pageSize: 10, // 每一页数据条数
    total: 0, // 所有数据条数
    isLoading: false
  },
  getShoplist(a) {
    this.setData({
      isLoading: true
    })
    // 展示loading效果
    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: ()=>{
        // 隐藏loading效果
        wx.hideLoading();
        this.setData({
          isLoading: false
        });
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query: options
    });
    this.getShoplist();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  },
    // 重新发起数据请求 第一页
    this.getShoplist(()=>{
      wx.stopPullDownRefresh();
    });
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    // 判断是否正在加载其他数据，节流
    if (this.data.isLoading===true) {
      return;
    }
    this.setData({
      page: this.data.page + 1
    })
    this.getShoplist();
  },
})
  1. 上拉触底请求数据前，判断数据是否加载完毕
    page * pageSize >= total 即已展示的数据条数大于等于总条数，表示页面数据已经全部加载完毕，不再发起请求 并且调用wx.showToast(obj)让页面显示“数据正在加载完毕”。
onReachBottom() {
    // 判断是否还有下一页数据
    if (this.data.pageSize * this.data.page >= this.data.total) {
      return wx.showToast({
        title: '数据加载完毕！',
        icon: 'none'
      })
    }
    // 判断是否正在加载其他数据，节流
    if (this.data.isLoading===true) {
      return;
    }
    this.setData({
      page: this.data.page + 1
    })
    this.getShoplist();
  },
  1. 下拉刷新处理数据
    下拉刷新要重置数据，发起请求返回的是第一页的数据。请求数据后 还要调用函数 wx.stopPullDownRefresh();关闭下拉刷新效果。
 onPullDownRefresh() {
    // 重置关键数据
    this.setData({
      page: 1,
      shoplist: [],
      total: 0
    });
    // 重新发起数据请求 第一页
    this.getShoplist(()=>{
      wx.stopPullDownRefresh();
    });
  },
  1. 使用WXS处理手机号
  • 定义WXS文件，文件代码如下：
function splitPhone(str) {
  if (str.length != 11) {
    return str;
  } else {
    var arr = str.split('');
    arr.splice(3, 0, '-');
    arr.splice(8, 0, '-');
    console.log(arr);
    return arr.join('');
  }
  // return str;
}
module.exports = {
  splitPhone: splitPhone
}
  • 将WXML文件中渲染手机号的代码改动
<view wx:for="{{shoplist}}" wx:key="id" class="shop-item">
  <view class="thumb">
    <image src="{{item.images[0]}}" />
  </view>
  <view class="info">
    <text>{{item.name}}</text>
    <text>电话：{{m1.splitPhone(item.phone)}}</text>
    <!-- <text>电话：{{item.phone}}</text> -->
    <text>地址：{{item.address}}</text>
    <text>营业时间：{{item.businessHours}}</text>
  </view>
</view>

<wxs src="../../utils/shoplist.wxs"  module="m1"></wxs>

四、完整代码

  1. shopList.wxml文件
<!--pages/shopList/shopList.wxml-->
<view wx:for="{{shoplist}}" wx:key="id" class="shop-item">
  <view class="thumb">
    <image src="{{item.images[0]}}" />
  </view>
  <view class="info">
    <text>{{item.name}}</text>
    <text>电话：{{m1.splitPhone(item.phone)}}</text>
    <!-- <text>电话：{{item.phone}}</text> -->
    <text>地址：{{item.address}}</text>
    <text>营业时间：{{item.businessHours}}</text>
  </view>
</view>
<wxs src="../../utils/shoplist.wxs"  module="m1"></wxs>
  1. shopList.wxss文件
/* pages/shopList/shopList.wxss */

.shop-item {
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  margin: 15rpx;
  box-shadow: 1rpx 1rpx 20rpx #ddd;
}
.thumb image {
  width: 250rpx;
  height: 250rpx;
  vertical-align: middle;
  margin-right: 15rpx;
}
.info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}
.info text:nth-child(1) {
  font-weight: bolder;
}
  1. shopList.js文件
// pages/shopList/shopList.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    query: {},
    shoplist: [],
    page: 1, // 当前是第几页
    pageSize: 10, // 每一页数据条数
    total: 0, // 所有数据条数
    isLoading: false
  },
  getShoplist(a) {
    this.setData({
      isLoading: true
    })
    // 展示loading效果
    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
        });
        // console.log(this.data.total);
        // console.log(res);
        // console.log(this.data.shoplist);
        // console.log(this.data.total);
      },
      complete: ()=>{
        // 隐藏loading效果
        wx.hideLoading();
        this.setData({
          isLoading: false
        });
        a && a();
      }
    })
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query: options
    });
    this.getShoplist();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  },

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

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    // 判断是否还有下一页数据
    if (this.data.pageSize * this.data.page >= this.data.total) {
      return wx.showToast({
        title: '数据加载完毕！',
        icon: 'none'
      })
    }
    // 判断是否正在加载其他数据，节流
    if (this.data.isLoading===true) {
      return;
    }
    this.setData({
      page: this.data.page + 1
    })
    this.getShoplist();
  },

})
  1. shopList.json文件
{
  "usingComponents": {},
  "onReachBottomDistance": 200,
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}
  1. shopList.wxs文件
function splitPhone(str) {
  if (str.length != 11) {
    return str;
  } else {
    var arr = str.split('');
    arr.splice(3, 0, '-');
    arr.splice(8, 0, '-');
    console.log(arr);
    return arr.join('');
  }
  // return str;
}
module.exports = {
  splitPhone: splitPhone
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SSMP整合综合案例【SpringBoot的基本增删改查】

SSMP整合综合案例【SpringBoot的基本增删改查】

一、基本页面 主页面 添加 删除 分页 条件查询 实体类开发————使用Lombok快速制作实体类 Dao开发————整合MyBatisPlus&#xff0c;制作数据层测试 Service开发————基于MyBatisPlus进行增量开发&#xff0c;制作业务层测试类 Controller开发————基于Restful…
阅读更多...
【计算机网络】什么是WebSocket？

【计算机网络】什么是WebSocket？

目录 WebSocket简介协议优点使用场景 WebSocket WebSocket是一种网络传输协议,可在单个TCP连接上进行全双工通信&#xff0c;位于OSI模型的应用层。 WebSocket使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务器主动向客户端推送数据。在WebSocket API中&a…
阅读更多...
第7篇 vue的模块化与babel的转换

第7篇 vue的模块化与babel的转换

一 babel的转换 1.1 babel的转换 Babel是一个广泛使用的转码器&#xff0c;可以将ES6代码转为ES5代码&#xff0c;从而在现有环境执行执行。 可以现在就用 ES6 编写程序&#xff0c;而不用担心现有环境是否支持。 1.2 案例 1.新建工程&#xff0c;初始化&#xff1a; npm …
阅读更多...
【数字人】使用Mixamo动画资源

【数字人】使用Mixamo动画资源

使用Mixamo动画资源 一、获取资源和数据处理1. 获取资源2. 模型选择3. 绑定骨骼4. 动画检索5. 动画参数二、面向不同平台的处理1. 面向Unity平台的使用2. 面向UE平台的使用Mixamo是一个提供动画资源的在线平台，在游戏、虚拟现实、动画等项目添加高质量的人物动画方面实现降本增…
阅读更多...
java面试题（17）：链表两数相加

java面试题（17）：链表两数相加

两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数都不会以 0 开头…
阅读更多...
Unity Asset Bundle Browser 工具

Unity Asset Bundle Browser 工具

Unity Asset Bundle Browser 工具 您可以在 Unity 项目中使用 Asset Bundle Browser 工具能够查看和编辑资源包的配置。 有关更多信息&#xff0c;请参阅 Unity Asset Bundle Browser 文档。 注意&#xff1a;此工具是不受支持的实用程序。查看极大的资源包可能会导致性能下…
阅读更多...
Linux内存管理--smaps内存

Linux内存管理--smaps内存

一、内存的两个概念 了解smaps内存之前要先搞清楚Linux内存管理中的虚拟内存&#xff08;Virtual Memory&#xff09;和驻留内存&#xff08;Resident Memory&#xff09;两个概念。 1、虚拟内存 首先需要强调的是虚拟内存不同于物理内存&#xff0c;虽然两者都包含内存字眼…
阅读更多...
数电课程设计——课设一：加减计数器

数电课程设计——课设一：加减计数器

为了帮助大家更好学习FPGA硬件语言&#xff0c;创立此资源 包含文件有&#xff1a;实验报告、仿真文件&#xff0c;资料很全&#xff0c;有问题可以私信 一、实验内容 1、利用QuartusII和Modelsim实现100进制可逆计数器编码显示实验。 二、实验步骤 &#xff08;1&#xff…
阅读更多...
GCP Architect之VPN+Network

GCP Architect之VPN+Network

VPN 搜索结果共计:11 [单选]As part of implementing their disaster recovery plan, your company is trying to replicate their production MySQL database from their private data center to their GCP project using a Google Cloud VPN connection. They are experien…
阅读更多...
compressor/limiter/expander/noisegate相关总结

compressor/limiter/expander/noisegate相关总结

一&#xff0c;简介 在学习音频数字信号处理的DRC&#xff08;Dynamic Range Control&#xff09;时&#xff0c;遇到几个概念&#xff0c;分别是compressor/limiter/expander/noisegate&#xff0c;本篇文章谈一谈我对这些模块的理解。 二&#xff0c;Compressor&#xff08…
阅读更多...
线性代数的本质(二)

线性代数的本质(二)

文章目录 线性变换与矩阵线性变换与二阶方阵常见的线性变换复合变换与矩阵乘法矩阵的定义列空间与基矩阵的秩逆变换与逆矩阵 线性变换与矩阵 线性变换与二阶方阵 本节从二维平面出发学习线性代数。通常选用平面坐标系 O x y Oxy Oxy &#xff0c;基向量为 i , j \mathbf i,…
阅读更多...
MySQL高级篇_16_MVCC多版本并发控制_尚硅谷_宋红康

MySQL高级篇_16_MVCC多版本并发控制_尚硅谷_宋红康

MySQL高级篇_MVCC多版本并发控制 1. 什么是MVCC&#xff08;多版本并发控制&#xff09;2. 快照读与当前读2.1 快照读2.2 当前读 3. 复习3.1 再谈隔离级别3.2 隐藏字段、Undo Log版本链 4. MVCC实现原理之ReadView4.1 什么是ReadView4.2 设计思路4.3 ReadView的规则4.4 MVCC整体…
阅读更多...
自动驾驶多任务框架Hybridnets——同时处理车辆检测、可驾驶区域分割、车道线分割模型部署（C++/Python）

自动驾驶多任务框架Hybridnets——同时处理车辆检测、可驾驶区域分割、车道线分割模型部署（C++/Python）

一、多感知任务 在移动机器人的感知系统&#xff0c;包括自动驾驶汽车和无人机&#xff0c;会使用多种传感器来获取关键信息&#xff0c;从而实现对环境的感知和物体检测。这些传感器包括相机、激光雷达、雷达、惯性测量单元&#xff08;IMU&#xff09;、全球导航卫星系统&am…
阅读更多...
Linux UDP编程流程

Linux UDP编程流程

文章目录 UDP编程流程UDP协议无连接的特点UDP协议数据报的特点 UDP编程流程 UDP 提供的是无连接、不可靠的、数据报服务。服务器端和客户端没有什么本质上的区别。编程流程如下&#xff1a; socket()用来创建套接字&#xff0c;使用 udp 协议时&#xff0c;选择数据报服务 SOC…
阅读更多...
新手小白制作产品册的攻略合集

新手小白制作产品册的攻略合集

在如今竞争激烈的市场中&#xff0c;一个精美而专业的产品册可以帮助你吸引更多的客户和提升品牌形象。然而&#xff0c;对于新手小白来说&#xff0c;制作产品册可能会显得有些困难。不用担心&#xff01;小编将告诉大家一些制作产品册的攻略&#xff0c;帮助你轻松入门 首先我…
阅读更多...
MySQL学习问题记录

MySQL学习问题记录

文章目录 MySQL学习问题记录1、查询记录自动根据id排序&#xff1f; MySQL学习问题记录 1、查询记录自动根据id排序&#xff1f; step1&#xff1a;建表 表项信息&#xff1a; 写入数据顺序id为10 2 7 1。查寻时返回记录顺序为1 2 7 10&#xff1f; 更新一条数据后仍然按照…
阅读更多...
在Linux系统上用C++将主机名称转换为IPv4、IPv6地址

在Linux系统上用C++将主机名称转换为IPv4、IPv6地址

在Linux系统上用C将主机名称转换为IPv4、IPv6地址 功能 指定一个std::string类型的主机名称&#xff0c;函数解析主机名称为IP地址&#xff0c;含IPv4和IPv6&#xff0c;解析结果以std::vector<std::string>类型返回。解析出错或者解析失败抛出std::string类型的异常消…
阅读更多...
第19章_瑞萨MCU零基础入门系列教程之RTC

第19章_瑞萨MCU零基础入门系列教程之RTC

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…
阅读更多...
【基于递归混合尺度：无监督GAN：Pansharpening】

【基于递归混合尺度：无监督GAN：Pansharpening】

Pansharpening Using Unsupervised Generative Adversarial Networks With Recursive Mixed-Scale Feature Fusion &#xff08;基于递归混合尺度特征融合的无监督生成对抗网络泛锐化&#xff09; 全色锐化(pansharpening)是提高多光谱图像空间分辨率的重要技术。大多数模型都…
阅读更多...
记录DatagramSocket的使用 | UDP协议下的数据传输 | java学习笔记

记录DatagramSocket的使用 | UDP协议下的数据传输 | java学习笔记

a端 import java.io.*; import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.InetAddress;/*** a端发送“今天星期几”给b端*/ public class UDPa {public static void main(String[] args) throws IOException {//a端绑定9999端口————a端从…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023