微信小程序全屏开屏广告

这篇具有很好参考价值的文章主要介绍了微信小程序全屏开屏广告。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图

微信小程序全屏开屏广告,微信小程序,uniapp,微信小程序,uni-app

代码文章来源地址https://www.toymoban.com/news/detail-851108.html

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

到了这里,关于微信小程序全屏开屏广告的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【uni-app】UniApp实现微信小程序中拨打手机电话和长按加微信客服好友(完整代码示例)

    UniApp实现微信小程序中拨打手机电话和长按加微信客服好友(完整代码示例)

    2024年02月11日
    浏览(63)
  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2023年04月15日
    浏览(73)
  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月05日
    浏览(90)
  • WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月11日
    浏览(69)
  • 微信小程序uni-app

    小程序 是一种不需要下载、安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下就能打开应用,也实现了用完即走的理念,用户不用安装太多应用,应用随处可用,但又无须安装卸载。 微信开发文档 1、工作原理 网页开发,渲染线程和脚本是互斥的

    2024年02月10日
    浏览(119)
  • uniapp微信小程序引入第三方广告插件

      以Slime广告插件为例。 一、微信小程序后台申请相关插件   二、manifest.json文件 三、pages.json文件 四、要使用该插件的vue页面 引用插件后就可以使用插件的相关方法。 附:Slime插件文档 Slime | 小程序插件 | 微信公众平台

    2024年02月11日
    浏览(67)
  • 微信小程序授权(uni-app)

    概述 为了避免重复开发,自己封装了一个通用用户授权回调方法,只需要传入需要授权的scope,权限中文描述、回调函数,就可以实现一整套小程序是否授权、打开授权设置,调用后续操作函数的工作 功能 可以根据自己的实际应用进行微调 目前使用的uni-app版本,可以根据自

    2024年02月16日
    浏览(80)
  • uni-app(微信小程序)获取当前位置uni.getLocation

     1、微信公众平台  开发  开发管理   2、开通之后到项目文件    3、下载腾讯地图插件并引入到文件中    

    2024年02月11日
    浏览(62)
  • uni-app微信小程序使用echarts

    前言:本来是使用的ucharts,但因为无法监听图例点击交互,满足不了需求,所以只能放弃。 首先,下载echart组件。可以先随便建个文件夹,然后 npm init。接着下载依赖 然后找到 node_modulesmpvue-echarts下的文件,如图 只留下src,其他的删掉(没有用到)。然后复制 mpvue-echart

    2024年02月10日
    浏览(68)
  • 【uni-app微信小程序】实现支付功能

    实现微信支付功能需要在小程序后台配置支付相关信息,并且在前端代码中调用微信支付API进行支付操作。好的, uni-app微信小程序实现支付功能整体流程 大致如下: 注册微信公众平台,并完成开发者资质认证; 在微信商户平台注册商户账号,并完成商户资质认证; 在商户

    2024年02月13日
    浏览(95)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包