E企盈营销工具技术服务商 热线:4006-838-530

小程序swiper,微信小程序组件之swiper

E企盈直播平台营销卖货系统

大家看到许多网页的首页面都会有图片的轮播,图片轮播:既能通过图片增加整个页面的美观程度,又能让客户一眼看出网页想要表达的内容。那么,今天我们就通过swiper实现图片的轮播效果,简单又好看。/wxml/swiperindicator={{是否显示面板指示点}}indicator-color={{指示点颜色}}indicator-active-color={{当前选中的指示点颜色}}autoplay={{是否自动切换}}current={{当前所在滑块的index}}current-item-id={{当前所在滑块的item-id,不能与current被同时指定}}interval={{自动切换时间间隔}}duration={{滑动动画时长}}circular={{是否采用衔接滑动}}vertical={{滑动方向是否为纵向}}previous-margin={{前边距,可用于露出前一项的一小部分,接受px和rpx值}}next-margin={{后边距,可用于露出后一项的一小部分,接受px和rpx值}}display-multiple-items={{同时显示的滑块数量}}skip-hidden-item-layout={{是否跳过未显示的滑块布局,设为true可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息}}bindchange={{current改变时会触发change事件,event.detail={current:current,source:source}}}bindanimationfinish={{动画结束时会触发animationfinish事件,event.detail={current:current,source:source}}}/swiper/.js/page({data:{//默认值indicatordots:false,indicatorcolor:rgba(0,0,0,.3),indicatoractivecolor:#000000,autoplay:false,current:0,currentitemid:””,interval:5000,duration:500,circular:false,vertical:false,previousmargin:0px,nextmargin:0px,displaymultipleitems:1,skiphiddenitemlayout:false}})下面举一个小例子,只用了上面的部分属性。!–index.wxml–swiperindicator-dots=”{{indicatorDots}}”autoplay=”{{autoplay}}”circular=”{{circular}}”interval=”{{interval}}”duration=”{{duration}}”blockwx:for=”{{imgUrls}}”swiper-itemimagesrc=”{{item}}”//swiper-item/block/swiper//index.jsPage({data:{imgUrls:[‘../images/tu1.jpg’,’../images/tu2.jpg’,’../images/tu3.jpg’],indicatorDots:false,autoplay:true,circular:true,interval:5000,duration:1000}})效果图如下:这是一个自动切换和衔接滑动的图片轮播,按照读者自己的需求,可以加上上述的其他属性。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序swiper,微信小程序组件之swiper
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏