1、创建home分支

2、配置网络请求

由于平台的限制，现需要建立uni-app中使用第三方包请求网络数据请求

在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求

1.轮播图的外层容器是swiper
2.每个轮播项是swiper-item

因微信小程序打包后的图片资源大小不能超过2兆，所以我们引用图片时选择引入外部链接的图片

2、接下来做的是分类导航

【uniapp】【外包杯】学习笔记day07 | 微信小程序轮播图、分类导航、楼层图的开发与实现的更多相关文章

  1. 图解微信小程序---轮播图

    图解微信小程序---轮播图 代码笔记 第一步:在页面创建swiper组件 第二步:编写js页面 注意事项:wx:for渲染我们js中的图片数组,item默认写法,获取我们的图片数组中的图片,可通过增加 ...

  2. mpvue学习笔记-之微信小程序数据请求封装

    简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...

  3. 微信小程序------轮播图

    swiper 微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高. 先来看看效果图: 主要用swiper + swiper-item来实现 <view class='swiper' ...

  4. 微信小程序--轮播图，标题，盒子，tab栏的合成例子

    小程序是什么? 微信小程序,是一种不需要下载安装即可使用的应用,用户扫一扫或搜一下即可打开应用,在微信-发现-小程序可打开应用. 一.小程序的样式编写: 目录结构: app.json { " ...

  5. 微信小程序——轮播图实现

    小程序的轮播图,也就是他其中的一个控件可以算是直接上代码: 这是WXML 页面 代码: <view class='carousel_div'> <swiper class=" ...

  6. 02微信小程序-轮播的宽度100%显示和轮播的基础配置

    1==>如何让轮播的宽度100%显示? 你先给swiper 外面添加一个大盒子,给大盒子一个类 . <view class='lunbobox'> 然后wxss 里面设置 image ...

  7. 微信小程序轮播图

    swiper标签 <!--index.wxml--> <swiper class="swiper" indicator-dots="true" ...

  8. 微信小程序轮播图组件 swiper，swiper-item及轮播图片自适应

    官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...

  9. 微信小程序轮播组件

    在index.wxml中添加以下代码 <view> <swiper indicator-dots="{{indicatorDots}}" autoplay=&qu ...

  10. 微信小程序轮播图的制作与跳转

    <!--轮播图 --> <view class='swiperBanner'> <swiper indicator-dots='{{indicatorDots}}' au ...

随机推荐

  1. trick : Trygub num

    trick大意 我对于这个trick的理解为:支持位运算的高精度 维护一个以 \(b\)为基数的大数 \(N\),并支持以下功能: 给定(可能是负)整数 \(|x|, |y| \leqslant n\ ...

  2. 看，这些 plugins 常用又简单

    前面文章中 体验了webpack的打包 .解析css资源 .处理图片字体等文件 接下来看看 plugins 有什么作用吧~ 项目路径如下,和上一篇 处理图片字体等文件 项目保持一致 demo ├─ s ...

  3. Linux系统远程拷贝命令：scp

    做个记录,首先两台机器间要互通. 1. 将本地服务器的文件夹/文件拷贝到远程服务器上 语法: scp -r -P port local_folder/remote_file remote_userna ...

  4. 调研capacitor兼容openharmony平台可行性

    团队可能需要对开源的 capacitor 跨平台框架进行扩展,以生产支持 OpenHarmony 平台的应用,在此调研可行性.实现路径和预期工作量. 可行性分析 在验证 capacitor 是否可以将 ...

  5. Linux-源码安装软件

    一.源码安装步骤 源码的安装一般由3个步骤组成:配置(configure).编译(make).安装(make install). 1．配置(configure) Configure是一个可执行脚本,它 ...

  6. 为不断增长的Go生态系统扩展gopls

    原文在这里. 由 Robert Findley and Alan Donovan 发布于 2023年9月8日 今年夏天初,Go团队发布了gopls的v0.12版本,这是Go语言的语言服务器,它进行了核 ...

  7. 「sdoi2019 - D2T2」移动金币

    对 @command_block 没有 implementation 做法的细化.理论来说可以通过,但因为我实现得较劣无法通过.:( 把金币中的空隙看作石子,就是一个阶梯 Nim 的模型(有总共 \( ...

  8. Redis持久化 (RDB和AOF) 梳理

    Redis有两种持久化方案: RDB持久化 AOF持久化 RDB持久化 RDB全称Redis Database Backup file(Redis数据备份文件),也被叫做Redis数据快照.简单来说就 ...

  9. Springboot支持XML格式报文的传输

    导入依赖-jackson-dataformat-xml <!--整合web模块--> <dependency> <groupId>org.springframewo ...

  10. 临时表、视图与系统函数_Lab2

    MySQL数据库操作 Lab1.md body { font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSys ...