短视频app搭建,uniapp动画实现图片循环渐隐渐显
时间:2021-07-27
本文章向大家介绍短视频app搭建,uniapp动画实现图片循环渐隐渐显,主要包括短视频app搭建,uniapp动画实现图片循环渐隐渐显使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
短视频app搭建,uniapp动画实现图片循环渐隐渐显实现的相关代码
1. HTML
```handlebars <template> <view class="vipCard_block"> <view class="more" @click="toGymCard">查看更多 ></view> <view class="vipBox" @tap="bgImgTap(num)"> <view :animation="num==2?showpic:hidepic" class="cardBgPic"> <text class="cardName">储值卡</text> <text class="cardTitle">活动主题活动主题</text> <text class="cardIntro">会员卡简介</text> </view> <view :animation="num==1?showpic:hidepic" class="cardBgPic ciCard"> <text class="cardName">次数卡</text> <text class="cardTitle">活动主题活动主题</text> <text class="cardIntro">会员卡简介</text> </view> <view :animation="num==0?showpic:hidepic" class="cardBgPic qiCard"> <text class="cardName">期限卡</text> <text class="cardTitle">活动主题活动主题</text> <text class="cardIntro">会员卡简介</text> </view> </view> </view> </template> ```
2. js
```handlebars <script> export default { data() { return { num: 0,//显示vip卡类型标识 picmaxnum:3, //卡种类数 animation:'', showpic:'', hidepic:'' } }, onLoad() { this.changePic() }, methods: { changePic() { //轮播方法 clearInterval(this.setInter1);//先将已有的计时器清除 var animation= uni.createAnimation({ timingFunction: 'ease', }) //创建一个动画实例 this.animation = animation this.setInter1=setInterval(function(){//循环 this.num++; if(this.num==this.picmaxnum){ this.num=0; } //淡入 animation.opacity(1).step({duration:3000,delay:1000}) //描述动画 this.showpic=animation.export() //输出动画 //淡出 animation.opacity(0).step({duration:3000,delay:1000}) this.hidepic=animation.export() }.bind(this),4000) }, bgImgTap(num){ console.log(num, '我被点了') uni.navigateTo({ url:'../gym/card/detail' }) if(num==0){ // uni.switchTab({ // url:'../a' // }) }else{ //点击不同的图片,对应不同的需求 } }, } } </script> ```
3. CSS
```handlebars <style lang="less" scoped> .vipCard_block { height: 225rpx; border-radius: 24rpx; background-color: #fff; padding: 23rpx; margin-top: 30rpx; .more { float: right; z-index: 10; position: relative; } .vipBox { width: 648rpx; height: 134rpx; position: relative; } .qiCard { background-image: url('https:example')!important; } .ciCard { background-image: url('https:example')!important; } .cardBgPic { width: 637rpx; height: 189rpx; background-image: url('https:example'); background-size:637rpx 189rpx; position: absolute; top: 0; z-index:2 ; .cardName { color: #F0F3F7; font-size:26rpx; position: absolute; top: 58rpx; left: 125rpx; } .cardTitle { font-size:32rpx; color: #fff; position: absolute; top: 65rpx; left: 320rpx; } .cardIntro { font-size:24rpx; color: #fff; position: absolute; top: 115rpx; left: 318rpx; } } } </style> ```
以上就是 短视频app搭建,uniapp动画实现图片循环渐隐渐显实现的相关代码,更多内容欢迎关注之后的文章
原文地址:https://www.cnblogs.com/yunbaomengnan/p/15065666.html
- 谈谈分布式事务(Distributed Transaction)[共5篇]
- SQLXML初体验:用XML代替T-SQL来操作数据库
- 自己动手写可视化软件(代码已开源)
- 探秘Tomcat——连接篇
- 微信小游戏正式上线,H5游戏迎新机遇
- WCF技术剖析之三十:一个很有用的WCF调用编程技巧[上篇]
- WCF技术剖析之十八:消息契约(Message Contract)和基于消息契约的序列化
- WCF技术剖析之三十:一个很有用的WCF调用编程技巧[上篇]
- 成为更好程序员的8种途径
- 探秘Tomcat——启动篇
- ai量化系统架构的思考
- 探秘Tomcat——连接器和容器的优雅启动
- 谈谈分布式事务之三: System.Transactions事务详解[上篇]
- WCF技术剖析之十九:深度剖析消息编码(Encoding)实现(上篇)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Nmap NSE 库分析 >>> nmap
- 深入讲解Logback
- python pty & magic | 加固shell
- 通达OA伪造SESSION | Nmap脚本
- Postman使用完全指南
- meterpreter shell | 加固shell
- R语言绘图:复杂散点图绘制
- windows下部署sentinel模式的Redis主从集群
- tmux | 加固shell
- Windows下离线部署Redis主从集群
- SSH 后门 | Nmap 脚本
- 【Tomcat源码解析】第二章:不用死记硬背记住Tomcat整体架构
- 计划任务后门 | Linux 后门系列
- alias后门 | Linux 后门系列
- vim 后门 | Linux 后门系列