微信小程序页面制作——本地生活(含代码)

news2024/12/23 19:07:12

在这里插入图片描述

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。
🍎个人主页:Java Fans的博客
🍊个人信条:不迁怒,不贰过。小知识,大智慧。
💞当前专栏:微信小程序开发实战
✨特色专栏:国学周更-心性养成之路
🥭本文内容:微信小程序页面制作——知识储备

在这里插入图片描述

文章目录

  • 一、案例分析
  • 二、知识储备
    • 1. swiper和swiper-item组件
    • 2. text组件
    • 3. Flex布局
  • 三、案例实现
    • 1. 准备工作
    • 2. 实现“本地生活”微信小程序的页面结构
    • 3. 实现“本地生活”微信小程序的页面样式

一、案例分析

本地生活”微信小程序展示了本地生活的图片信息美食装修等分类信息,该页面分为上下两部分,上半部分为轮播图区域,下半部分为九宫格区域。

在这里插入图片描述

二、知识储备

1. swiper和swiper-item组件

swiper组件表示滑块视图容器,用于创建一块可以滑动的区域。swiper组件内部需要嵌套swiper-item组件,swiper-item组件表示滑块视图内容

swiper组件的默认高度为150px,默认宽度为100%swiper-item组件的初始高度和初始宽度都为100%

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项。

swiper组件的常用属性如下表:

在这里插入图片描述

  • 实现轮播图3秒自动无缝切换效果,同时显示面板指示点,并设置指示点颜色为黄色、当前选中指示点颜色为红色
<swiper current="2" indicator-dots indicator-color="yellow" indicator-active-color="red" autoplay="true" interval="3000" circular="true">
  <swiper-item style="background: lightblue">0</swiper-item>
  <swiper-item style="background: lightcoral">1</swiper-item>
  <swiper-item style="background: lightgrey">2</swiper-item>
</swiper>

在这里插入图片描述

2. text组件

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

text组件的常用属性如下表:

在这里插入图片描述

  • user-select属性:使用user-select属性实现长按选中文本的效果
    在这里插入图片描述
    在这里插入图片描述
    左侧图片展示了手指长按之前 text 组件中的文本内容,右侧图片为使用鼠标模拟手指长按文本之后的选中效果,此处通过长按选中了“程序”文本。如果在微信客户端运行的小程序中长按文本,会出现“复制”选项,可以实现长按复制文本的效果。

3. Flex布局

在微信小程序中可以使用Flex布局实现自适应页面

Flex布局又称为弹性盒(Flexible Box)布局,它为盒子模型提供了很强的灵活性,任何一个容器都可以指定为Flex布局。

在这里插入图片描述

若想使用Flex布局,首先要设置父元素的display属性为flex,表示将父元素设置为容器,然后就可以使用容器和项目的相关属性了。

Flex容器的常用属性如下表:

在这里插入图片描述
在这里插入图片描述
项目的常用属性如下表:

在这里插入图片描述

flex-direction属性:用于设置主轴方向,通过设置主轴方向可以规定项目的排列方向,它有以下4个常用的可选值。

  • row:默认值,主轴为从左到右的水平方向。
  • row-reverse:主轴为从右到左的水平方向。
  • column:主轴为从上到下的垂直方向。
  • column-reverse:主轴为从下到上的垂直方向。

演示flex-direction属性的使用

编写页面结构代码:

<view class="demo1">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view>

编写页面样式代码:

.demo1 {
  display: flex;
  flex-direction: column;
}

使用flex-direction属性实现项目纵向排列的效果如下图。

在这里插入图片描述

justify-content属性:用于设置项目在主轴方向上的对齐方式,能够分配项目之间及其周围多余的空间,它有以下5个常用的可选值。

  • flex-start:默认值,表示项目对齐到主轴起点,项目间不留空隙。
  • flex-end:项目对齐到主轴终点,项目间不留空隙。
  • center:项目在主轴上居中排列,项目间不留空隙。主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离。
  • space-between:两端对齐,两端的项目分别靠向容器的两端,其他项目之间的间隔相等。
  • space-around:每个项目之间的距离相等,第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半。

演示justify-content属性的使用

编写页面结构:

<view class="demo2">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view>

编写页面样式:

.demo2 {
  background-color: lightgrey;
  display: flex;
  justify-content: space-between;
}

使用justify-content属性实现项目两端对齐的页面效果如下图。

在这里插入图片描述

align-items属性:用于设置项目在交叉轴上的对齐方式,它有以下6个常用的可选值。

  • normal:默认值,等同于stretch。
  • stretch:未设置项目大小时将项目拉伸,填充满交叉轴方向剩余的空间。
  • flex-start:项目顶部与交叉轴起点对齐。
  • flex-end:项目底部与交叉轴终点对齐。
  • center:项目在交叉轴的中间位置对齐。
  • baseline:项目的第一行文字的基线对齐。

flex-wrap属性:用于规定是否允许项目换行,能够设置多行排列时换行的方向,它有以下3个常用的可选值。

  • nowrap:默认值,表示不换行,如果单行内容过多,项目宽度可能会被压缩。
  • wrap:当容器单行容不下所有项目时允许换行排列。
  • wrap-reverse:当容器单行容不下所有项目时允许换行排列,换行方向为wrap的反方向。

三、案例实现

1. 准备工作

  • 创建项目
    在微信开发者工具中创建一个新的微信小程序项目,项目名称为“本地生活”,模板选择“不使用模板”。
  • 创建页面
    app.json文件中配置一个pages/grid/grid页面,并将其他页面全部删除。
  • 复制素材
    从本书配套源代码中找到本案例,复制images文件夹到本项目中。

“本地生活”微信小程序的目录结构
在这里插入图片描述

2. 实现“本地生活”微信小程序的页面结构

  在pages/grid/grid.wxml文件中编写页面结构。
  • 编写轮播图区域的结构;
  • 编写九宫格区域的结构。
<!--pages/grid/grid.wxml-->
<!--轮播图区域的结构 -->
<swiper indicator-dots="true" autoplay="true" interval="3000">
  <swiper-item>
    <image src="/images/swiper01.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/swiper02.jpg"></image>
  </swiper-item>
</swiper>
<!-- 九宫格区域的结构 -->
<view class="grids">
  <view class="item">
    <image src="/images/shi.png"></image>
    <text>美食</text>
  </view>
  <view class="item">
    <image src="/images/xiu.png"></image>
    <text>装修</text>
  </view>
  <view class="item">
    <image src="/images/yu.png"></image>
    <text>洗浴</text>
  </view>
  <view class="item">
    <image src="/images/che.png"></image>
    <text>汽车</text>
  </view>
  <view class="item">
    <image src="/images/chang.png"></image>
    <text>唱歌</text>
  </view>
  <view class="item">
    <image src="/images/fang.png"></image>
    <text>住宿</text>
  </view>
  <view class="item">
    <image src="/images/xue.png"></image>
    <text>学习</text>
  </view>
  <view class="item">
    <image src="/images/gong.png"></image>
    <text>工作</text>
  </view>
  <view class="item">
    <image src="/images/hun.png"></image>
    <text>结婚</text>
  </view>
</view>

3. 实现“本地生活”微信小程序的页面样式

  在pages/grid/grid.wxss中编写轮播图区域和九宫格区域的页面样式。
  • 编写轮播图区域的样式;
  • 编写九宫格区域的样式。
  • 编写九宫格区域的整体样式;
  • 编写九宫格区域中每一个格子的样式;
  • 编写九宫格区域中每一个格子中的图片和文字的样式。
/* pages/grid/grid.wxss */
/* 轮播图区域的样式 */
swiper {
  height: 350rpx;
}
swiper image {
  width: 100%;
  height: 100%;
}
/* 九宫格区域的样式 */
.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;
}
.grids .item:nth-child(3) {
  border-right: 0;
}
.grids .item:nth-child(6) {
  border-right: 0;
}
.grids .item:nth-child(9) {
  border-right: 0;
}
/* 九宫格区域中每一个格子中的图片和文字的样式 */
.grids .item image {
  width: 70rpx;
  height: 70rpx;
}
.grids .item text {
  color: #999;
  font-size: 28rpx;
  margin-top: 20rpx;
}

  码文不易,本篇文章就介绍到这里,如果想要学习更多Java系列知识点击关注博主,博主带你零基础学习Java知识。与此同时,对于日常生活有困扰的朋友,欢迎阅读我的第四栏目:《国学周更—心性养成之路》,学习技术的同时,我们也注重了心性的养成。

在这里插入图片描述

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

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

相关文章

基于ASP+ACCESS的教师信息管理系统

摘要 随着我国社会主义市场经济的发展和改革开放的不断深入&#xff0c;计算机的应用已遍及国民经济的各个领域&#xff0c;计算机来到我们的工作和生活中&#xff0c;改变着我们和周围的一切。在以前&#xff0c;学校用手工处理教师档案以及工资发放等繁多的工作和数据时&…

谷粒商城の缓存篇

文章目录 前言一、本地缓存和分布式缓存1.本地缓存2.分布式缓存 二、项目实战1.配置Redis2.整合业务代码2.1 缓存击穿2.2 缓存雪崩2.3 缓存穿透2.4 业务代码1.0版2.5 分布式锁1.0版2.6 分布式锁2.0版2.7 Spring Cache及缓存一致性问题2.7.1 Spring Cache2.7.2 缓存一致性问题2.…

[003].第3节.在Windows环境中搭建Redis(单机版)环境

我的后端学习大纲 我的Redis学习大纲 1.Redis下载: 1.中文2.英文 2.Windows下搭建Redis环境&#xff1a; 2.1.单机

[论文笔记]Making Large Language Models A Better Foundation For Dense Retrieval

引言 今天带来北京智源研究院(BAAI)团队带来的一篇关于如何微调LLM变成密集检索器的论文笔记——Making Large Language Models A Better Foundation For Dense Retrieval。 为了简单&#xff0c;下文中以翻译的口吻记录&#xff0c;比如替换"作者"为"我们&quo…

深入理解C语言中的POSIX定时器

引言 在Unix和类Unix系统中&#xff0c;定时器是一种常见的机制&#xff0c;用于在特定时间间隔后执行某些操作。POSIX定时器因其灵活性和功能丰富而被广泛采用。本文将深入探讨POSIX定时器的工作原理、内部机制、使用方法及其在实际开发中的应用。 POSIX定时器基础 POSIX定…

【视频讲解】Python贝叶斯卷积神经网络分类胸部X光图像数据集实例

全文链接&#xff1a;https://tecdat.cn/?p37604 分析师&#xff1a;Yuanchun Niu 在人工智能的诸多领域中&#xff0c;分类技术扮演着核心角色&#xff0c;其应用广泛而深远。无论是在金融风险评估、医疗诊断、安全监控还是日常的交互式服务中&#xff0c;有效的分类算法都是…

数据仓库理论知识

1、数据仓库的概念 数据仓库&#xff08;英文&#xff1a;Date Warehouse&#xff0c;简称数仓、DW&#xff09;&#xff0c;是一个用于数据存储、分析、报告的数据系统。数据仓库的建设目的是面向分析的集成化数据环境&#xff0c;其数据来源于不同的外部系统&#…

Git 修改Push后的Commit Message

向远程仓库push代码之后&#xff0c;在IDEA中无法直接修改Commit Message&#xff0c;需要在终端或控制台中输入以下命令&#xff08;HEAD~1中的1表示只对最后一个提交进行修改&#xff0c;因此1可以自定义&#xff09; git rebase -i HEAD~1执行完rebase指令后&#xff0c;会…

带AI功能朵米客服系统3.5无限制开心版+搭建文档

带AI功能朵米客服系统3.5无限制开心版搭建文档&#xff0c;朵米客服系统是一款全功能的客户服务解决方案&#xff0c;提供多渠道支持&#xff08;如在线聊天、邮件、电话等&#xff09;&#xff0c;帮助企业建立与客户的实时互动。该系统具有智能分流功能&#xff0c;可以快速将…

0基础跟德姆(dom)一起学AI Python进阶07-多线程_生成器

* 多进程案例 * 带参数的多进程代码**(重点)** * 查看进程的id * 演示: 进程之间数据是相互隔离的 * 多线程案例 * 入门案例 * 带参数的多线程代码**(重点)** * 演示: 线程之间数据是相互共享的 * 互斥锁 * 上下文管理器**(重点)** > 解析: with open原理, 为啥…

每日一题,力扣leetcode Hot100之198.打家劫舍

这一道题乍一看可以双层循环暴力解&#xff0c;但是仔细一想有可能最大利益并不是一家隔着一家偷&#xff0c;我可以间隔很多家偷&#xff0c;所以 这个题的思路还是有点像爬楼梯&#xff0c;用动态规划解。 首先确立动态规划的初始条件&#xff1a; 1.dp[0]nums[0]只有一家 …

企业邮箱怎么设置邮箱监控(老板监控员工邮件的方法推荐)【企业管理必备】

在现代企业中&#xff0c;电子邮件作为主要的沟通工具&#xff0c;不仅承载着日常的工作信息&#xff0c;还涉及大量机密内容。为了确保信息安全、提高工作效率&#xff0c;许多企业希望设置邮件监控&#xff0c;了解员工的邮箱使用情况。 本文将详细介绍企业邮箱如何设置邮箱…

Qt-使用qrc文件管理资源(15)

目录 qrc机制 创建qrc文件 1.在项目中创建一个qrc文件 2.导入图片到qrc文件中 2.2先设置一个前缀 2.3把刚刚使用的图片导入到资源文件中 测试结果 图片文件到哪去了&#xff1f; qrc机制 上篇文章中&#xff0c;我们提到了窗口的图片怎么用QIcon进行修改&#xff0c;…

MySQL record 01 part

更改密码&#xff1a; alter user rootlocalhost identified with mysql_native_password by ‘123456’; 注意&#xff1a; 在命令行方式下&#xff0c;每条MySQL的命令都是以分号结尾的&#xff0c;如果不加分号&#xff0c;MySQL会继续等待用户输入命令&#xff0c;直到MyS…

USB - 笔记

1.USB接口区分 2 充电宝 图中提到的各种充电协议都是用于快速充电技术的标准,适用于不同品

聚类算法指南

欢迎来到雲闪世界。 聚类是任何数据科学家必备的技能&#xff0c;因为它对解决实际问题具有实用性和灵活性。本文概述了聚类和不同类型的聚类算法。 什么是聚类&#xff1f; 聚类是一种流行的无监督学习技术&#xff0c;旨在根据相似性将对象或观察结果分组。聚类有很多有用…

c++的封装

实现my_string中可能实现的功能 #include <iostream> #include<cstring> using namespace std; class my_string {char *str; //记录c风格的字符串int size; //记录字符串的实际长度int capacit;//记录最大容量public://无参的构造函数my_string():size(0)…

护眼台灯十大排名有哪些?盘点2024年央视公认最好的护眼灯!

随着学业负担的加重和电子设备的广泛使用&#xff0c;青少年的近视问题变得日益严峻&#xff0c;近视率也在持续上升。导致近视的因素多样&#xff0c;不仅仅局限于电子屏幕的过度使用&#xff0c;还包括遗传因素、不良的用眼习惯、环境条件、营养不良以及过重的学习压力等&…

公司电脑能监控聊天记录吗?公司监控微信聊天记录的方法,一分钟速成!

在现代企业中&#xff0c;微信已经成为许多员工日常沟通的主要工具。虽然它极大地提高了工作效率&#xff0c;但也给公司管理带来了一些挑战&#xff0c;比如如何防止员工在工作时间闲聊、保护企业机密信息不外泄等。因此&#xff0c;不少公司希望对员工的微信聊天记录进行监控…

SealSuite 一站式 IT 管理与办公安全解决方案,助力出海企业夯实数字化底座

数字化办公时代&#xff0c;企业升级 IT 基础设施&#xff0c;已不再是选择题&#xff0c;而是必答题。 数字化办公时代&#xff0c;企业为何要升级 IT 基础设施&#xff1f; 随着时代变化与科技进步&#xff0c;人们的工作方式也发生了巨大变化。如今&#xff0c;远程办公、全…