微信小程序全屏开屏广告

效果图

代码

<template><view><!-- 自定义头部 --><u-navbar title=" " :bgColor="bgColor"><view class="u-nav-slot" slot="left"><view class="leftCon"><view class="countDown">{{currentTime}}s</view><view class="line">|</view><view class="passBtn" @click="passClick()">跳过</view></view></view></u-navbar><!-- 轮播图 --><swiper class="swiperList_box" :circular="true" :vertical="false" :autoplay="true" interval="2000"@change="swiperChange"><swiper-item class="swiperItem" :class="swiperCurrent==index?'cur':''" v-for="(item,index) in swiperList":key="index"><image :src="item.img_url" mode="scaleToFill"></image></swiper-item></swiper><!-- 轮播指示点 --><view class="indicationList_box"><block v-for="(item,index) in swiperList" :key="index"><view class="spotItem" :class="swiperCurrent==index?'active':''"></view></block></view></view>
</template><script>export default {data() {return {// 自定义头部bgColor: 'transparent',// 定时器interval: null,// 倒计时时长currentTime: 0,// 轮播图swiperList: [],swiperCurrent: 0,}},onLoad() {},onShow() {},async onReady() {var _this = this;await _this.$onLaunched;_this.currentTime = uni.getStorageSync('webConfig').web_config_str.welcome_time_num;_this.getSwiperList();},methods: {// 获取轮播图getSwiperList() {var _this = this;uni.$u.http.get('/api/other.News/get_data_list', {params: {cat_id: '302', //301首页、302欢迎页、303商家登录}}).then(res => {console.log("==获取轮播图==");console.log(res);uni.hideLoading();_this.swiperList = res.data;_this.codeText();}).catch(res => {console.log(res);})},// 时间倒计时codeText() {var _this = this;var currentTime = _this.currentTime;_this.interval = setInterval(function() {currentTime--;// console.log(currentTime)_this.currentTime = currentTime;if (currentTime <= 0) {clearInterval(_this.interval);_this.passClick();}}, 1000)},// 滑动轮播图swiperChange(e) {this.swiperCurrent = e.detail.current;},// 跳过passClick() {var _this = this;clearInterval(_this.interval);uni.switchTab({url: '/pages/index/index'})},}}
</script><style lang="scss" scoped>// 自定义头部.leftCon {width: 200rpx;height: 62rpx;border-radius: 30rpx;border: 2rpx solid #fff;box-sizing: border-box;overflow: hidden;display: flex;justify-content: center;align-items: center;}.countDown,.line,.passBtn {color: #fff;opacity: 0.7;}.line {margin: 0 20rpx;}/* 轮播图 */.swiperList_box {width: 100%;height: 100vh;position: relative;top: 0;z-index: 1;}.swiperItem {width: 100%;height: 100vh;}.swiperItem image {width: 100%;height: 100%;}/* 轮播指示点 */.indicationList_box {width: 100%;height: 36rpx;display: flex;justify-content: center;align-items: center;position: fixed;left: 0;right: 0;bottom: 30rpx;z-index: 99;}.spotItem {width: 10rpx;height: 10rpx;border-radius: 20rpx;background-color: rgba(0, 0, 0, 0.3);overflow: hidden;margin: 0 5rpx;}.spotItem.active {width: 30rpx;background-color: rgba(0, 0, 0, 0.6);}
</style>

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

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

相关文章

MySQL-进阶篇-一条sql更新语句是如何执行的(redo log和binlog)

上一篇&#xff1a;一条sql查询语句是如何执行的 http://t.csdnimg.cn/nV3EY 摘自&#xff1a;林晓斌MySQL实战45讲——第二篇 更新语句的执行过程与上一篇查询流程相同&#xff0c;本篇简写。 但多了两个重要的日志模块&#xff1a;redo log&#xff08;重做日志&#xff0…

初学ELK - elk部署

一、简介 ELK是3个开源软件组合&#xff0c;分别是 Elasticsearch &#xff0c;Logstash&#xff0c;Kibana Elasticsearch &#xff1a;是个开源分布式搜索引擎&#xff0c;提供搜集、分析、存储数据三大功能。它的特点有&#xff1a;分布式&#xff0c;零配置&#xff0c;自…

《黑马点评》Redis高并发项目实战笔记(上)P1~P45

P1 Redis企业实战课程介绍 P2 短信登录 导入黑马点评项目 首先在数据库连接下新建一个数据库hmdp&#xff0c;然后右键hmdp下的表&#xff0c;选择运行SQL文件&#xff0c;然后指定运行文件hmdp.sql即可&#xff08;建议MySQL的版本在5.7及以上&#xff09;&#xff1a; 下面这…

MySQL——查询数据的处理

一、并列 连接两个数据列的值&#xff0c;并进行输出的格式化处理&#xff08;显示为一种统一的格式&#xff09; concat( 列 1 格式化字 符 ) mysql> select concat(vend_name, vend_country) from vendors; --------------------------------- | concat(vend_name, ve…

C++使用类

运算符重载 C允许将运算符重载扩展到用户定义的类型&#xff0c;C将会根据操作数的数目和类型来决定使用哪种操作&#xff0c;运算符重载的格式如下: operatorop(argumet-list) 即由关键字operator&#xff0c;运算符op&#xff0c;()里的参数列表三部分组成&#xff0c;op必…

C++---vector容器

是STL容器中的一种常用的容器&#xff0c;由于其大小(size)可变&#xff0c;常用于数组大小不可知的情况下来替代数组。vector容器与数组十分相似&#xff0c;被称为动态数组。时间复杂度为O&#xff08;1&#xff09;。 数组数据通常存储在栈中&#xff0c;vector数据通常存储…

napi系列学习进阶篇——NAPI生命周期

什么是NAPI的生命周期 我们都知道&#xff0c;程序的生命周期是指程序从启动&#xff0c;运行到最后的结束的整个过程。生命周期的管理自然是指控制程序的启动&#xff0c;调用以及结束的方法。 而NAPI中的生命周期又是怎样的呢&#xff1f;如下图所示&#xff1a; 从图上我们…

16、普通数组-除自身以外的数组乘积

思路 通过辅助数组的方式 第一个从左向右的辅助数组乘积第二次从右向左的辅助数组乘积对于0<i<N-1 他的数组乘积就是左边的数组乘积*右边数组乘积然后再分类讨论i0 就是右边1-N-1的数组乘积iN-1就是左边从N-2到0的数组乘积 代码如下&#xff1a; class Solution {pub…

开发日志2024-04-12

开发日志2024/04/12 1、分店月业绩和年业绩都需要添加为真实数据 **开发思路&#xff1a;**分店下所属的技师的业绩总和 代码实现&#xff1a; 前端 无 后端 //TODO 将技师多对应的积分累加到他所属的分店的月/年累计业绩销量中//TODO 查询技师所对应的分店地址String f…

【深度学习】图像超分辨

案例 7&#xff1a;图像超分辨 相关知识点&#xff1a;生成对抗网络、图像处理&#xff08;PIL&#xff09;和可视化&#xff08;matplotlib&#xff09; 1 任务目标 1.1 任务和数据简介 ​ 本次案例将使用生成对抗网络来实现 4 倍图像超分辨任务&#xff0c;输入一张低分辨…

中级物流师、高级物流师资格认证考试大纲《物流管理实务》

物流管理实务 第一章 物流市场调查 一、市场调查基本知识 二、物流市场调研 三、物流市场预测 四、物流市场调研报告 第二章 仓库规划与设计 一、仓储规划概述 二、仓库规模和数量规划 三、仓库选址规划 四、仓库的结构与布局 五、自动化立体仓库的规划与设计 第…

微信小程序报错——“errno“: 600001, “errMsg“: “request:fail -2:net::ERR_FAILED“

bug现象 微信小程序体验版和真机调试 进入小程序的时候接口就出现了这个报错 "errno": 600001, "errMsg": "request:fail -2:net::ERR_FAILED" 排查 检查是证书过期还是证书链不完整 证书的信任链完整问题&#xff0c;可以在 亚数信息-SSL/TLS安…

安装ODBC方法

1、运行 搜索 ODBC数据源管理程序 32位或者 64位 2、在用户DSN或者系统DSN选择添加&#xff08;建议前者&#xff09;&#xff0c;此处以添加access数据库的odbc驱动为例 3、安装成功

Unity让地图素材遮挡人物

点击编辑/项目设置/图形&#xff0c;透明度排序模式设置自定义轴&#xff0c;透明度排序轴Y设置为1其他为0。 此时人物和地图素材的图层排序相等&#xff0c;当人物的高度大于地图素材时&#xff0c;人物则被遮挡。

锚框(anchor box)

目标检测算法通常会在输入图像中抽样大量的区域&#xff0c;然后判断这些区域中是否包含我们感兴趣的目标&#xff0c;并调整区域边界&#xff0c;从而更准确地预测目标的真实边界框&#xff08;ground-truth bounding box)。不同的模型所使用的区域抽样方法可能不同。这里我们…

三小时零基础入门微信扫码点餐小程序 手把手带你开发一款云开发版点餐软件,店铺地图导航,外卖小程序,用户端和后厨端都有

从今天开始带领大家实现一款云开发版的点餐小程序 视频讲解&#xff1a;《云开发后台微信扫码点餐小程序cms网页管理后台》 技术选型 1&#xff0c;前端 微信小程序原生框架cssJavaScript 2&#xff0c;管理后台 云开发Cms内容管理系统web网页 3&#xff0c;数据后台 小…

【STL】list

目录 1. list的使用 1.1 list的构造 1.2 list iterator的使用 1.3 list capacity 1.4 list element access 1.5 list modifiers 1.6 list的迭代器失效 2. list的模拟实现 3. list与vector的对比 1. list的使用 1.1 list的构造 1.2 list iterator的使用 1. begin与end为…

MySQL前缀索引(3/16)

前缀索引 前缀索引&#xff1a;MySQL支持前缀索引&#xff0c;允许定义字符串的一部分作为索引。如果不指定前缀长度&#xff0c;索引将包含整个字符串。前缀索引可以节省空间&#xff0c;但可能会增加查询时的记录扫描次数&#xff08;因为会查询到多个前缀相同的数据&#x…

4.9QT

完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配&#xf…

Redis数据持久化 AOF RDB

Redis数据持久化 AOF RDB 1、单点 redis 的问题2、主从复制2.1 命令传播 3、Redis的持久化3.1 AOF写回策略重写机制后台重写 3.2 RDB&#xff08;默认方式&#xff09;RDB 方式&#xff1a;执行快照时&#xff0c;数据能被修改吗&#xff1f;RDB 方式总结 3.3 RDB 和 AOF 组合&…