小程序 - 美食列表

news2024/12/23 17:14:32

小程序交互练习 - 美食列表小程序开发笔记

目录

美食列表

功能描述

准备工作

创建项目

配置页面

配置导航栏

启动本地服务器

页面初始数据

设置获取美食数据

设置onload函数

设置项目配置

页面渲染

页面样式

处理电话格式

创建处理电话格式脚本

页面引入脚本

页面使用脚本

实现上拉触底

实现下拉刷新

完成版脚本

功能截图

总结

美食列表

“美食列表”微信小程序是一个展示美食名称、美食图片及美食商家的电话、地址和营业时间等信息的微信小程序。下面将对“美食列表”微信小程序进行详细讲解。

功能描述

美食列表包含多条美食信息，每条美食信息左侧为美食图片，右侧为美食详细信息，包括美食名称、电话、地址和营业时间。该页面具有上拉触底加载数据和下拉刷新两个功能，即当用户上拉美食列表页时，如果页面即将到达底部，会自动加载更多数据；当用户下拉页面时，如果到达顶部后进行下拉操作，可以刷新页面。

准备工作

创建项目

使用测试号，不使用模版。如下图：

 

配置页面

项目创建完成后，在app.json文件中配置一个shoplist页面，

具体代码如下：

{
  "pages": [
    "pages/shoplist/shoplist"
  ]

......
}

项目结构截图：

配置导航栏

在pages/shoplist/shoplist.json文件中配置页面导航栏，

具体代码如下：

{
    "usingComponents": {},
    "navigationBarTitleText": "美食"
}

上述代码将导航栏标题设置为“美食”。

启动本地服务器

本地服务器为nginx，主要为返回相应数据。

需要准备十张美食图片放置在同级目录下的images文件夹中。

返回数据及格式如下：

<?php
$page = isset($_GET['page']) && !empty($_GET['page']) ? intval($_GET['page']) : 1;
$pageSize = isset($_GET['pageSize']) && !empty($_GET['pageSize']) ? intval($_GET['pageSize']) : 5;
$res = [
    [
        'id' => 1,
        'name' => '簋街小龙虾',
        'phone' => '131111111111',
        'image' => 'http://localhost/shoplist/images/1.jpg',
        'address' => '北京市昌平区',
        'businessHours' => '周一至周日9:00-21:00'
    ],
    [
        'id' => 2,
        'name' => '胡大饭馆',
        'phone' => '13122222222',
        'image' => 'http://localhost/shoplist/images/2.webp',
        'address' => '北京市昌平区',
        'businessHours' => '周一至周日9:00-21:00'
    ],
    [
        'id' => 3,
        'name' => '地摊美食',
        'phone' => '13133333333',
        'image' => 'http://localhost/shoplist/images/3.webp',
        'address' => '北京市昌平区',
        'businessHours' => '周一至周日9:00-21:00'
    ],
    [
        'id' => 4,
        'name' => '秋梨饭馆',
        'phone' => '13144444444',
        'image' => 'http://localhost/shoplist/images/4.jpg',
        'address' => '北京市昌平区',
        'businessHours' => '周一至周日9:00-21:00'
    ],
    [
        'id' => 5,
        'name' => '米村拌饭',
        'phone' => '13155555555',
        'image' => 'http://localhost/shoplist/images/5.webp',
        'address' => '北京市昌平区',
        'businessHours' => '周一至周日9:00-21:00'
    ],
    [
        'id' => 6,
        'name' => '红烧肉',
        'phone' => '13166666666',
        'image' => 'http://localhost/shoplist/images/6.webp',
        'address' => '北京市昌平区',
        'businessHours' => '周一至周日9:00-21:00'
    ],
    [
        'id' => 7,
        'name' => '豆汁',
        'phone' => '13177777777',
        'image' => 'http://localhost/shoplist/images/7.webp',
        'address' => '北京市昌平区',
        'businessHours' => '周一至周日9:00-21:00'
    ],
    [
        'id' => 8,
        'name' => '三更美龄粥',
        'phone' => '13188888888',
        'image' => 'http://localhost/shoplist/images/8.webp',
        'address' => '北京市昌平区',
        'businessHours' => '周一至周日9:00-21:00'
    ],
    [
        'id' => 9,
        'name' => '簋街大龙虾',
        'phone' => '13199999999',
        'image' => 'http://localhost/shoplist/images/9.webp',
        'address' => '北京市昌平区',
        'businessHours' => '周一至周日9:00-21:00'
    ],
    [
        'id' => 10,
        'name' => '江南小馆',
        'phone' => '13100000000',
        'image' => 'http://localhost/shoplist/images/10.webp',
        'address' => '北京市昌平区',
        'businessHours' => '周一至周日9:00-21:00'
    ],
];
echo json_encode($res);

页面初始数据

在pages/shoplist/shoplist.js文件，设置页面初始化变量名称和变量值，具体代码如下：

data: {
        data: {
            shopList: [], // 保存美食列表信息
            page: 1, // 默认请求第1页的数据
            pageSize: 10, // 默认每页请求5条数据
            total: 0, // 数据总数，默认为0
        },
        page: 1,
        pageSize: 10,
        scrollTop: 0,
        scrollHeight: 0
    },

 

设置获取美食数据

在pages/shoplist/shoplist.js文件，设置获取美食数据的函数，

在其中请求后端服务器数据并赋值系统变量。

具体代码如下：

getShopList: function () {
        // 请求数据之前，展示加载效果，接口调用结束后，停止加载效果
        wx.showLoading({
            title: '数据加载中...'
        })
        wx.request({
            url: 'http://127.0.0.1/shoplist/index.php',
            method: 'GET',
            data: {
                page: this.page,
                pageSize: this.pageSize
            },
            success: res => {
                console.log(res.data)
                this.setData({
                    shopList: res.data,
                })
                this.total = res.header['X-Total-Count'] - 0
            },
            complete: () => {
                // 隐藏加载效果
                wx.hideLoading()
            }
        })
    },

设置onload函数

编写onLoad()生命周期函数，实现页面加载完成时调用getShopList()函数，

具体代码如下：

onLoad(options) {
        this.getShopList()
    },

 

设置项目配置

在微信开发者工具的本地设置中勾选“不校验合法域名、web-view（业务域名）​、TLS版本以及HTTPS证书”复选框。保存代码并运行程序，控制台中输出的美食列表信息。

页面渲染

前面的步骤已经实现了当页面加载完成时获取美食列表数据，并将数据保存到了shopList数组中。接下来可以通过列表渲染将shopList数组中的数据渲染到页面上。在pages/shoplist/shoplist.wxml文件中进行页面渲染，具体代码如下：

<!--pages/shoplist/shoplist.wxml-->
<wxs src="../../utils/tools.wxs" module="tools"></wxs>
<navigation-bar title="美食" back="{{false}}"></navigation-bar>
<view class="shop-item" wx:for="{{ shopList }}" wx:key="id">
    <view class="thumb">
        <image src="{{ item.image }}" />
    </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>

页面样式

在pages/shoplist/shoplist.wxss文件中进行页面样式美化，具体代码如下：

/* pages/shoplist/shoplist.wxss */
.container {
    margin:0;
    padding:0;
}

.shop-item {
    margin-left:5vw;
    margin-bottom:2vh;
    display: flex;
}

.thumb {
    display:flex;
    flex-direction:row;
}

.thumb image{
    width:30vw;
    height: 15vh;
    border-radius: 2%;
    border: 6rpx solid #777F92;
}

.info {
    display: flex;
    flex-direction:column;
    margin-left:2vw;
}

.info .shop-title {
    font-size: 40rpx;
    font-weight: bold;
}

.info text{
    display: flex;
    flex-wrap:wrap;
    margin: 10rpx 10rpx 10rpx 10rpx;
}

处理电话格式

美食列表”微信小程序中的每一项为一家美食商家的信息，其中包含美食商家的电话。该电话是从服务器端返回的，不适合直接显示在页面上，需要对电话进行处理之后显示在页面上。例如，将“12345678901”转换成“123-4567-8901”​，以便于阅读。下面将通过WXS来实现电话格式的处理，具体实现步骤如下：

创建处理电话格式脚本

在项目根目录下创建utils文件夹，将处理电话函数封装到utils/tools.wxs文件中，

具体代码如下：

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

页面引入脚本

在pages/shoplist/shoplist.wxml文件中引入WXS脚本，具体代码如下：

<wxs src="../../utils/tools.wxs" module="tools"></wxs>

页面使用脚本

在pages/shoplist/shoplist.wxml文件中修改电话的代码，将电话经过处理之后再输出，

具体代码如下：

<text>电话：{{ tools.splitPhone(item.phone) }}</text>

 

实现上拉触底

上拉触底就是用户在进行上拉操作时，当页面即将到达底部时加载下一页数据，

具体实现步骤如下。

①在pages/shoplist/shoplist.json文件中配置上拉触底的距离为200px，

具体代码如下：

{
    ...原有代码
    "onReachBottomDistance": 200
}

②在页面上拉触底事件处理函数onReachBottom()中，让页码自增，

并调用getShopList()方法请求下一页的数据，

具体代码如下：

onReachBottom() {
        console.log('上拉了')
        // 页码自增
        ++this.data.page
        // 请求下一页数据
        this.getShopList()
    },

实现下拉刷新

当用户进行下拉操作时，如果到达了顶部，再进行下拉，可以刷新页面。接下来在页面中实现下拉刷新的效果，具体步骤如下。

①在pages/shoplist/shoplist.json文件中开启下拉刷新并配置相关样式，

具体代码如下：

{
    ...原有代码
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "backgroundTextStyle": "dark"
}

②通过onPullDownRefresh()函数监听用户下拉动作，

实现用户进行下拉操作时重置数据，并重新发起网络请求，具体代码如下：

onPullDownRefresh() {
        // 需要重置的数据
        this.setData({
            shopList: []
        })
        this.page = 1
        this.total = 0
        // 重新发起数据请求
        this.getShopList()
    },

完成版脚本

最终完成版的pages/shoplist/shoplist.js文件内容。

具体代码如下：

// pages/shoplist/shoplist.js
Page({
    isLoading: false, // 当前是否正在加载数据
    /**
     * 页面的初始数据
     */
    data: {
        data: {
            shopList: [], // 保存美食列表信息
            page: 1, // 默认请求第1页的数据
            pageSize: 10, // 默认每页请求5条数据
            total: 0, // 数据总数，默认为0
        },
        page: 1,
        pageSize: 10,
        scrollTop: 0,
        scrollHeight: 0
    },
    getShopList: function (cb) {
        // 请求数据之前，展示加载效果，接口调用结束后，停止加载效果
        this.isLoading = true
        wx.showLoading({
            title: '数据加载中...'
        })
        wx.request({
            url: 'http://127.0.0.1/shoplist/index.php',
            method: 'GET',
            data: {
                page: this.data.page,
                pageSize: this.data.pageSize
            },
            success: res => {
                //console.log(res.data)
                this.setData({
                    shopList: res.data,
                })
                this.total = res.header['X-Total-Count'] - 0
            },
            complete: () => {
                // 隐藏加载效果
                wx.hideLoading()
                // 阻止重复加载数据
                this.isLoading = false
                cb && cb()
            }
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getShopList()
        // 页面初始化 options为页面跳转所带来的参数
        var that = this;
        wx.getSystemInfo({
            success: function (res) {
                that.setData({
                    windowHeight: res.windowHeight,
                    windowWidth: res.windowWidth
                })
            }
        });
    }, 
    // 定位数据
    scroll: function (event) {
        var that = this;
        that.setData({
            scrollTop: event.detail.scrollTop
        });
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

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

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        console.log('上拉了')
        if (this.data.page * this.data.pageSize >= this.data.total) {
            // 没有下一页的数据了
            return wx.showToast({
                title: '数据加载完毕！',
                icon: 'none'
            })
        }
        if (this.isLoading) {
            return
        }
        // 页码自增
        ++this.data.page
        // 请求下一页数据
        this.getShopList()
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

功能截图

总结

微信小程序-美食列表开发笔记，实现美食列表通过后台获取数据动态展示列表，

并可通过上拉和下拉进行更新列表操作。

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

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

相关文章

Facebook广告文案流量秘诀

Facebook广告文案流量秘诀

Facebook 广告文案是制作有效 Facebook 广告的关键方面。它侧重于伴随广告视觉元素的文本内容。今天我们的博客将深入探讨成功的 Facebook 广告文案的秘密&#xff01; 一、广告文案怎么写&#xff1f; 正文&#xff1a;这是帖子的正文&#xff0c;出现在您姓名的正下方。它可…
阅读更多...
TEXT2SQL工具vanna本地化安装和应用

TEXT2SQL工具vanna本地化安装和应用

TEXT2SQL工具vanna本地化安装和应用 Vanna和Text2SQL环境安装和数据准备 conda虚拟环境安装数据准备ollama环境准备 ollama安装和运行ollama下载模型测试下API方式正常使用 chromaDB的默认的embedding模型准备 vanna脚本跑起来 Vanna和Text2SQL TEXT2SQL即文本转SQL&#xf…
阅读更多...
标书里的“废标雷区”：你踩过几个？

标书里的“废标雷区”：你踩过几个？

在投标领域&#xff0c;标书的质量不仅决定了中标的可能性&#xff0c;更是体现企业专业度的关键。但即便是经验丰富的投标人&#xff0c;也难免会在标书编制过程中踩中“废标雷区”。这些雷区可能隐藏在技术方案的细节中&#xff0c;也可能是投标文件格式的规范问题。以下&…
阅读更多...
操作系统——I/O系统

操作系统——I/O系统

笔记内容及图片整理自XJTUSE “操作系统” 课程ppt&#xff0c;仅供学习交流使用&#xff0c;谢谢。 概述 计算机的两个主要工作是I/O和处理。I/O系统的目标是提高设备利用率&#xff0c;尽量提高CPU与I/O设备间的并行工作程度&#xff0c;I/O主要技术包括中断技术、DMA技术、…
阅读更多...
【 工具变量】IPCC碳排放因子数据测算表

【 工具变量】IPCC碳排放因子数据测算表

一、数据简介&#xff1a; 排放因子法是IPCC提出的一种碳排放估算方法&#xff0c;也是目前适用范围最广、应用最为普遍的方法。将各类能源消耗的实物统计量转变为标准统计量&#xff0c;再乘以各自的碳排放因子&#xff0c;加总之后就可以得到碳排放总量。如果按照ISO14064标…
阅读更多...
无插件直播流媒体音视频播放器EasyPlayer.js播放器的g711系列的音频，听起来为什么都是杂音

无插件直播流媒体音视频播放器EasyPlayer.js播放器的g711系列的音频，听起来为什么都是杂音

在数字化时代&#xff0c;流媒体播放器已成为信息传播和娱乐消遣的重要工具。随着技术的进步&#xff0c;流媒体播放器的核心技术和发展趋势不断演变&#xff0c;以满足用户对于无缝播放、低延迟和高画质的需求。 EasyPlayer播放器属于一款高效、精炼、稳定且免费的流媒体播放…
阅读更多...
63 基于单片机的四个速度比较

63 基于单片机的四个速度比较

所有仿真详情导航&#xff1a; PROTEUS专栏说明-CSDN博客 目录 一、主要功能 二、硬件资源 三、主程序编程 四、资源下载 一、主要功能 基于51单片机&#xff0c;采用四个滑动变阻器连接数模转换器模拟四个速度值&#xff0c;通过LCD1602显示&#xff0c;然后检测出最高的…
阅读更多...
4.模块化技术之子程序

4.模块化技术之子程序

总学习目录请点击下面连接 SAP ABAP开发从0到入职&#xff0c;冷冬备战-CSDN博客 目录 ​编辑 1.模块化基础和概述 使用模块化有什么好处 两大类模块化技术 程序局部的模块化 SAP系统内全局模块化 封装有什么好处&#xff1f; 2.子程序模块化 三种传递类型 子程序结构…
阅读更多...
利用Python实现子域名简单收集

利用Python实现子域名简单收集

免责申明 本文仅是用于学习研究子域名信息收集&#xff0c;请勿用在非法途径上&#xff0c;若将其用于非法目的&#xff0c;所造成的一切后果由您自行承担&#xff0c;产生的一切风险和后果与笔者无关&#xff1b;本文开始前请认真详细学习《‌中华人民共和国网络安全法》【学法…
阅读更多...
k8s，进一步理解Pod

k8s，进一步理解Pod

比如&#xff0c;凡是调度、网络、存储&#xff0c;以及安全相关的属性&#xff0c;基本上是Pod 级别的。 这些属性的共同特征是&#xff0c;它们描述的是“机器”这个整体&#xff0c;而不是里面运行的“程序”。比如&#xff0c;配置这个“机器”的网卡&#xff08;即&#…
阅读更多...
Unity 使用LineRenderer制作模拟2d绳子

Unity 使用LineRenderer制作模拟2d绳子

效果展示&#xff1a; 实现如下&#xff1a; 首先&#xff0c;直接上代码&#xff1a; using System.Collections; using System.Collections.Generic; using UnityEngine;public class LineFourRender : MonoBehaviour {public Transform StartNode;public Transform MidNod…
阅读更多...
博物馆导览系统方案（一）背景需求分析与核心技术实现

博物馆导览系统方案（一）背景需求分析与核心技术实现

维小帮提供多个场所的室内外导航导览方案&#xff0c;如需获取博物馆导览系统解决方案可前往文章最下方获取&#xff0c;如有项目合作及技术交流欢迎私信我们哦~撒花&#xff01; 一、博物馆导览系统的背景与市场需求 在数字化转型的浪潮中&#xff0c;博物馆作为文化传承和知…
阅读更多...
14.在 Vue 3 中使用 OpenLayers 自定义地图版权信息

14.在 Vue 3 中使用 OpenLayers 自定义地图版权信息

在 WebGIS 开发中&#xff0c;默认的地图服务通常会带有版权信息&#xff0c;但有时候我们需要根据项目需求自定义版权信息或添加额外的版权声明。在本文中&#xff0c;我们将基于 Vue 3 的 Composition API 和 OpenLayers&#xff0c;完成自定义地图版权信息的实现。 最终效果…
阅读更多...
详解下c语言中的typedef

详解下c语言中的typedef

相信学习过c语言的很多同学都对typedef很陌生&#xff0c;感觉它离自己很遥远&#xff0c;自己很少用到。但实际上&#xff0c;我们看很多地方&#xff0c;包括很多大神级别的代码中&#xff0c;它却又经常使用。今天我们就详细描述下它&#xff0c;使我们对它有一个更深的认识…
阅读更多...
19. Three.js案例-创建一个带有纹理映射的旋转平面

19. Three.js案例-创建一个带有纹理映射的旋转平面

19. Three.js案例-创建一个带有纹理映射的旋转平面 实现效果 知识点 WebGLRenderer (WebGL渲染器) WebGLRenderer 是 Three.js 中用于渲染场景的主要类。它利用 WebGL 技术在浏览器中绘制 3D 图形。 构造器 new THREE.WebGLRenderer(parameters)参数类型描述parametersobj…
阅读更多...
Ensemble Learning via Knowledge Transfer for CTR Prediction 论文阅读

Ensemble Learning via Knowledge Transfer for CTR Prediction 论文阅读

Abstract:点击率&#xff08;CTR&#xff09;预测在推荐系统和网络搜索中起着关键作用。虽然许多现有的方法利用集成学习来提高模型性能&#xff0c;但它们通常将集成限制在两个或三个子网络中&#xff0c;很少探索更大的集成。在本文中&#xff0c;我们研究了更大的集成网络&a…
阅读更多...
苍穹外卖项目练习总结

苍穹外卖项目练习总结

做这个练习项目已经接近两年之久&#xff0c;现在拿出来复习一遍&#xff0c;主要就是里面处理问题的流程&#xff0c;以及整体思考的逻辑需要重新回顾一遍&#xff0c;后续会逐渐总结这一段时间以来学习到的知识。 项目整体包含两部分&#xff0c;一个是管理端&#xff0c;一…
阅读更多...
数学拯救世界（三）———破魔

数学拯救世界（三）———破魔

题目一&#xff1a; 还记不记得&#xff0c;出现带分数的话可以怎么办&#xff1f; 题目二&#xff1a; 还记不记得&#xff0c;昨天讲的重叠数 题目三&#xff1a; 提公因数&#xff0c;抓住问题本质 题目四&#xff1a;
阅读更多...
JAVA ｜日常开发中连接Sqlite数据库详解

JAVA ｜日常开发中连接Sqlite数据库详解

JAVA &#xff5c;日常开发中连接Sqlite数据库详解 前言一、SQLite 数据库概述1.1 定义与特点1.2 适用场景 二、Java 连接 SQLite 数据库的准备工作2.1 添加 SQLite JDBC 驱动依赖2.2 了解 JDBC 基础概念 三、建立数据库连接3.1 代码示例3.2 步骤解析 四、执行 SQL 语句4.1 创建…
阅读更多...
对 JavaScript 说“不”

对 JavaScript 说“不”

JavaScript编程语言历史悠久&#xff0c;但它是在 1995 年大约一周内创建的。 它最初被称为 LiveScript&#xff0c;但后来更名为 JavaScript&#xff0c;以赶上 Java 的潮流&#xff0c;尽管它与 Java 毫无关系。 它很快就变得非常流行&#xff0c;推动了 Web 应用程序革命&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023