短视频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动画实现图片循环渐隐渐显实现的相关代码,更多内容欢迎关注之后的文章