当前位置: 首页 > news >正文

关于商品活动的H5页面技术总结

背景

在单个html文件里面使用vue3、jquery等其他第三方js库,实现规定的页面效果,其中主要功能是从商品json数据中读取数据,然后可以通过搜索框、下拉框、左侧菜单来筛选商户信息。

页面布局

image.png

技术要点:

1、通过路由来进行页面布局

 <div class="tab-pane" ><router-view name="routerView-1"></router-view><div class="content-wrapper"><router-view name="routerView-2"></router-view><router-view name="routerView-3"></router-view><router-view name="routerView-4"></router-view></div></div>
  // 创建路由const router = createRouter({history: createWebHashHistory(),routes: [{path: '/',components: {routerView-1: routerView-1,}},{path: '/path2',components: {routerView-1: routerView-1,routerView-2: routerView-2,routerView-3: routerView-3,}},{path: '/path3',components: {routerView-1: routerView-1,routerView-2: routerView-2,}},]});

(1)在视图中通过路由组件名字来显示,如果路由路径下没有传入对应的组件,那么视图中就不会显示该路由视图。

(2) 在页面中,可以有多个路由出口,其中出口内容可以通用命名来指定,其中如果传入对应的组件,那么该路由视图出口就有内容,否则就不会展示,相当于没有内容。

(3) 其中路由创建、组件定义都是在 const app = createApp(App);的App之外定义的,然后app.use(router)就可以引用进来。

(4)在单个html页面中定义组件,其中必须要引入vue,组件代码模板是:

 const module = {template: ``,setup() {return { };}};

其中如果需要用到vue中的App对象里面的内容,那么就会使用到provide、inject,provide需要在App对象里面注入组件需要的数据,inject是取出注入的数据。inject可以在不同的组件中使用。

2、布局CSS设置

现在实现一个效果,就是在div里面展示商户地址和商户类型,是左右布局展示,其中类型在右边底部,其中类型一定会显示出来,而地址始终在类型的左边,其中地址过长时会自动换行。

image.png

<div class="address-type"><div class="address"></div><div class="type"></div>
</div>

css设置如下:

.address-type {display: flex;align-items: center;justify-content: space-between;
}
.address {flex: 1;text-alin: left;
}
.type {flex-shrink: 0;text-align: right;align-self: flex-end;width: auto;
}

相关文章:

关于商品活动的H5页面技术总结

背景 在单个html文件里面使用vue3、jquery等其他第三方js库&#xff0c;实现规定的页面效果&#xff0c;其中主要功能是从商品json数据中读取数据&#xff0c;然后可以通过搜索框、下拉框、左侧菜单来筛选商户信息。 页面布局 技术要点&#xff1a; 1、通过路由来进行页面布…...

前端:横向滚动条,拖动进行左右滚动(含隐藏滚动条)

效果 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, i…...

Android JNI Bitmap指定颜色值替换

#include <jni.h> #include <string> #include <android/bitmap.h> #include <cmath> #include <android/log.h> //定义TAG之后&#xff0c;我们可以在LogCat通过TAG过滤出NDK打印的日志 #define TAG "BitmapOperationNative" // 定义…...

测试理论与方法----测试流程的第四个步骤:执行测试,提出缺陷

8、执行测试—–>提交缺陷报告 测试流程&#xff1a;执行测试—–>提交缺陷报告 1、缺陷的概述&#xff08;回顾&#xff09; 结果角度&#xff1a;实际结果和预期结果不一致 需求角度&#xff1a;所有不满足需求或超出需求的&#xff0c;都是缺陷 2、缺陷的相关属性…...

Stable Diffusion 提示词入门指南

前言 本文主要讲解 Stable Diffusion &#xff08;下文简称 SD&#xff09;提示词的用法&#xff0c;帮助大家生成更高质量的图片 本章节主要讲解文生图&#xff0c;其他类型读者可以自行探索。同时本文主要是以 Stable Diffusion Discard 的形式生成图片 如果各位对于图片隐…...

基于鹰栖息算法优化的BP神经网络(预测应用) - 附代码

基于鹰栖息算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于鹰栖息算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.鹰栖息优化BP神经网络2.1 BP神经网络参数设置2.2 鹰栖息算法应用 4.测试结果&#xff1a;5.Matlab代…...

想要搞懂接口测试和功能测试有什么区别,那就必须知道他们的基本原理

本文主要分为两个部分&#xff1a; 第一部分&#xff1a;主要从问题出发&#xff0c;引入接口测试的相关内容并与前端测试进行简单对比&#xff0c;总结两者之前的区别与联系。但该部分只交代了怎么做和如何做&#xff1f;并没有解释为什么要做&#xff1f; 第二部分&#xf…...

Spring: HiddenHttpMethodFilter的用法

作用&#xff1a;将html表单提交的post请求转换为put请求或delete请求发给接口。 html不支持put和delete. 一、web.xml中配置过滤器 <filter><filter-name>HiddenHttpMethodFilter</filter-name><filter-class>org.springframework.web.filter.HiddenH…...

Vue入门学习(一)

一、Vue环境搭建及第一个Demo 1.1编程工具&#xff1a; 下载Vscode,并安装插件 在Extensions 选项中搜索插件&#xff1a; 1&#xff1a;Live Server&#xff1a;将当前项目作为根路径&#xff0c;启动一个服务端&#xff0c;这样右键就会有如下选项 2&#xff1a;Eclipse …...

软考:中级软件设计师:无线网,网络接入技术,ipv6

软考&#xff1a;中级软件设计师:无线网 提示&#xff1a;系列被面试官问的问题&#xff0c;我自己当时不会&#xff0c;所以下来自己复盘一下&#xff0c;认真学习和总结&#xff0c;以应对未来更多的可能性 关于互联网大厂的笔试面试&#xff0c;都是需要细心准备的 &#x…...

dart 学习 之 同步生成器(sync*)和 异步生成器(async*)

同步生成器&#xff08;sync*&#xff09;和异步生成器&#xff08;async*&#xff09;都是 Dart 中用于逐步产生多个值的生成器类型&#xff0c;但它们之间有一些重要的区别&#xff1a; 执行方式&#xff1a; 同步生成器&#xff08;sync*&#xff09;&#xff1a; 同步生成器…...

JSX基础

1. JSX介绍 概念&#xff1a;JSX是 JavaScript XML&#xff08;HTML&#xff09;的缩写&#xff0c;表示在 JS 代码中书写 HTML 结构 作用&#xff1a;在React中创建HTML结构&#xff08;页面UI结构&#xff09; 优势&#xff1a; 采用类似于HTML的语法&#xff0c;降低学习成…...

Linux Day11---mbash项目(二)

观看本文之前请先阅读Linux Day10的相关内容 1.touch 1.1 open系统调用 int open(const char*path,int oflags,mode_t mode); oflags参数&#xff1a; O_APPEND:把写入数据追加在文件的末尾 O_TRUNC:把文件长度设置为0&#xff0c;丢弃已有的内容 O_CREAT:如果需要&#…...

回归预测 | MATLAB实现IBES-ELM改进的秃鹰搜索优化算法优化极限学习机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现IBES-ELM改进的秃鹰搜索优化算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现IBES-ELM改进的秃鹰搜索优化算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图…...

【Golang】go条件编译

交叉编译只是为了能在一个平台上编译出其他平台可运行的程序&#xff0c;Go 作为一个跨平台的语言&#xff0c;它提供的类库势必也是跨平台的&#xff0c;比如说程序的系统调用相关的功能&#xff0c;能根据所处环境选择对应的源码进行编译。让编译器只对满足条件的代码进行编译…...

学习创建第一个 React 项目

目标 本篇的目标是配置好基础的环境并创建出第一个 React 项目。 由于之前没接触过相关的知识&#xff0c;所以还需要了解其依赖的一些概念。 步骤主要参考First React app using create-react-app | VS code | npx | npm - YouTube 0. 简单了解相关概念 JavaScript 一种语…...

使用Python构建网络爬虫:提取网页内容和图片资源

网络爬虫是一种自动获取网页内容的程序&#xff0c;它可以帮助我们高效地收集网络上的有价值信息。本文将介绍如何使用Python构建网络爬虫&#xff0c;提取网页内容和图片资源。   一、环境准备   1.安装Python环境   首先&#xff0c;确保您已经安装了Python环境。访问P…...

推荐两款开源的绘制流程图软件

一句话导读 目前流程图绘制软件非常多&#xff0c;包括本机安装的、web端的都有&#xff0c;如Visio、Graphviz、processOn等等。但是几乎都是收费的。本文给大家介绍两款优秀的开源免费的流程图绘制软件。 目录 一句话导读 一、draw.io 二、Meta2d.js ​1.为什么使用 2.…...

echarts画一个简单的饼图 中间是空的 环有两种颜色一种是底色 一种是百分比的颜色

//dom打印出来大概是什么样子下方有个图可以作为参考 ecInit(correctRate, processAnalysisVO.correctRate, (100-processAnalysisVO.correctRate));//如效果图//饼图 function ecInit(dom, correctRate, errorRate) {var dom dom; //就是你要放入的盒子元素var myChart ech…...

5 群起集群

1.在启动集群之前&#xff0c;先配置workers,有几个节点就配置几个 [atguiguhadoop102 hadoop]$ vim /opt/module/hadoop-3.1.3/etc/hadoop/workers在该文件中增加如下内容&#xff1a; hadoop102 hadoop103 hadoop104 注意&#xff1a;该文件中添加的内容结尾不允许有空格&a…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...