微信小程序开屏动画组件封装以及使用示例

思路

首先调用wx.hideTabbar() 隐藏微信小程序的tabbar
封装一个开屏动画组件，在几秒后自动关闭
在关闭的时候调用 wx.showTabber();来使tabbar显示出来

效果展示

git仓库地址

https://github.com/MrITzhongzi/small_routine_components.git

示例目录结构

核心代码

kaiping_component.wxml

<view class="kaiping_box"><image src="{{imagepath}}" mode="aspectFill"></image><view class="kaiping-header"><view class="kaiping-btn" bindtap="skipAnimation">跳过 {{second}}s</view></view>
</view>

kaiping_component.js

// component/kaiping_component.js
Component({/*** 组件的属性列表*/properties: {imagepath: {type: String},second: {type: Number}},/*** 组件的初始数据*/data: {timer: null},lifetimes: {created: function () {},attached: function () {let secondTime = this.data.second;let that = this;const timer = setInterval(function () {let nowSecond = --that.data.second;if (nowSecond <= 0) {clearInterval(timer);that.hideKaiping();}console.log(nowSecond);that.setData({second: nowSecond});}, 1000);this.setData({timer: timer});}},/*** 组件的方法列表*/methods: {hideKaiping: function () {this.triggerEvent("hide");},skipAnimation: function () {this.hideKaiping();let timer = this.data.timer;if (timer) {clearInterval(timer);}}}
})

kaiping_component.wxss

/* component/kaiping_component.wxss */.kaiping_box {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 2;
}.kaiping_box image {width: 100%;height: 100%;
}.kaiping-header {position: absolute;top: 100rpx;left: 5px;width: 96%;display: flex;
}
.kaiping-second, .kaiping-btn {font-size: 12px;color: white;border: 1px solid white;padding: 1px 6px;border-radius: 10px;
}

kaiping_component.json

{"component": true,"usingComponents": {}
}

使用示例

index.wxml

<view class="intro">欢迎使用代码片段，可在控制台查看代码片段的说明和文档</view><kaiping-component wx:if="{{kaipingFlag}}"
imagepath="/image/image.png"
second="{{10}}"
bind:hide="onMyEvent"   ></kaiping-component>

index.json

{"usingComponents": {"kaiping-component": "/component/kaiping_component"},"navigationStyle": "custom"
}

index.js

const app = getApp()Page({data: {kaipingFlag: true},onLoad: function () {wx.hideTabBar();},onMyEvent: function () {console.log("close");this.setData({kaipingFlag: false});wx.showTabBar();}
})

微信小程序开屏动画组件封装以及使用示例相关推荐

php微信小程序海报,微信小程序海报生成组件封装
每个小程序成型后,一般都会选择生成带菊花码的海报分享出去来吸引更多的流量.下面来介绍下他的一种实现方式吧原理:主要利用微信小程序强大的Canvas API来合成,生成后可用wx.canvasToTe ...
微信小程序图片验证组件封装
一.图片滑动验证组件延迟页面展示或者延缓并发处理.当滑动图片到空缺位置后执行加载或者验证. 二.封装源码 1.wxml <!--遮罩层,弹框图片背景,滑动框图片比例:16:9 1.777777 ...
微信小程序省市县组件封装，处理出现空白bug
官方的省市县组件官方提供了省市县的picker,mode=region 即为省市区选择器,官网有详细解说,并提供demo.官网说明 <view class="section" ...
微信小程序录音+播放组件封装(源码）
展示长按录音松开结束录音点击播放再次点击暂停再次点击继续播放展示效果: 录音功能录音功能(手指按下开始录音手指松开结束录音): 使用wx原生录音功能在 component 外新建 wx ...
微信小程序多选组件封装
项目需要,封装了一个多选组件,有参考其他文章,出处忘记了,在那基础上以项目需求为目标做改进,以下是效果图. 效果图代码位置首先是弹出框的代码(multipleSelection) wxml < ...
小程序loding动画组件封装及源码
效果图如下使用方法示例 wxml <progress percentage="{{percentage}}" wx:if="{{lodingType != ''} ...
微信小程序弹框组件封装
popup组件,居中和底部弹起 1.popup.wxml <view class="popup-common fade-in-linear-enter-active {{ flag ? ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...

微信小程序开屏动画组件封装以及使用示例

思路

效果展示

git仓库地址

git仓库地址

示例目录结构

核心代码

使用示例

微信小程序开屏动画组件封装以及使用示例相关推荐

最新文章

热门文章