微信小程序，前端大梦想（四）

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

移动端常用效果图片轮播及数据列表已被小程序封装成了组件，这里和大家分享一下如何使用。

• Scroll-view   可滚动视图区域
• Swiper       图片轮播容器
• Navigator    页面链接的3种方式

• scroll-view

属性说明如下:

 

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。示例代码：









     效果图:





     注意点:

1. tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
2. tip: scroll-into-view 的优先级高于 scroll-top
3. tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
4. tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

二、swiper

属性说明:

 

       注意：其中只可放置组件，否则会导致未定义的行为。

       swiper-item

仅可放置在组件中，宽高自动设置为100%。



       代码如下:





      JS代码:

1. // pages/test1/test1.js
2. Page({
3. data:{
4. wxTitle:"微信程序",
5. alertInfo:"登录成功了",
6. isShow:false,
7. imgUrls: [
8. "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489225534462&di=009148115f436101d6377305b2f660ef&imgtype=0&src=http%3A%2F%2Fimg.sucaifengbao.com%2Fpsd%2Fwangye%2F212_114_bce.jpg",'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
9. 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
10. 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
11. ],
12. indicatorDots: true,
13. autoplay: true,
14. interval: 5000,
15. duration: 1000
16. },
17. changeIndicatorDots: function(e) {
18. this.setData({
19. indicatorDots: !this.data.indicatorDots
20. })
21. },
22. changeAutoplay: function(e) {
23. this.setData({
24. autoplay: !this.data.autoplay
25. })
26. },
27. intervalChange: function(e) {
28. this.setData({
29. interval: e.detail.value
30. })
31. },
32. durationChange: function(e) {
33. this.setData({
34. duration: e.detail.value
35. })
36. }
37. })

效果如下:

• Navgator页面链接

属性说明:

 

navigator 导航的问题 导航分三种



     a.open-type="navigate" 打开新界面

     b.open-type="redirect" 在本界面中打开新界面

     c.open-type="switchTab" 控制tab页之间的切换



     注意：



     1. 所有需要跳转链接的界面必须在app.json中注册

     2. a, b只能连接非tabBar中注册占用的页面，不能打开url="../index/index",因为pages/index/index界面是tab页

     3. c只能打开app.json中注册过的tab页，也就是被tabBar注册的界面

 

     代码如下: