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

微信小程序图片轮播及滚动视图移动端常用效果图片轮播及数据列表已被小程序封装成了组件，这里和大家分享一下如何使用。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:[],indicatorDots:true,autoplay:true,interval:5000,duration:1000},changeIndicatorDots:function(e){this.setData({})},changeAutoplay:function(e){this.setData({})},intervalChange:function(e){this.setData({})},durationChange:function(e){this.setData({})}})效果如如下:Navgator页面链接属性说明:属性名类型默认值说明urlString应用内的跳转链接redirectBooleanfalse翻开方式为页面重定向，对应wx.redirectTo〔将被废弃，推荐使用open-type〕open-typeStringnavigate可选值'navigate'、'redirect'、'switchTab'，对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能hover-classStringnavigator-hover指定点击时的样式类，当hover-class="none"时，没有点击态效果hover-start-timeNumber50按住后多久出现点击态，单位毫秒hover-stay-timeNumber600手指松开后点击态保存时间，单位毫秒navigator导航的问题导航分三种a.open-type="navigate"翻开新界面b.open-type="redirect"在本界面中翻开新界面c.open-type="switchTab"控制tab页之间的切换注意：1.所有需要跳转链接的界面必须在app.json中注册