小程序开发文档针对底部导航,滑块视图实现,以及调用豆瓣电影api等做个一个整理文档,供大家参考。
1、底部的tabBar
可设置的属性有color、selectedColor、borderStyle、backgroundColor、list至少2个,最多5个(其属性有pagePath、text、iconPath、selectedIconPath等)
"tabBar": { "color":"#dddddd", "selectedColor":"#3cc51f", "borderStyle":"black", "backgroundColor":"#2B2B2B", "list": [ { "pagePath": "pages/movie/movie", "text": "影院热映", "iconPath": "assets/img/dy-1.png", "selectedIconPath": "assets/img/dy.png" }, { "pagePath": "pages/recommend/recommend", "text": "电影推荐", "iconPath": "assets/img/tj-1.png", "selectedIconPath": "assets/img/tj.png" }, { "pagePath": "pages/search/search", "text": "查询电影", "iconPath": "assets/img/search-1.png", "selectedIconPath": "assets/img/search.png" } ] },
2、 滑块视图容器 swiper
swiper
滑块视图容器。
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
indicator-dots | Boolean | false | 是否显示面板指示点 | |
indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 | 1.1.0 |
indicator-active-color | Color | #000000 | 当前选中的指示点颜色 | 1.1.0 |
autoplay | Boolean | false | 是否自动切换 | |
current | Number | 0 | 当前所在页面的 index | |
interval | Number | 5000 | 自动切换时间间隔 | |
duration | Number | 500 | 滑动动画时长 | |
circular | Boolean | false | 是否采用衔接滑动 | |
vertical | Boolean | false | 滑动方向是否为纵向 | |
bindchange | EventHandle | current 改变时会触发 change 事件,event.detail = {current: current, source: source} |
从公共库v1.4.0开始, change 事件返回 detail 中包含一个 source 字段,表示导致变更的原因,可能值如下:
- autoplay 自动播放导致swiper变化;
- touch 用户划动引起swiper变化;
- 其他原因将用空字符串表示。
注意 :其中只可放置
swiper-item
仅可放置在
示例代码:
swiper-item> block> swiper>
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: 5000, duration: 1000 }, changeIndicatorDots: function(e) { tShopfas.setData({ indicatorDots: !tShopfas.data.indicatorDots }) }, changeAutoplay: function(e) { tShopfas.setData({ autoplay: !tShopfas.data.autoplay }) }, intervalChange: function(e) { tShopfas.setData({ interval: e.detail.value }) }, durationChange: function(e) { tShopfas.setData({ duration: e.detail.value }) } })
详情请查看:小程序滑块视图容器swiper
3、豆瓣API
第二部分:如何开通一个小商店
- 第 1 页【小程序开发】微信小程序开发文档相关记录
- 第 2 页【小程序开发文档】 小程序调用豆瓣电影api
- 第 3 页【小程序开发文档】 小程序加载进度条的实现
<以上资讯仅供参考,如果您需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询加速度产品经理获取方案和报价>
****更多行业产品开发方案,请关注jsudo加速度 https://www.jsudo.com***
【加速度jsudo(www.jsudo.com)】是国内知名企业数字化建设提供商,为企业提供电商平台搭建(多种模式电商平台搭建:B2B/B2B2C/B2C/O2O/新零售等)、智慧园区建设、数字化营销、人才外包等服务,点击这里查看了解更多行业解决方案。