一、swiper组件
例 : <swiper indicator-dots autoplay></swiper>
●上述代码表示希望实现一个带有指示点的滑块视图容器 , 并且需要自动播放 , <swiper>标签必须配合<swiper-item>组件一起使用 , 该组件是用于切换的具体内容
●在<swiper-item>中可以包含文本或图片 , 其宽、高默认为100% , 需要注意的是 , <swiper>组件可以直接放置的只有<swiper-item>组件 , 否则会导致未定义的行为
●其中只可以放置swiper-item组件 , 否则会导致未定义的行为
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| indicator-dots | Boolean | false | 是否显示面板指示 |
| autoplay | Boolean | false | 是否自动切换 |
| current | Number | 0 | 当前所在页面的index |
| interval | Number | 5000 | 自动切换时间间隔 |
| duration | Number | 1000 | 滑动动画时长 |
| bindchange | EventHandle | current改变时会触发change事件,event.detail={current:current} |
wxml文件
轮播图外层为swiper
每个轮播项为swiper-item
swiper标签 存在默认样式
1. width 100%
2. height 150px
3. swiper 高度无法实现内容撑开先找出来原图宽高比例 给swiper定宽高
原图宽高 768 * 300 px
swiper宽度 / swiper高度 = 原图宽度 / 原图高度
swiper高度 = swiper宽度 * 原图高度 / 原图宽度
swiper高度 : height100vw * 300 / 768自动轮播 autoplay
修改自动切换时间 interval
自动循环轮播 circular
是否显示指示点 indicator-dots
指示点未选中颜色 indicator-color
-
指示点选中颜色 indicator-active-color
<swiper indicator-dots="true" autoplay="true" interval="1500" duration="500"> <view wx:for="{{swiperImg}}"> <swiper-item> <image class="img" src="{{item.src}}"></image> </swiper-item> </view> </swiper>
JS文件
data: {
swiperImg:[
{ src: '/images/ic_main_my_s.png' },
{ src: '/images/ic_main_my.png' },
{ src: '/images/ic_main_home_page.png' }
]
},
二、tabBar
-
使用格式
app.json文件中{ "tabBar": { "color": "#000000", "selectedColor": "#328EEB", "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/ic_main_home_page.png", "selectedIconPath": "images/ic_main_home_page_s.png" }, { "pagePath": "pages/my/my", "text": "我的", "iconPath": "images/ic_main_my.png", "selectedIconPath": "images/ic_main_my_s.png" }] } } https://developers.weixin.qq.com/miniprogram/dev/api/ui/tab-bar/wx.setTabBarItem.html
| 属性名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| index | number | 是 | tabBar 的哪一项，从左边算起 |
| text | string | 否 | tab 上的按钮文字 |
| iconPath | string | 否 | 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效 |
| selectedIconPath | string | 否 | 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效 |
| success | function | 否 | 接口调用成功的回调函数 |
| fail | function | 否 | 接口调用失败的回调函数 |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
- 切换tabBar页面
小程序使用wx.switchTab(OBJECT)跳转到指定tabBat页面,并关闭其他页面
| 属性名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | String | 是 | 需要跳转的tabBar页面的路径(需要在app.json的tabBar字段定义的页面) , 路径后不能带参数 |
| success() | Function | 否 | 接口调成功的回调函数 |
| fail() | Function | 否 | 接口调成功的回调函数 |
| complete() | Function | 否 | 接口调成功的回调函数 |
