轮播图:swiper滑块视图容器。
1.编写页面结构
pages/index/index.wxml
<!--index.wxml--> <view> <swiper indicator-dots={{indicatorDots}} autoplay={{autoplay}} interval={{interval}} duration={{duration}}> <block wx:for={{imgurls}}> <swiper-item> <navigator url={{item.link}} hover-class=navigator-hover> <image src={{item.url}} class=slide-image width=355 height=150/> </navigator> </swiper-item> </block> </swiper> </view>
注意:不要在view中加css设置:display: flex;否则效果呈现不了
2.设置数据
了解属性,方可设置
swiper-item仅可放置在<swiper/>
组件中,宽高自动设置为100%。
在index.js中设置数据
//index.js //获取应用实例 var app = getApp() Page({ data: { imgurls: [ { link:'/pages/index/index', url:'../uploads/a01.jpg' },{ link:'/pages/logs/logs', url:'../uploads/a02.jpg' },{ link:'/pages/user/user', url:'../uploads/a03.jpg' } ], indicatorDots: true, autoplay: true, interval: 5000, duration: 1000 } })
3.效果
相关推荐:
react轮播图组件react-slider-light详解
原文地址:https://www.jb51.cc/weapp/1202490.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。