微信小程序之本地生活案例的实现

学习的最大理由是想摆脱平庸，早一天就多一份人生的精彩；迟一天就多一天平庸的困扰。各位小伙伴，如果您：
想系统/深入学习某技术知识点…
一个人摸索学习很难坚持，想组团高效学习…
想写博客但无从下手，急需写作干货注入能量…
热爱写作，愿意让自己成为更好的人…

文章目录

  • 前言
  • 案例 - 本地生活（首页）
    • 1、首页效果以及实现步骤
    • 2、代码展示
  • 二、案例 - 本地生活（列表页面）
    • 1、效果图展示：
    • 2、代码展示
  • 总结

前言

这个案例的相关接口都是最新的，原接口现在都不管用了，有需要的小伙伴可以用这个。

案例 - 本地生活（首页）

1、首页效果以及实现步骤

在这里插入图片描述

  • 新建项目并梳理项目结构
  • 配置导航栏效果
  • 配置 tabBar 效果
  • 实现轮播图效果
  • 实现九宫格效果
  • 实现图片布局

演示效果：
在这里插入图片描述

2、代码展示

home.wxml

<!--轮播图区域-->
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

<!--九宫格区域-->
<view class="grid-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

<!--图片区域-->
<view class="img-box">
  <image src="/images/link-01.png"></image>
  <image src="/images/link-02.png"></image>
</view>

home.js

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //存放轮播图数据的列表
    swiperList:[],
    //存放九宫格数据的列表
    gridList:[]
  },



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getSwiperList()
    this.getGridList()
  },


  //获取轮播图数据的方法
  getSwiperList(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/slides',
      method:'GET',
      success:(res)=>{
        console.log(res),
        this.setData({
          swiperList:res.data
        })
      }
    })
  },

  //获取九宫格数据的方法
  getGridList(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/categories',
      method:'GET',
      success:(res)=>{
        console.log(res)
        this.setData({
          gridList:res.data
        })
      }
    })
  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

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

  }
})

home.wxss

/* pages/home/home.wxss */
swiper{
  height: 350rpx;
}
swiper image{
  width: 100%;
  height: 100%;
}

.grid-list{
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid #efefef;
  border-top: 1px solid #efefef;
}

.grid-item{
  width: 33.33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;/*让盒子固定*/
}

.grid-item image{
  width: 60rpx;
  height: 60rpx;
}

.grid-item text{
  font-size: 24rpx;
  margin-top: 10rpx;
}

.img-box{
  display: flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}

.img-box image{
  width: 45%;
  height: 200rpx;
}

二、案例 - 本地生活（列表页面）

1、效果图展示：

在这里插入图片描述

2、代码展示

wxml页面

<!--pages/shoplist/shoplist.wxml-->
<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
  <view class="thumb">
    <image src="{{item.images[0]}}"></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>

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

wxss页面

/* pages/shoplist/shoplist.wxss */
.shop-item{
  display: flex;
  padding: 15rpx;
  border:1px solid #efefef;
  border-radius: 8rpx;
  margin: 15rpx;
  box-shadow: 1rpx 1rpx 15rpx #ddd;
}
.thumb image{
  width: 250rpx;
  height: 250rpx;
  display: block;
  margin-right: 15rpx;
}
.info{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}
.shop-title{
  font-weight: bold;
}

js页面

// 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(cb){
    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)=>{
        console.log(res),
        this.setData({
          shopList:[...this.data.shopList,...res.data],
          total:res.header['X-Total-Count'] - 0
        })
      },
      complete:()=>{
        //隐藏loading效果
        wx.hideLoading()
        this.setData({isLoading:false})
        //wx.stopPullDownRefresh()
        cb&&cb()
      }
    })
  },

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

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

  },

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

  },

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

  },

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

  },

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

    //判断是否正在加载其他数据
    if(this.data.isLoading) return
    //页码值+1
    this.setData({
      page:this.data.page + 1
    })
    //获取下一页数据
    this.getShopList()
  },

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

  }
})

json页面

{
  "usingComponents": {},
  "onReachBottomDistance": 200,
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle":"dark"
}

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
}

总结

以上就是微信小程序之本地生活案例的实现的相关知识点，希望对你有所帮助。
积跬步以至千里，积怠惰以至深渊。时代在这跟着你一起努力哦！

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

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

相关文章

关于《人工智能法案》你应该知道的真相

关于《人工智能法案》你应该知道的真相

什么是《人工智能法案》 《人工智能法案》是欧盟的一项法规&#xff0c;旨在为人工智能引入一个共同的监管和法律框架&#xff0c;保障人类的安全、健康和基本权利&#xff0c;同时促进人工智能的创新和发展。该法案根据人工智能应用可能造成的风险&#xff0c;对其进行了不同…
阅读更多...
AcWing算法学习笔记：动态规划（背包 + 线性dp + 区间dp + 计数dp + 状态压缩dp + 树形dp + 记忆化搜索）

AcWing算法学习笔记：动态规划（背包 + 线性dp + 区间dp + 计数dp + 状态压缩dp + 树形dp + 记忆化搜索）

动态规划 一、背包问题① 01背包朴素版② 01背包优化版③ 完全背包朴素版④ 完全背包消k版⑤ 完全背包消k优化版⑥ 多重背包朴素版⑦多重背包二进制优化版⑧ 分组背包朴素版⑨ 分组背包优化版 二、线性dp① 数字三角形② 最长上升子序列③ 最长上升子序列打印序列版④ 最长上升…
阅读更多...
Pytest自动化测试详解

Pytest自动化测试详解

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号&#xff1a;互联网杂货铺&#xff0c;回复1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 为什么需要自动化测试&#xff1f; 自动化测试有很多优…
阅读更多...
CSS 闪电按钮效果

CSS 闪电按钮效果

<template><view class="const"><div class="voltage-button"><button>闪电按钮</button><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox=&q…
阅读更多...
02.04

02.04

1.信号 include "myhead.h" //定义信号处理函数 void handler(int signo) {if(signo SIGINT){printf("用户按下了ctrl c键&#xff0c;hello world\n");} }int main(int argc, const char *argv[]) {if(signal(SIGINT, handler) SIG_ERR){perror("…
阅读更多...
vue前端+nodejs后端通信-简单demo

vue前端+nodejs后端通信-简单demo

本文记录vue前端nodejs后端通讯最简单的方法&#xff0c;供广大网友最快速进入全栈开发。 技术架构 前端 vue axios 后端 nodejs express 一、前端部分-搭建VUE 项目 vue create Vnodenpm run serve 启动&#xff1b; 具体操作步骤&#xff0c;请自行百度&#xff0c;这里没…
阅读更多...
【JavaEE spring】SpringBoot 统一功能处理

【JavaEE spring】SpringBoot 统一功能处理

SpringBoot 统一功能处理 1. 拦截器1.1 拦截器快速⼊⻔1.2 拦截器详解1.2.1 拦截路径1.2.2 拦截器执⾏流程 1.3 登录校验1.3.1 定义拦截器1.3.2 注册配置拦截器 2. 统⼀数据返回格式2.1 快速⼊⻔2.2 存在问题2.3 案例代码修改2.4 优点 3. 统⼀异常处理 1. 拦截器 后端程序根据…
阅读更多...
快递员的烦恼 - 华为OD统一考试

快递员的烦恼 - 华为OD统一考试

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 200分 题解&#xff1a; Java / Python / C 题目描述 快递公司每日早晨&#xff0c;给每位快递员推送需要淡到客户手中的快递以及路线信息&#xff0c;快递员自己又查找了一些客户与客户之间的路线距离信息&#xff0…
阅读更多...
怎么把物品信息图片批量生成二维码？每张图片单独生码的制作技巧

怎么把物品信息图片批量生成二维码？每张图片单独生码的制作技巧

现在通过扫码来查看人员或者物品信息的方式越来越常见&#xff0c;在合适的位置放置对应的二维码内容&#xff0c;让其他人通过扫码来获取图片信息。那么如果我们将每个信息做成一张图片后&#xff0c;需要将图片生成二维码时&#xff0c;有能够批量生成二维码的方法可以快速处…
阅读更多...
【Mysql】整理

【Mysql】整理

Mysql整理与总结 整理Mysql的基本内容供回顾。 参考&#xff1a; [1]. 掘金.MySQL三大日志(binlog,redolog,undolog)详解 [2]. Javaguide.MySQL三大日志(binlog、redo log和undo log)详解
阅读更多...
2023-12蓝桥杯STEMA考试 C++ 中高级试卷解析

2023-12蓝桥杯STEMA考试 C++ 中高级试卷解析

蓝桥杯STEMA考试 C++ 中高级试卷（12月） 一、选择题 第一题 定义字符串 string a = "Hello C++"，下列选项可以获取到字符 C 的是（B）。 A、a[7] B、a[6] C、a[5] D、a[4] 第二题 下列选项中数值与其它项不同的是（ C）。 A、 B、 C、 D、 第三题 定义变量 int i =…
阅读更多...
幻兽帕鲁服务器自动重启备份-python

幻兽帕鲁服务器自动重启备份-python

幻兽帕鲁服务器自动重启备份-python 1. 前置知识点2. 目录结构3. 代码内容4. 原理解释5. 额外备注 基于python编写的服务器全自动管理工具&#xff0c;能够实现自动定时备份存档&#xff0c;以及在检测到服务器崩溃之后自动重新启动&#xff0c;并且整合了对于frp端口转发工具的…
阅读更多...
【高质量精品】2024美赛A题22页word版成品论文+数据+多版本前三问代码及代码讲解+前四问思路模型等（后续会更新）

【高质量精品】2024美赛A题22页word版成品论文+数据+多版本前三问代码及代码讲解+前四问思路模型等（后续会更新）

一定要点击文末的卡片&#xff0c;进入后&#xff0c;即可获取完整资料后续参考论文!! 整体分析:这个题目是一个典型的生态系统建模问题&#xff0c;涉及到动物种群的性比例变化、资源可用性、环境因素、生态系统相互作用等多个方面。这个题目的难点在于如何建立一个合理的数学…
阅读更多...
关于Clone

关于Clone

关于Clone 一般情况下&#xff0c;如果使用clone()方法&#xff0c;则需满足以下条件。 1、对任何对象o&#xff0c;都有o.clone() ! o。换言之&#xff0c;克隆对象与原型对象不是同一个对象。 2、对任何对象o&#xff0c;都有o.clone().getClass() o.getClass()。换言之&a…
阅读更多...
实景三维技术未来的着力点应该在哪里？

实景三维技术未来的着力点应该在哪里？

随着社会经济和文化生活的不断发展&#xff0c;公共服务和公共安全就成为政府部门和各行业各部门的一个非常重要的工作&#xff0c;提高政府以及相关部门对紧急事件的快速反应和抗风险能力&#xff0c;建设应急指挥系统为公众提供更便捷的紧急救助服务&#xff0c;已经成为社会…
阅读更多...
【GoLang入门教程】Go语言几种标准库介绍(五)

【GoLang入门教程】Go语言几种标准库介绍(五)

如何解决大模型的「幻觉」问题&#xff1f; 文章目录 如何解决大模型的「幻觉」问题&#xff1f;前言几种库image库 (常见图形格式的访问及生成)关键概念和类型&#xff1a;示例 IO库示例 math库(数学库)常用的函数和常量&#xff1a;示例 总结专栏集锦写在最后 前言 上一篇&a…
阅读更多...
计算机毕业设计 | springboot 高校新生报到系统(附源码)

计算机毕业设计 | springboot 高校新生报到系统(附源码)

1&#xff0c;绪论 1.1 开发背景 学校新生报到仅仅靠原始的手工管理&#xff0c;面对大量的新生信息&#xff0c;无法有效率地将其中的重要部分提取出来&#xff0c;并做出相应的判断和处理。学校的决策只能依据报表数据&#xff0c;在浪费大量人力、物力的同时无法做到实时监…
阅读更多...
图像模板匹配算法(MATLAB)

图像模板匹配算法(MATLAB)

模板匹配是一种用于在图像中定位和识别对象的技术。它的基本思想是: 提取图像中的一个子图像作为“模板”(template)。这个子图像通常包含我们感兴趣的目标对象。 在整个原始图像上,逐点比较模板和原始图像的相似度。相似度通常用归一化的交叉相关(Normalized Cross Correlati…
阅读更多...
Unity | 资源热更（YooAsset AB）

Unity | 资源热更（YooAsset AB）

目录 一、AssetBundle 1. 插件AssetBundle Browser 打AB包 &#xff08;1&#xff09;Unity&#xff08;我用的版本是2020.3.8&#xff09;导入AssetBundle Browser &#xff08;2&#xff09;设置Prefab &#xff08;3&#xff09;AssetBundleBrowser面板 2. 代码打AB包…
阅读更多...
Unity类银河恶魔城学习记录1-9 PlayerWallSilde源代码 P36

Unity类银河恶魔城学习记录1-9 PlayerWallSilde源代码 P36

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Player.cs using System.Collections; using System.Collections.Generic; using Unity.VisualScripting; us…
阅读更多...
最新文章

Copyright @ 2022~2023