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

最新推荐文章于 2024-04-14 01:37:11 发布
最新推荐文章于 2024-04-14 01:37:11 发布
阅读量2.1k 收藏 15
点赞数 4
文章标签： 微信小程序 生活 小程序 前端 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62508027/article/details/132788737
版权

一、实现效果

在这里插入图片描述

二、实现步骤

  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
}
白小水i
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序开发之——音乐播放器-编写页面结构和样式，如何化身BAT面试收割机
m0_69440777的博客
04-11 3158
前言 这些题目是网友去美团等一线互联网公司面试被问到的题目。笔者从自身面试经历、各大网络社交技术平台搜集整理而成，熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率。 主要分为以下几部分： （1）Android面试题 （2）Java面试题 （3）高级开发技术面试题 音乐推荐 播放器 播放列表 说明： 上述代码中， 外层一共有3个标签，其class分别为tab、content和player，对应页面的3个基本区域 [](()3.2 页面样式(pages/index/index.wxs
微信小程序 列表的分页实现（最新的最简易的实现方式+思路，附代码）
飞奔的屎壳郎
10-28 5900
老规矩先上效果图 这里的话 xwml页面展示就不贴代码了，意义不大。直接上js js页面 注意事项 主要使用的是 onPullDownRefresh 函数与 onReachBottom函数，一个是下拉一个刷新， requestSimple是我封装的提交函数，下面贴代码了 分页重要 1.onPullDownRefresh 是用户下拉手势，相当于刷新页面，onReachBottom用户上拉手势，相当于...
微信小程序开发 ---- 2 列表 详情
newlifely的博客
08-10 534
一、列表搭建 二、url 跳转 进入想入详情页面 三、详情页面
【微信小程序——案例——本地生活（列表页面）】
weixin_45753504的博客
04-14 1464
黑马程序课程本地生活案例——列表添加实现
微信小程序开发（实战案例）：本地生活 - 列表页面开发(动态渲染处理)、节流防抖（节流阀应用）
Forever_Hopeful的博客
02-21 1285
微信小程序开发（实战案例）：本地生活 - 列表页面开发(动态渲染处理)、节流防抖（节流阀应用）
【微信小程序】基础篇 -- 案例 - 本地生活（列表页面）（三十）
热门推荐
JMFive的博客
03-09 1万+
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第30篇文章;今天开始学习微信小程序的第15天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
【微信小程序】动态添加view
XL_0502的博客
05-27 1383
同时微信小程序没有 DOM 对象，一切基于组件化。所以不能通过添加dom来实现动态添加view。，那么只有data里的typeList会更新，视图并不会更新。：想做一个点击按钮添加分类的功能，涉及到动态的添加view。微信小程序是单向数据流。指令基于一个数组来渲染列表。
微信小程序综合训练--花店商城小程序购物车、我的、鲜花列表、商品查询...笔记（2）
pink_shen的博客
03-29 1528
使用了 Vant 组件库中的组件来创建一个弹出式的操作面板。这个面板包含了商品的基本信息、祝福语输入区域以及确认按钮。在details.wxml中继续编写弹出面板: 用于展示商品信息、选择购买数量、输入祝福语，并最终通过确定按钮完成购买或提交操作。a.自定义面板的显示与关闭-- bind:close为面板关闭事件-->//面板的显示与隐藏通过 show 属性来控制。当 show 为 true 时，面板显示；为 false 时，面板隐藏。
微信小程序使用scroll-view标签 实现列表分页功能
一个超爱喝可乐的web前端攻城狮
04-26 3429
微信小程序使用scroll-view标签 实现列表分页功能 1,wxml //此处定义滚动的主要高度 //方向(向下-y) //触底函数 <scroll-view style="height:780rpx" scroll-y="true" bindscrolltolower="paging"> //列表循环 //定义唯一索引 <view class="list" wx:for="{{list}}" wx:key="index">
微信小程序中的加载更多（即列表分页）
谁还不是一块小饼干的博客
08-10 534
1.app.json中： "window": { 　　"enablePullDownRefresh": true //是否开启当前页面下拉刷新 } 2.wxml中： <view class="info" wx:for="{{contentlist}}" wx:key="key"> <input hidden="{{hidden}}" value="{{item.id}}"/> <text>{{item.title}}</text>
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
08-28
主要介绍了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法,结合具体实例形式总结分析了微信小程序页面跳转及列表item项跳转页面的相关操作技巧,需要的朋友可以参考下
微信小程序文章列表功能完整实例
10-15
主要介绍了微信小程序文章列表功能,结合完整实例形式详细分析了微信小程序文章列表功能具体布局、样式、功能相关实现技巧,需要的朋友可以参考下
黑马程序员微信小程序-本地生活案例实现所用图片
04-10
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，为用户提供便捷的本地生活服务。在这个“黑马程序员微信小程序-本地生活案例实现所用图片”压缩包中，包含的是一系列用于构建本地生活...
微信小程序项目-美食列表
05-13
4. **API调用**：微信小程序提供了丰富的API接口，例如可以调用`wx.request()`获取远程数据，`wx.setStorage()`和`wx.getStorage()`用于本地数据存储，`wx.getImageInfo()`处理图片等。 5. **事件处理**：利用`...
美食菜谱(源码)-微信小程序
05-21
2. **数据绑定与状态管理**：在微信小程序中，数据绑定是通过WXML和JS之间的通讯实现的，使用`wx.setStorageSync`和`wx.getStorageSync`进行本地数据存储，`this.setData`用于更新页面数据。状态管理对于一个包含...
微信小程序 实例汇总 完整项目源代码
11-01
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要针对移动设备，尤其是智能手机。它允许开发者在微信内创建原生体验的应用程序，无需通过应用商店即可供用户使用。这个压缩包文件“wechat”很可能包含了...
仿微信支付生活缴费小程序前端页面源码
最新发布
06-02
本文将详细解析“仿微信支付生活缴费小程序前端页面源码”的相关知识点，主要涉及微信小程序开发、前端框架uni-app和Tailwind CSS的应用。 首先，我们要理解微信小程序是一种轻量级的应用开发平台，由腾讯推出，它...
微信小程序实例之本地生活（一）
qq_57991099的博客
12-01 391
小程序首页设置
wyfeng1：微信小程序简单入门.pdf
09-06
微信小程序由多个页面组成，例如本教程中的“index”和“logs”。这些页面都存储在“pages”目录下。在`app.json`文件中，你需要配置页面路径及其名称，首页通常放在`pages`列表的第一个位置。例如，`"pages/index/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值