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

文章目录

  • 一、实现步骤
    • （一）创建项目
    • （二）创建页面
    • （三）准备图片素材
    • （四）编写页面结构
      • 1、编写轮播区域页面结构
      • 2、编写九宫格区域页面结构
    • （五）编写页面样式
      • 1、编写轮播图区样式
      • 2、编写九宫格区域页面样式
    • （六）查看模拟机效果

一、实现步骤

（一）创建项目

在这里插入图片描述

（二）创建页面

在这里插入图片描述

（三）准备图片素材

在这里插入图片描述

（四）编写页面结构

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

  • 源码
    在这里插入图片描述
  • 预览效果
    在这里插入图片描述

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

  • view组件里嵌套9个view组件
    在这里插入图片描述

（五）编写页面样式

1、编写轮播图区样式

  • 设置swiper容器高度：350rpx，设置容器的高度和宽度

在这里插入图片描述

  • 预览效果
    在这里插入图片描述

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

  • 整体页面样式
    在这里插入图片描述

  • 每个格子页面样式
    在这里插入图片描述

  • 每个格子中的图片和文字的页面样式
    在这里插入图片描述

（六）查看模拟机效果

  • 查看轮播图和九宫格

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Redis-持久化机制

Redis-持久化机制

持久化机制介绍 RDBAOFRDB和AOF对比 RDB rdb的话是利用了写时复制技术，他是看时间间隔内key值的变化量，就比如20秒内如果有5个key改变过的话他就会创建一个fork子进程（bgsave），通过这个子进程，将数据快照进…
阅读更多...
Golang网络编程：即时通讯系统Instance Messaging System

Golang网络编程：即时通讯系统Instance Messaging System

系统基本架构 版本迭代 项目改造 无人机是client，我们是server，提供注册登入，场景选择等。信道模拟器是server，我们是client，我们向信道模拟器发送数据，等待信道模拟器计算结果，返回给无人机。…
阅读更多...
MFC 鼠标悬停提示框

MFC 鼠标悬停提示框

MFC 鼠标悬停提示框 运行效果 在MFC窗口中添加一个控件 工具栏中拖拽List Box到MFC窗口给List Box添加变量 CListBox m_listbox 增加成员变量 CWnd* m_tip_parent_wnd; CToolTipCtrl m_tip;给m_listbox创建提示框 void create_tip_window(CWnd* tip_wnd, CToolTipCtrl* ti…
阅读更多...
[nltk_data] Error loading stopwords: ＜urlopen error [WinError 10054]

[nltk_data] Error loading stopwords: ＜urlopen error [WinError 10054]

报错提示&#xff1a; >>> import nltk >>> nltk.download(stopwords) 按照提示执行后 [nltk_data] Error loading stopwords: <urlopen error [WinError 10054] 找到路径C:\\Users\\EDY\\nltk_data&#xff0c;如果没有nltk_data文件夹&#xff0c;在…
阅读更多...
Magica Cloth 使用方法笔记

Magica Cloth 使用方法笔记

Magica Cloth 使用方法笔记 官方使用文档链接&#xff1a; インストールガイド – Magica Soft 鱼儿效果案例&#xff1a; https://www.patreon.com/posts/69459293 安装环境&#xff1a; 关于在Unity 2018.4.12版本 下 导入 Magic Cloth 之前&#xff0c;需要提前置入的…
阅读更多...
FreeRTOS学习笔记（一）

FreeRTOS学习笔记（一）

一、基础知识思维导图 vtaskdelay函数会开启中断&#xff0c;所以在临界区不能用vtaskdelay 二、任务的创建与删除 2.1、任务的动态创建与删除 ........#define START_TASK_PRIO 1 #define START_TASK_STACK_SIZE 128 TaskHandle_t start_task_handler; void …
阅读更多...
springboot项目集成kafka,并创建kafka生成消息线程池

springboot项目集成kafka,并创建kafka生成消息线程池

效果图： 步骤1：添加依赖 <!-- kafka依赖 --><dependency><groupId>org.apache.kafka</groupId><<
阅读更多...
vue-slot插槽

vue-slot插槽

作用&#xff1a;让父组件可以向子组件中任意位置插入html结构&#xff0c;也是组件通信方式的一种&#xff0c;适用于父组件》子组件 分类: 默认插槽、具名插槽、作用域插槽 定义子组件时使用slot组件&#xff0c;在使用子组件是可以决定是否插入具体的html代码 默认插槽 如…
阅读更多...
【无公网IP内网穿透】基于NATAPP搭建Web站点

【无公网IP内网穿透】基于NATAPP搭建Web站点

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《.内网穿透》。&#x1f3af;&#x1f3af; &#…
阅读更多...
RustDay01——运行在线GitHub Rust环境

RustDay01——运行在线GitHub Rust环境

1.跟着教程进入GitHub教室 2. 授权确认后进入学习空间 3.点击链接进入在线平台 4.添加本机密钥对到GitHub 5. 安装依赖 我们使用在线的Linux试验平台&#xff0c;就自动帮我们clone好了仓库 我们直接在仓库目录执行 cargo install --force --path . 安装依赖 PS:其实刚开始…
阅读更多...
数据结构 | (三) Stack

数据结构 | (三) Stack

栈 &#xff1a;一种特殊的线性表&#xff0c;其 只允许在固定的一端进行插入和删除元素操作 。 进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO &#xff08; Last In First Out &#xff09;的原则。 压栈&#xff1a;栈…
阅读更多...
在Kubernetes中实现gRPC流量负载均衡

在Kubernetes中实现gRPC流量负载均衡

在尝试将gRPC服务部署到Kubernetes集群中时&#xff0c;一些用户&#xff08;包括我&#xff09;面临的挑战之一是实现适当的负载均衡。在深入了解如何平衡gRPC的方式之前&#xff0c;我们首先需要回答一个问题&#xff0c;即为什么需要平衡流量&#xff0c;如果Kubernetes已经…
阅读更多...
苹果遭遇安全危机，应用商店曝出不良APP，或影响iPhone的销售

苹果遭遇安全危机，应用商店曝出不良APP，或影响iPhone的销售

据澎湃新闻报道指苹果的App Store被曝出不良APP位居下载榜前列&#xff0c;这对于向来强调APP严格审核的苹果来说是巨大的打击&#xff0c;更影响向来被认为信息安全遥遥领先的名声&#xff0c;对当下正热销的iPhone15或造成打击。 据了解被曝的软件以“学习XX字母”为命名&…
阅读更多...
2020架构真题（四十六）

2020架构真题（四十六）

、以下关于操作系统微内核架构特征的说法&#xff0c;不正确的是&#xff08;&#xff09;。 微内核的系统结构清晰&#xff0c;利于协作开发微内核代码量少&#xff0c;系统具有良好的可移植性微内核有良好的的伸缩性和扩展性微内核功能代码可以互相调用&#xff0c;性能很高…
阅读更多...
Unity官方文档中关于内存管理的翻译(2021.3)

Unity官方文档中关于内存管理的翻译(2021.3)

原文:Memory in Unity - Unity 手册 Unity内存管理 为了确保您的应用程序运行时没有性能问题&#xff0c;了解Unity如何使用和分配内存非常重要。本文档的这一部分解释了Unity中内存是如何工作的&#xff0c;适用于希望了解如何提高应用程序内存性能的读者。 Unity使用三个内…
阅读更多...
第二证券：汽车产业链股活跃，恒勃股份、博俊科技“20cm”涨停

第二证券：汽车产业链股活跃，恒勃股份、博俊科技“20cm”涨停

轿车产业链股9日盘中走势活跃&#xff0c;截至发稿&#xff0c;恒勃股份、博俊科技“20cm”涨停&#xff0c;德迈仕涨超17%&#xff0c;上声电子涨超14%&#xff0c;川环科技涨超10%&#xff0c;圣龙股份、科华控股、沪光股份、上海沿浦、日盈电子、赛力斯等均涨停。 工作方面…
阅读更多...
扬尘监测：智能化解决方案让生活更美好

扬尘监测：智能化解决方案让生活更美好

随着工业化和城市化的快速发展&#xff0c;扬尘污染问题越来越受到人们的关注。扬尘不仅影响城市环境&#xff0c;还会对人们的健康造成威胁。为了解决这一问题&#xff0c;扬尘监测成为了一个重要的手段。本文将介绍扬尘监测的现状、重要性以及智能化解决方案&#xff0c;帮助…
阅读更多...
基于goravel的CMS，企业官网通用golang后台管理系统

基于goravel的CMS，企业官网通用golang后台管理系统

2023年9月11日10:47:00 仓库地址&#xff1a; https://gitee.com/open-php/zx-goravel-website 框架介绍 Goravel SCUI 后端开发组件 go 1.20 Goravel 1.13 数据库 sql(使用最新日期文件) goravel\doc\sql_bak mysql 8.0 前端开发组件 scui 1.6.9 node v14.21.3 效果图…
阅读更多...
QT：SQLITE数据库编程

QT：SQLITE数据库编程

pro文件&#xff1a;QT core gui sql widget.ui main.cpp #include "widget.h" #include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w("./student.db"); //传入文件名w.show();return a.exec…
阅读更多...
微信小程序通过createSelectorQuery获取元素 高度，宽度与界面距离

微信小程序通过createSelectorQuery获取元素 高度，宽度与界面距离

小程序官方有提供给我们一个 const query wx.createSelectorQuery() 函数 我们可以先编写这样一段代码 wxml <view><button bindtap"getDom">点击查看</button><view class "textIn" style "height: 100px;width: 30px;&quo…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023