Tag: IDT Block sees cat center pre interval pen nbsp
There are a few days fast New year, here in advance to wish you happy!
It's okay. Study the small program, want to play the whole carousel, and then start to look at the document HTTPS://MP.WEIXIN.QQ.COM/DEBUG/WXADOC/DEV/COMPONENT/SWIPER.HTML?T=20161107 (official address)
Sample code
Index.wxml
<view class= "Container" >
<swiper indicator-dots="{{indicatorDots}}"
autoplay=' {{autoplay}} 'Interval=' {{interval}} 'duration="{{duration}}" ><BlockWx:for="{{imgurls}}" ><Swiper-item><ImageSrc=' {{Item}} 'class="Slide-image"Width="355"height="/>"</Swiper-item></Block></Swiper><buttonbindtap="Changeindicatordots" > Indicator-dots</Button><Button bindtap="Changeautoplay" > AutoPlay </button><slider bindchange= "Intervalchange" show-value min=" max="/> interval<slider bindchange="Durationchange" show-value min="$" max="10000"/> Duration
</view>
Index.js
Page ({data: {imgurls: [' Http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg ',' Http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg ',' Http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg '], Indicatordots:False, AutoPlay:False, Interval:Duration:1000}, Changeindicatordots: function (e) {this.setdata ({indicatordots:!this.data.indicatordots}"}, Changeautoplay: function (e) {this.setdata ({autoplay:! This.data.autoplay})}, Intervalchange: function (e) {this.setdata ({Interval:e.detail.value})}, DurationChange: Span class= "hljs-function" >function (e) { this.setdata ({Duration:e.detail.value})})
The code is pasted, start saving run! Hey? Where's the picture? Then the initial suspicion is not the image address can not be used, decisive test, no problem!
Finally know the original is index.wxml in the container app.wxss make ghost align-items:center; This sentence deleted, save run. That's when we see the results.
About the applet swiper do not show the pictures of those things