Vue实现移动端开屏广告+滑动登录，web开发新技术

最新推荐文章于 2024-09-13 23:32:49 发布
最新推荐文章于 2024-09-13 23:32:49 发布
阅读量870 收藏 26
点赞数 20
分类专栏： 前端程序员 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60607895/article/details/136795061
版权
本文通过一个Vue.js移动端小Demo展示了如何实现开屏广告和滑动登录。讨论了CSS中的DOM尺寸计算、禁用文本选择以及利用弹性布局定位伪元素。在Vue部分，区分了mounted和created生命周期，并解释了在移动端如何使用setInterval替代setTimeout。移动端滑动登录需使用touch事件代替mouse事件。此外，分享了前端工程师的进阶建议和面试准备要点。
摘要由CSDN通过智能技术生成

  • 在这里插入图片描述

  • 这个就是这个小Demo，我想表达的是Demo虽小，五脏俱全，很多知识点之前以为懂了，现在才知道都不懂，之前用原生JS做过pc端的滑动登录，现在用Vue.js做移动端的以为很简单，才发现事情没有想象的那么简单，移动端的滑动事件和pc端的事件并不是同一个事件，以至于我一直没有做成功

  • CSS知识点：

  • Dom.offsetWidth之的是原生自身的宽度，是包含边框的 但是不包含边距

  • user-select: none; 是让文本不能够被选中

  • CSS没有啥太大的知识点，只要花时间都能够写出来，就是一个有时候我们想让伪类元素像::before这种伪元素居中我们可以给伪元素的宿主元素设置弹性布局

  • Vue.js部分：

  • mounted生命周期函数和created生命周期函数的区别，mounted表示的是页面已经渲染好了 created表示的是页面还没有渲染好，这两个经常使用

  • 开屏广告部分时间在跳转就使用setInterval（）而没有使用setTimerOut了，因为前者可以一直使用反复的执行，而后者需要不断的调用，更加的不方便。

  • 在Vue中我们如果想要修改

最低0.47元/天 解锁文章
m0_60607895
关注
专栏目录
ssm+vue广告管理系统源码和论文
weixin_2630663675的博客
09-28 592
广告商功能有个人中心，广告需求管理，广告提案管理，广告制作需求管理，广告设计图交付管理，广告设计预览管理，广告调整信息管理，广告签署管理，广告结算管理。广告客户功能有个人中心，广告投放渠道管理，广告需求管理，广告提案管理，广告设计预览管理，广告调整信息管理，广告签署管理，广告结算管理。广告制作商功能有个人中心，广告制作需求管理，广告设计图交付管理。因而具有一定的实用性。管理员功能有个人中心，广告客户管理，广告商管理，广告制作商管理，广告投放渠道管理等。本广告管理系统有管理员，广告客户，广告商，广告制作商。
Vue实现移动端开屏广告+滑动登录，前端程序员的春天，2024前端进阶新篇章
m0_61042126的博客
03-19 346
前端资料汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
悬浮小广告
weixin_44463883的博客
02-18 661
<!--悬浮小广告样式的提示信息--> <div id="thediv" ref="thediv" style="position: absolute; z-index: 111; left: 0; top: 0;" v-show="thedivShow" @mouseover="clearFdAd" @mouseout="starFdAd"> <a href="http://xxxxxx" target="_blank"> ..
vue实现浮动广告（浏览器范围内匀速移动）
h5_since的博客
10-29 2030
原理：写一个让dom匀速移动的方法，然后用定时器每隔一定时间调用这个方法，下面直接上代码 <template> <div> <div id="thediv" ref="thediv">我是浮动广告</div> </div> </template> export default { data() { return { xPos:300, yPos:200, step:
Vue实现移动端左右滑动效果的方法
12-12
在Vue.js框架中，实现移动端的左右滑动效果可以借助第三方库vue-touch。vue-touch是一个为Vue.js设计的轻量级手势库，它提供了一系列的手势事件，包括滑动（swipe）、点击（tap）、双击（doubleTap）、捏合（pinch）...
vue移动端的左右滑动事件详解
10-15
Vue移动端的左右滑动事件是前端开发中处理触摸设备交互的一种常用技术。在移动设备上实现左右滑动效果，可以通过监听触摸事件（touchstart、touchmove、touchend）来判断用户的滑动方向，并根据滑动距离、速度等因素...
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）
05-03
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）；精简版是基于 vue-pure-admin 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 element-plus 的情况下仍然低于...
vue实现悬浮广告飘窗组件
weixin_42973850的博客
03-20 2306
vue实现悬浮广告飘窗组件
vue实现开屏广告001
01-08
使用vue实现开屏广告，使用cookie记录，每天弹出一次广告
vue2手机APP项目添加开屏广告或者闪屏广告
11-26
一般项目里，有的会在启动的时候加开屏广告或者闪屏广告。我们是在index.html通过定位来做的。如下： <style media="screen"> #entry { width: 100%; height: 100%; z-index: 200; position: relative; } #entryAdv { display: none; } #entryTim { position: fixed; width: 2.2rem; line-height: 0.68rem; font-size: 0.32rem; z-index: 400; text-
vue从下往上滚动广告
weixin_41815063的博客
07-12 245
<template> <div class="roll" v-show="cardBuyers && cardBuyers.length > 0"> <div class="roll_cont"> <div :class="{ marquee_top: animate }" class="roll_con"> <div class="roll_box" v-for="(item, ...
Vue全家桶广告
跟着信仰走
07-24 817
vue-router：是 Vue.js 官方的路由管理器，和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌，包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为...
Vue组件-广告滚动
weixin_44143173的博客
11-12 416
1.广告组件 <!-- * 滚动广告 *@parmas msg 广告内容 *@parmas height 容器高度 --> <template> <div class="inner" :style="{height:height}"> <ul :class="{marquee_top:animate}" ...
Vue弹窗 Confirm 组件
热门推荐
Abner 的博客 (:
09-15 12万+
Vue的弹窗组价 描述：有时候自己开发项目，需要使用到一些弹窗，提示框之类的东西。一般会有我们自己使用一些UI组件库，或者自己手写一个。 哈哈，用别人的东西有时候挺好的，但是有时候又不好，因为业务的需求和UI的设计总是变化的很快，别人的东西难免改起来很多时候感觉还不如自己写（反正很多时候我都是这样的感觉，特别是踩到坑时，往往觉得莫名其妙，不知如何是好，但是自己写的东西不一样，可以调试）。所以这...
vue2手机APP项目中，加入开屏广告或者闪屏广告
06-21 4574
一般项目里，有的会在启动的时候加开屏广告或者闪屏广告。我们是在index.html通过定位来做的。如下： style media="screen"> #entry { width: 100%; height: 100%; z-index: 200; position: relative; } #entryAdv { display: non
-webkit-box-reflect属性与倒影效果的实现
最新发布
读心悦
09-13 550
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
Vue实现开屏广告：Cookie记录与每日弹出
在Vue框架中实现开屏广告功能，本文档主要介绍了如何通过组件化的方式设计一个可复用的开屏广告模块。该组件名为`dialogs`，它具备以下几个关键特性： 1. **组件结构**: - 使用`<template>`部分定义了广告弹窗的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值