微信小程序图片轮播及滚动视图.docxVIP

微信小程序图片轮播及滚动视图移动端常用效果图片轮播及数据列表已被小程序封装成了组件，这里和大家分享一下如何使用。Scroll-view 可滚动视图区域Swiper 图片轮播容器Navigator 页面链接的3种方式scroll-view属性说明如下:属性名类型默认值说明scroll-xBooleanfalse允许横向滚动scroll-yBooleanfalse允许纵向滚动upper-thresholdNumber50距顶部/左边多远时（单位px），触发 scrolltoupper 事件lower-thresholdNumber50距底部/右边多远时（单位px），触发 scrolltolower 事件scroll-topNumber设置竖向滚动条位置scroll-leftNumber设置横向滚动条位置scroll-into-viewString值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部bindscrolltoupperEventHandle滚动到顶部/左边，会触发 scrolltoupper 事件bindscrolltolowerEventHandle滚动到底部/右边，会触发 scrolltolower 事件bindscrollEventHandle滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}使用竖向滚动时，需要给scroll-view/一个固定高度，通过 WXSS 设置 height。示例代码：效果图:注意点:tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件tip: scroll-into-view 的优先级高于 scroll-toptip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefreshtip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部swiper属性说明:性名类型默认值说明indicator-dotsBooleanfalse是否显示面板指示点indicator-colorColorrgba(0, 0, 0, .3)指示点颜色（这个属性目前暂未启用）indicator-active-colorColor#000000当前选中的指示点颜色（这个属性目前暂未启用）autoplayBooleanfalse是否自动切换currentNumber0当前所在页面的 indexintervalNumber5000自动切换时间间隔durationNumber500滑动动画时长circularBooleanfalse是否采用衔接滑动bindchangeEventHandlecurrent 改变时会触发 change 事件，event.detail = {current: current}注意：其中只可放置swiper-item/组件，否则会导致未定义的行为。swiper-item仅可放置在swiper/组件中，宽高自动设置为100%。代码如下:JS代码:// pages/test1/test1.jsPage({ data:{ wxTitle:微信程序, alertInfo:登录成功了, isShow:false, imgUrls: [ /timg?imagequality=80size=b9999_10000sec=1489225534462di=009148115f436101d6377305b2f660efimgtype=0src=http%3A%2F%2F%2Fpsd%2Fwangye%2F212_114_bce.jpg,/imagestooopen_sy_143912755726.jpg, /imagestooopen_sy_175866434296.jpg, /imagestooopen_sy_175833047715.jpg ], indicatorDots: true, autoplay: true, interval: 5000, duration: 1000 }, changeIndicatorDots: function(e) { this.setData({ indicatorDots: !this.data.indicatorDots }) }, cha