微信小程序图片流动动画效果(附代码,图)
2022/3/18 22:28:04
本文主要是介绍微信小程序图片流动动画效果(附代码,图),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
微信小程序图片流动动画效果
最近也是在做一款小程序,玩一玩。
废话不多说,先上动态效果:
<iframe allowfullscreen="true" data-mediaembed="bilibili" id="RCi4w5b1-1647611334991" src="https://player.bilibili.com/player.html?aid=937273408"></iframe>流动效果
要实现这样的效果可以利用css,但微信小程序这里有个swiper组件可以起到类似的效果。下面就一起来康康。
首先,了解swiper组件的话要先到 微信开放文档里面找,这里我只列举上面示例用到的属性,其它的属性可以自己去摸索摸索。
如下图:
interval和duration最好调成一样的时间,要注意它们都有默认的值不调会出问题
autoplay自动播放
circular通俗来讲就是一直往一个方向动
还有就是:
easing-function='linear’要流畅当然用线性
注意!
swiper组件是有默认高度的,高度可以自己去改,这里是作为背景动态图来使用,所以我从js中获取手机高度信息,然后直接用,就可以全屏了。
还有一点,image中的style要加上width属性,本人亲测,这里动态会根据图片的大小,太小会连接不少,铺满即可。
wxml
<swiper style="height: {{Height}}px;" autoplay='true' circular='true' interval='2000' duration='2000' easing-function='linear'> <swiper-item wx:for="{{photolist}}" wx:key="key" wx:for-item="item"> <image style="height: {{Height}}px; width: 100%;" src="{{item.pic}}"></image> </swiper-item> </swiper>
这里呢用不着wxss,当然大家可根据自己的需求进行修改
js
Page({ /** * 页面的初始数据 */ data: { photolist: [{ pic: "https://img0.baidu.com/it/u=2048950528,3999139989&fm=26&fmt=auto&gp=0.jpg", }, { pic: "https://img0.baidu.com/it/u=2048950528,3999139989&fm=26&fmt=auto&gp=0.jpg", }, ], Height: {} //手机高度 }, /** * 生命周期函数--监听页面加载 */ onl oad: function (options) { var that = this that.setData({ Height: getApp().globalData.windowHeight }) }, })
这里photolist中的图是网上找的,两张一样,是为了有不断循环的效果。(根据个人需求而不同)
总结:微信小程序开发文档上都有所有你需要的东西,只是你会不会认真去看找而已。
很久没更新了,主要是比较忙。
这篇关于微信小程序图片流动动画效果(附代码,图)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-20微信小程序开发入门指南
- 2024-12-20小程序 createCameraContext() 怎么实现识别条形码功能?-icode9专业技术文章分享
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享