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

news2024/11/28 22:35:17

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

文章目录

  • 前言
  • 案例 - 本地生活（首页）
    • 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
}

总结

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

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

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

相关文章

图论练习3

图论练习3

内容&#xff1a;过程中视条件改变边权&#xff0c;利用树状数组区间加处理 卯酉东海道 题目链接 题目大意 个点&#xff0c;条有向边&#xff0c;每条边有颜色和费用总共有种颜色若当前颜色与要走的边颜色相同&#xff0c;则花费为若当前颜色与要走的边颜色不同&#xff0c;…
阅读更多...
Android学习之路(27) ProGuard，混淆，R8优化

Android学习之路(27) ProGuard，混淆，R8优化

前言 使用java编写的源代码编译后生成了对于的class文件&#xff0c;但是class文件是一个非常标准的文件&#xff0c;市面上很多软件都可以对class文件进行反编译&#xff0c;为了我们app的安全性&#xff0c;就需要使用到Android代码混淆这一功能。 针对 Java 的混淆&#x…
阅读更多...
【快速上手QT】01-QWidgetQMainWindow QT中的窗口

【快速上手QT】01-QWidgetQMainWindow QT中的窗口

总所周知&#xff0c;QT是一个跨平台的C图形用户界面应用程序开发框架。它既可以开发GUI程序&#xff0c;也可用于开发非GUI程序&#xff0c;当然我们用到QT就是要做GUI的&#xff0c;所以我们快速上手QT的第一篇博文就讲QT的界面窗口。 我用的IDE是VS2019&#xff0c;使用QTc…
阅读更多...
Leetcode高频题：213打家劫舍II

Leetcode高频题：213打家劫舍II

题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都 围成一圈 &#xff0c;这意味着第一个房屋和最后一个…
阅读更多...
MySQL知识点总结（三）——事务

MySQL知识点总结（三）——事务

MySQL知识点总结&#xff08;三&#xff09;——事务 事务事务的四大特性ACID原子性一致性隔离性持久性 脏读、幻读、不可重复读脏读不可重复读幻读 隔离级别读未提交读已提交可重复读串行化 事务的原理InnoDB如何实现事务的ACID事务的两阶段提交redo log与binlog的区别事务两阶…
阅读更多...
基于SpringBoot+Vue的在线教育平台设计与实现

基于SpringBoot+Vue的在线教育平台设计与实现

目录 项目介绍 技术栈 项目介绍 项目截图 搭建 代码截取 代码获取 项目介绍 近年由于疫情影响&#xff0c;线下教育行业受到较大冲击&#xff0c;因此线上教育培训有较好的发展势头&#xff0c;其中建筑行业考证培训是一个前景良好的发展方向&#xff0c;该行业不仅需要…
阅读更多...
权威认可｜亚数强势入围FreeBuf《CCSIP 2023中国网络安全产业全景图》10大细分领域

权威认可｜亚数强势入围FreeBuf《CCSIP 2023中国网络安全产业全景图》10大细分领域

近日&#xff0c;国内安全行业门户FreeBuf旗下FreeBuf咨询正式发布《CCSIP&#xff08;China Cyber Security Industry Panorama&#xff09;2023中国网络安全行业全景册&#xff08;第六版&#xff09;》。 凭借卓越的技术产品能力、市场影响力及领先的综合实力&#xff0c;亚…
阅读更多...
C++泛编程（3）

C++泛编程（3）

类模板基础 1.类模板的基本概念2.类模板的分文件编写3.类模板的嵌套 &#xff08;未完待续...&#xff09; 在往节内容中&#xff0c;我们详细介绍了函数模板&#xff0c;这节开始我们就来聊一聊类模板。C中&#xff0c;类的细节远比函数多&#xff0c;所以这个专题也会更复杂。…
阅读更多...
【Crypto | CTF】BUUCTF 萌萌哒的八戒

【Crypto | CTF】BUUCTF 萌萌哒的八戒

天命&#xff1a;这年头连猪都有密码&#xff0c;真是奇葩&#xff0c;怪不得我一点头绪都没有 拿到软件&#xff0c;发现是.zip的压缩包&#xff0c;打不开&#xff0c;改成7z后缀名&#xff0c;打开了 发现是一张图片 也只有下面这行东西是感觉是密码了&#xff0c;又不可能…
阅读更多...
[leetcode] 22. 括号生成

[leetcode] 22. 括号生成

文章目录 题目描述解题方法方法一&#xff1a;dfs遍历java代码 方法二&#xff1a;按照卡特兰数的思路递归求出有效括号组合java代码 相似题目 题目描述 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示…
阅读更多...
计算机编码：原码、反码、补码的思想、原理和实例（详细版）

计算机编码：原码、反码、补码的思想、原理和实例（详细版）

​ 目录 收起 一、原码、反码、补码的意义 意义&#xff1a; 三、原码 原码的特点&#xff1a; 原码存在的问题&#xff1a; 四、反码 反码的特点&#xff1a; 存在的问题&#xff1a; 五、补码 六、补码的思想&#xff08;模&&同余数&#xff09; 模 && 同余数…
阅读更多...
exF2FS: Transaction Support in Log-Structured Filesystem——泛读笔记

exF2FS: Transaction Support in Log-Structured Filesystem——泛读笔记

FAST 2022 Paper 分布式元数据论文汇总 问题 现代应用程序努力以崩溃一致的方式保护其数据&#xff0c;这通常分布在多个文件抽象之上。在底层文件系统缺乏事务支持的情况下&#xff0c;应用程序使用复杂的协议来确保跨多个文件的事务性更新&#xff0c;产生长序列的写操作和…
阅读更多...
小林Coding_操作系统_读书笔记

小林Coding_操作系统_读书笔记

一、硬件结构 1. CPU是如何执行的 冯诺依曼模型&#xff1a;中央处理器&#xff08;CPU&#xff09;、内存、输入设备、输出设备、总线 CPU中&#xff1a;寄存器&#xff08;程序计数器、通用暂存器、指令暂存器&#xff09;&#xff0c;控制单元&#xff08;控制CPU工作&am…
阅读更多...
自研人工智能小工具-小蜜蜂（国外ChatGpt的平替）

自研人工智能小工具-小蜜蜂（国外ChatGpt的平替）

国内有非常多好用的人工智能工具&#xff0c;但均无法完全替代国外ChatGpt。 ChatGPT相较于其他国内工具的优势在于以下几点&#xff1a; 创新的语言生成能力&#xff1a;ChatGPT是由OpenAI开发的先进的自然语言生成模型&#xff0c;它采用了大规模的预训练和精细调整方法。因此…
阅读更多...
蓝桥杯刷题day06——平均

蓝桥杯刷题day06——平均

1、题目描述 有一个长度为n 的数组&#xff08;n 是 10 的倍数&#xff09;&#xff0c;每个数ai都是区间 [0,9] 中的整数。 小明发现数组里每种数出现的次数不太平均&#xff0c;而更改第i 个数的代价为bi&#xff0c; 他想更改若干个数的值使得这10 种数出现的次数相等&…
阅读更多...
创建TextMeshPro字体文件

创建TextMeshPro字体文件

相比于Unity的Text组件&#xff0c;TextMesh Pro提供了更强大的文本格式和布局控制&#xff0c;更高级的文本渲染技术&#xff0c;更灵活的文本样式和纹理支持&#xff0c;更好的性能以及更易于使用的优点。但unity自带TextMeshPro字体不支持中文。这里使用普通字体文件生成Tex…
阅读更多...
前端登陆加密解决方案

前端登陆加密解决方案

项目背景 环食药烟草的数据下载模块中&#xff0c;需要判断用户在进行数据下载时是进行了登录操作&#xff0c;如果没有登录要跳转登陆页面&#xff0c;输入账号和密码进行登录。 使用场景 项目中需要前端书写登录页面&#xff0c;用户输入账号密码&#xff0c;前端获取到用…
阅读更多...
Allegro中设置让Route Keepout（禁止布线区）允许布线或打过孔的方法

Allegro中设置让Route Keepout（禁止布线区）允许布线或打过孔的方法

Allegro中设置让Route Keepout&#xff08;禁止布线区&#xff09;允许布线或打过孔的方法 Chapter1 Allegro中设置让Route Keepout&#xff08;禁止布线区&#xff09;允许布线或打过孔的方法一、前言二、设置方法 Chapter2 Cadence Allegro PCB设计88问解析(二十三) 之 Alleg…
阅读更多...
QT中QComboBox添加点击事件，实现下拉框自动刷新

QT中QComboBox添加点击事件，实现下拉框自动刷新

因为项目需要&#xff0c;在QT中的ui界面添加QComboBox控件&#xff0c;需求是实现控件的点击事件&#xff0c;查了资料&#xff0c;发现这个控件类的本身是没有点击信号可以使用的。 但是QT是基于C的面向对象&#xff0c;有了这个特点&#xff0c;我们就可以继承原来的类&…
阅读更多...
认识Tomcat （一）

认识Tomcat （一）

认识Tomcat &#xff08;一&#xff09; 一、服务器 1.1 服务器简介 ​ 硬件服务器的构成与一般的PC比较相似&#xff0c;但是服务器在稳定性、安全性、性能等方面都要求更高&#xff0c;因为CPU、芯片组、内存、磁盘系统、网络等硬件和普通PC有所不同。 ​ 软件服务器&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023