微信小程序案例2-2：本地生活

2023-09-20 17:21:57

文章目录

一、运行效果

  • 轮播图区域与九宫格区域
    在这里插入图片描述

二、知识储备

（一）swiper与swiper-item组件

1、swiper组件

（1）功能描述
  • 滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
（2）属性说明
属性类型默认值必填说明最低版本
indicator-dotsbooleanfalse否是否显示面板指示点1.0.0
indicator-colorcolorrgba(0, 0, 0, .3)否指示点颜色1.1.0
indicator-active-colorcolor#000000否当前选中的指示点颜色 1.1.0
autoplaybooleanfalse否是否自动切换1.0.0
currentnumber当前所在滑块的index，默认为01.0.0
intervalnumber5000否自动切换时间间隔1.0.0
circularbooleanfalse否是否采用衔接滑动1.0.0

2、swiper-item组件

（1）功能描述
  • 仅可放置在swiper组件中，宽高自动设置为100%。
（2）属性说明
属性类型默认值必填说明最低版本
item-idstring否该 swiper-item 的标识符1.9.0
skip-hidden-item-layoutbooleanfalse否是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息1.9.0

3、基本语法

  • swiper组件通过<swiper>标签定义，swiper-item组件通过<swiper-item>标签定义。
<swiper>
	<swiper-item>1</swiper-item>
	<swiper-item>2</swiper-item>
 	<swiper-item>3</swiper-item>
</swiper>
  • swiper组件为外层容器，内层有3个swiper-item组件，表示当前滑块视图内容一共有3项。滑块视图内容在初始状态下只显示第1项，向左滑动显示第2项，再向右滑动可以返回第1项。

4、案例演示

  • 页面结构示例代码
<swiper class="swiper-container" current="2" indicator-dots="true" indicator-color="yellow" indicator-active-color="red" autoplay="true" interval="3000" circular="true">
    <swiper-item class="item">1</swiper-item>
    <swiper-item class="item">2</swiper-item>
    <swiper-item class="item">3</swiper-item>
</swiper>
  • 页面样式示例代码
.swiper-container {
    height: 100px;
    background-color: thistle;
}

.item {
    line-height: 100px;
    align-content: center;
    font-size: xx-large;       
}
  • 预览效果
    在这里插入图片描述

（二）text组件

  • 在HTML中，一般通过<span>标签定义行内文本，而在微信小程序中，则可以通过text组件定义行内文本。需要注意的是，text组件内部只能嵌套text组件。

1、常用属性

属性类型说明
user-selectboolean文本是否可选，该属性会使文本节点显示为 inline-block
spacestring显示连续空格，可选参数为ensp（中文字符空格一半大小）、emsp（中文字符空格大小）和nbsp（根据字体设置的空格大小）
decodeboolean是否解码

2、案例演示

  • 使用user-select属性实现长按选中文本的效果
<text user-select="true">欢迎使用微信小程序</text>
  • 手指长按前
    在这里插入图片描述
  • 手指长按后
    在这里插入图片描述
  • 使用鼠标模拟手指长按文本之后的选中效果，此处通过长按选中了“程序”文本。如果在微信客户端运行的小程序中长按文本，会出现“复制”选项，可以实现长按复制文本的效果。

（三）Flex布局

  • 目标：掌握Flex布局的使用方法，能够使用Flex布局的相关属性完成页面布局

1、什么是Flex布局

  • 在微信小程序中可以使用Flex布局实现自适应页面。Flex布局又称为弹性盒（Flexible Box）布局，它为盒子模型提供了很强的灵活性，任何一个容器都可以指定为Flex布局。

2、基本概念

（1）Flex容器
  • 采用Flex布局的元素，称为Flex容器（简称容器）。
（2）Flex项目
  • Flex容器的所有子元素自动成为容器成员，称为Flex项目（简称项目）。
（3）轴
  • Flex容器内有两根轴：主轴（Main Axis）和交叉轴（Cross Axis），默认情况下主轴为水平方向，交叉轴为垂直方向，项目默认沿主轴排列。
  • 若想使用Flex布局，首先要设置父元素的display属性为flex，表示将父元素设置为容器，然后就可以使用容器和项目的相关属性了。

3、容器常用属性

属性说明
flex-direction决定主轴的方向（即项目的排列方向），默认值为row，即主轴为从左到右的水平方向，项目按照主轴方向排列
flex-wrap规定是否允许项目换行，默认值为nowrap，即不换行
flex-flowflex-direction和flex-wrap的组合属性，默认值为row nowrap
justify-content定义了项目在主轴上的对齐方式，默认值为flex-start，即项目在主轴方向上，与主轴起始位置对齐
align-items定义项目在交叉轴上的对齐方式，默认值为normal（等同于stretch），即如果项目没有设置固定的大小，则会被拉伸填充满交叉轴方向剩余的空间
align-content只适用多行的容器，定义项目在交叉轴上的对齐方式，默认值为normal（等同于stretch），即交叉轴方向剩余的空间平均分配到每一行，并且行的高度会拉伸，填满整行的空间

4、项目常用属性

属性说明
order定义项目的排列顺序，按从小到大排列，默认值为0
flex-grow定义项目的放大比例，默认值为0，即如果存在剩余空间，该项目也不放大
flex-shrink定义项目的缩小比例，默认值为1，即如果空间不足，该项目将缩小
flex-basis定义在分配多余空间之前，项目占据的主轴空间，默认值为auto
flexflex-grow、flex-shrink和flex-basis的组合属性，默认值为0 1 auto
align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果父元素没有设置align-items属性，则等同于normal和stretch

5、flex-direction属性

  • flex-direction属性用于设置主轴方向，通过设置主轴方向可以规定项目的排列方向，它有以下4个常用的可选值。
属性说明
row默认值，主轴为从左到右的水平方向
row-reverse主轴为从右到左的水平方向
column主轴为从上到下的垂直方向
column-reverse主轴为从下到上的垂直方向
  • 页面结构示例代码
<view class="demo">
    <view>中国</view>
    <view>四川</view>
    <view>泸州</view>
</view>
  • 页面样式示例代码
.demo {
    display: flex;
    flex-direction: column-reverse;
}
  • 预览效果
    在这里插入图片描述

6、 justify-content属性

  • justify-content属性用于设置项目在主轴方向上的对齐方式，能够分配项目之间及其周围多余的空间，它有以下5个常用的可选值。
属性说明
flex-start默认值，表示项目对齐到主轴起点，项目间不留空隙。
flex-end项目对齐到主轴终点，项目间不留空隙。
center项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离。
space-between两端对齐，两端的项目分别靠向容器的两端，其他项目之间的间隔相等。
space-around每个项目之间的距离相等，第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半。
  • 页面结构示例代码
<view class="demo">
    <view>中国</view>
    <view>四川</view>
    <view>泸州</view>
</view>
  • 页面样式示例代码
.demo {
    background-color: silver;
    display: flex;   
    justify-content: space-between;
}
  • 预览效果
    在这里插入图片描述

7、align-items属性

  • align-items属性用于设置项目在交叉轴上的对齐方式，它有以下6个常用的可选值。
属性说明
normal默认值，等同于stretch。
stretch未设置项目大小时将项目拉伸，填充满交叉轴方向剩余的空间。
flex-start项目顶部与交叉轴起点对齐。
flex-end项目底部与交叉轴终点对齐。
center项目在交叉轴的中间位置对齐。
baseline项目的第一行文字的基线对齐。
  • 页面结构示例代码
<view class="demo">
    <view>中国</view> 
    <view>四川</view>
    <view>泸州</view>
</view>
  • 页面样式示例代码
.demo {
    background-color: silver;
    display: flex;   
    justify-content: space-between;    
    height: 100px;
    align-items: center;
}
  • 预览效果
    在这里插入图片描述

三、实现步骤

（一）创建项目

  • 项目名称：本地生活
  • 模板选择：不使用模板
    在这里插入图片描述
  • 单击【确定】按钮
    在这里插入图片描述

（二）创建页面

  • 在app.json里配置pages/grid/grid页面，删除其它页面
    在这里插入图片描述

（三）准备图片素材

  • 在项目根目录创建images目录，拷贝项目所需图片素材
    在这里插入图片描述

（四）编写页面结构

1、编写轮播区域页面结构

  • 轮播图有指示点，自动轮播，时间间隔3000毫秒
    在这里插入图片描述
<!--pages/grid/grid.wxml-->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<swiper indicator-dots="true" autoplay="true" interval="3000">
    <swiper-item>
        <image src="/images/swiper01.jpg"/>
    </swiper-item>
    <swiper-item>
        <image src="/images/swiper02.jpg"/>
    </swiper-item>
</swiper>
  • 导入导航栏组件
    在这里插入图片描述
  • 预览效果
    在这里插入图片描述

2、编写九宫格区域页面结构

  • view组件里嵌套9个view组件
    在这里插入图片描述
<view class="grids">
    <view class="item">
        <image src="/images/food.png"/>
        <text>美食</text>
    </view>
    <view class="item">
        <image src="/images/fitup.png"/>
        <text>装修</text>
    </view>
    <view class="item">
        <image src="/images/bath.png"/>
        <text>洗浴</text>
    </view>
    <view class="item">
        <image src="/images/car.png"/>
        <text>汽车</text>
    </view>
    <view class="item">
        <image src="/images/sing.png"/>
        <text>唱歌</text>
    </view>
    <view class="item">
        <image src="/images/house.png"/>
        <text>住宿</text>
    </view>
    <view class="item">
        <image src="/images/study.png"/>
        <text>学习</text>
    </view>
    <view class="item">
        <image src="/images/work.png"/>
        <text>工作</text>
    </view>
    <view class="item">
        <image src="/images/marry.png"/>
        <text>结婚</text>
    </view>
</view>

（五）编写页面样式

1、编写轮播图区域页面样式

  • 设置swiper容器高度：350rpx
    在这里插入图片描述
swiper {
    height: 350rpx;
}

swiper image {
    width: 100%;
    height: 100%;
}

2、编写九宫格区域页面样式

  • 整体页面样式
.grids {
    display: flex;
    flex-wrap: wrap; /* 自动绕行 */
}
  • 每个格子页面样式
.grids .item {
    width: 250rpx;
    height: 250rpx;
    border-right: 1rpx solid #eee;
    border-bottom: 1rpx solid #eee;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 清除第3个格子的右边框 */
.grids .item:nth-child(3) {
    border-right: 0;
}
/* 清除第6个格子的右边框 */
.grids .item:nth-child(6) {
    border-right: 0;
}
/* 清除第9个格子的右边框 */
.grids .item:nth-child(9) {
    border-right: 0;
}
  • 每个格子中的图片和文字的页面样式
.grids .item image {
    width: 70rpx;
    height: 70rpx;
}

.grids .item text {
    color: #999;
    font-size: 35rpx;
    margin-top: 20rpx;
}

（六）查看真机调试效果

  • 选择启动PC端自动真机调试
    在这里插入图片描述
  • 单击【编译并自动调试】按钮，查看效果
    在这里插入图片描述
更多推荐

人工智能术语翻译（五）

文章目录摘要QRST摘要人工智能术语翻译第五部分，包括Q、R、S、T开头的词汇！Q英文术语中文翻译常用缩写备注QFunctionQ函数Q-LearningQ学习Q-NetworkQ网络QuadraticLossFunction平方损失函数QuadraticProgramming二次规划QuadraturePair象限对

Anaconda下Jupyter Notebook执行OpenCV中cv2.imshow()报错（错误码为1272）网上解法汇总记录和最终处理方式

零、我设备的相关信息Python3.8.8Anaconda32021.05查询匹配python3.8.*的OpenCV匹配版本为：4.1.*—4.2.*，我最后安装4.2.0.32版本如下我记录了“从发现问题，到不断试错，最后解决问题”的完整过程，以备自己复盘使用，大家不愿费时的可直接查看总结版的处理方式记录一、问题起

【CNN-FPGA开源项目解析】02--floatAdd16模块

文章目录前言浮点数加法的思路floatAdd16完整代码floatMult16代码逐步解析指数化为一致底数相加，处理进位溢出结果标准化和舍位整合为最后的16位浮点数结果[sign,exponent,fraction]其他变量宽度表特殊情况处理always敏感列表前言​上一篇文章(floatMult16模块解析)内，已经

深度剖析Linux信号机制

文章目录信号的概念信号的分类信号的产生方式从键盘获取通过系统调用硬件异常软件条件如何处理信号的到来信号的更深入剖析信号的处理动作是何时进行的？当有一大批同种信号到来时会怎样？Linux也提供了一批信号相关的系统调用信号的概念Linux中的信号是进程异步通信的一种方式。当某个信号发送到一个进程上，那么该进程就会分析该信号

java学习--day5 （java中的方法、break/continue关键字）

文章目录day4作业今天的内容1.方法【重点】1.1为什么要有方法1.2其实已经见过方法1.3定义方法的语法格式1.3.1无参无返回值的方法1.3.2有参无返回值的方法1.3.3无参有返回值的方法1.3.4有参有返回值的方法2.break和continue关键字2.1break;2.2continue;3.案例关于方法

7、DVWA——SQL盲注

文章目录一、概述二、low2.1通关思路（布尔盲注）（1）判断是否存在SQL注入漏洞（2）判断属于数字型注入还是字符型注入（3）判断结果集中的字段数（4）猜数据库名长度（5）猜数据库名（6）猜表的个数（7）猜第一个表名（8）猜user表中的字段个数、每个字段的长度、名称（9）猜字段内容2.2通关思路（时间盲注）（1）判

ASCII码对照表（十进制、八进制、十六进制、二进制的字符对照表）

ASCII(AmericanStandardCodeforInformationInterchange)：美国信息交换标准代码是基于拉丁字母的一套电脑编码系统，主要用于显示现代英语和其他西欧语言。它是最通用的信息交换标准，并等同于国际标准ISO/IEC646。ASCII第一次以规范标准的类型发表是在1967年，最后一次

Java实现添加文字水印、图片水印功能实战

Java实现添加文字水印、图片水印功能实战本文介绍java实现在图片上加文字水印的方法，水印可以是图片或者文字，操作方便。java实现给图片添加水印实现步骤：获取原图片对象信息（本地图片或网络图片）添加水印（设置水印颜色、字体、坐标等）处理输出目标图片1.java实现给图片添加文字水印1.1获取原图片对象信息第一步：获

不过是一棵红黑树（附源码）

前言红黑树,可谓是名号响当当的一种数据结构了。在数据结构学习的初期我们了解到了搜索二叉树，并且知道搜索二叉树的效率是非常之高的，在理想情况下10亿个数据中找一个值它也只需要30次左右，但是它尽管如此厉害可是也有不足的地方，在一些极端情况下，搜索二叉树可能会被退化成一棵单链表，那么此时它的效率就会大打折扣的变成O(n)。

IOTE 2023国际物联网展直击：芯与物发布全新定位芯片，助力多领域智能化发展

IOTE2023国际物联网展，作为全球物联网领域的盛会，于9月20日在中国深圳拉开帷幕。北斗星通集团应邀参展，旗下专业从事物联网、消费类GNSS芯片研发设计的芯与物公司也随其亮相本届盛会。展会上，芯与物展示了一系列创新的GNSS定位芯片产品，引领了国内定位技术的发展潮流。其市场总监黄秋菊女士揭幕了公司最新的产品CC11

vue-cli创建项目、vue项目目录结(运行vue项目)、es6导入导出语法、vue项目编写规范

vue-cli创建项目、编写vue项目、1vue-cli创建项目1.1vue-cli命令行创建项目1.2使用vue-cli-ui创建2vue项目目录结构2.1运行vue项目2.2vue项目的目录结构3es6导入导出语法4vue项目编写规范4.1修改项目4.2以后写vue项目，只需要在固定位置写固定代码即可1vue-cl

热文推荐
  1. 【含面试】解锁MySQL group_concat的无限可能性：解决长度限制并实现高效查询

    AI绘画关于SD,MJ,GPT,SDXL百科全书面试题分享点我直达2023Python面试题2023最新面试合集链接2023大厂面试题PDF面试题PDF版本java、python面试题项目实战:AI文本OCR识别最佳实践AIGamma一键生成PPT工具直达链接玩转cloudStudio在线编码神器玩转GPUAI绘画、A

  2. Python日期处理库：掌握时间的艺术

    💂个人网站:【工具大全】【游戏大全】【神级源码资源网】🤟前端学习课程：👉【28个案例趣学前端】【400个JS面试题】💅寻找学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】日期和时间在计算机编程中起着至关重要的作用，无论您是在开发应用程序、分析数据还是进行自动化任务，都需要处理日期和时间。Python作为一门

  3. vue-h5移动Web的Flex布局

    Flex布局Flexible布局，也就是弹性布局。Flexible的优点是，不需要对元素设置固定的宽度和高度，元素的位置和大小也会跟着父元素或者浏览器的状态来自动适配。同时还添加了水平居中和垂直居中的解决方案。在页面中指定一个元素作为Flex布局，那么这个元素就是作为容器冤元素。设置如下：.box{display:fl

  4. Vuex详解：Vue.js的状态管理方案

    🌷🍁博主猫头虎（🐅🐾）带您GotoNewWorld✨🍁🦄博客首页——🐅🐾猫头虎的博客🎐🐳《面试题大全专栏》🦕文章图文并茂🦖生动形象🐅简单易学！欢迎大家来踩踩~🌺🌊《IDEA开发秘籍专栏》🐾学会IDEA常用操作，工作效率翻倍~💐🌊《100天精通Golang(基础入门篇）》🐅学会Gol

  5. 从数字化到智能化再到智慧化，智慧公厕让城市基础配套更“聪明”

    随着科技的迅猛发展，城市生活方式与配置设施的方方面，面也在不断的改变和升级。智慧公厕作为城市基础配套设施的一部分，从数字化到智能化再到智慧化，正逐渐展现出其独特的魅力和优势。实现了公共厕所建设、使用与管理方式的全面变革，本文将以智慧公厕领航厂家广州中期科技有限公司，大量的精品案例项目的实景实例实图，深入探讨智慧公厕的定

  6. CSS 之 grid 网格布局

    一、简介​display:grid;用于设置元素内部的布局类型为网格布局，其外显类型为块级元素。该类型的元素将内部分为行和列，划分成一个个单元格，并通过一系列相关属性控制单元格及其内容的布局和大小。​该属性值的主要应用场景为：多行多列元素排列布局。采用grid布局的元素，被称为“容器”（container），其内部的直

  7. Maven 使用

    一、初始Maven（了解）1、项目遇到的问题构建：编译代码，运行测试，打包，部署应用，运行服务器等；依赖：项目依赖大量的第三方包，第三方包又依赖另外的包，对依赖包的管理非常麻烦。2、Maven定义和作用Maven翻译为“知识的积累”，“专家”，“行家”，是一个跨平台的项目管理工具；Maven主要用作基于Java平台的项

  8. 用于图像分类的预训练模型（PyTorch实现）

    用于图像分类的预训练模型（PyTorch实现）在本文中，我们将介绍一些使用TorchVision模块中存在的预训练网络的实践示例——用于图像分类的预训练模型。1.基于预训练模型进行图像分类预训练模型是在ImageNet等大型基准数据集上训练的神经网络模型。深度学习社区从这些开源模型中受益匪浅。此外，预训练模型是计算机视

  9. EPC与5GC/5GS互联互通

    一、5GS与EPC/E-UTRAN互通的非漫游架构1．N26接口是MME和5GSAMF之间的CN间接口，以实现EPC和NG核心之间的互通。网络中支持N26接口是可选的，用于互通。N26支持在S10上支持的功能的子集（对于互通是必要的）。2．PGW-C+SMF和UPF+PGW-U专用于5GS和EPC之间的互通，这是可选的