一酗宋、swiper組件
例 : <swiper indicator-dots autoplay></swiper>
●上述代碼表示希望實(shí)現(xiàn)一個帶有指示點(diǎn)的滑塊視圖容器 , 并且需要自動播放 , <swiper>標(biāo)簽必須配合<swiper-item>組件一起使用 , 該組件是用于切換的具體內(nèi)容
●在<swiper-item>中可以包含文本或圖片 , 其寬积仗、高默認(rèn)為100% , 需要注意的是 , <swiper>組件可以直接放置的只有<swiper-item>組件 , 否則會導(dǎo)致未定義的行為
●其中只可以放置swiper-item組件 , 否則會導(dǎo)致未定義的行為
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| indicator-dots | Boolean | false | 是否顯示面板指示 |
| autoplay | Boolean | false | 是否自動切換 |
| current | Number | 0 | 當(dāng)前所在頁面的index |
| interval | Number | 5000 | 自動切換時間間隔 |
| duration | Number | 1000 | 滑動動畫時長 |
| bindchange | EventHandle | current改變時會觸發(fā)change事件,event.detail={current:current} |
wxml文件
輪播圖外層為swiper
每個輪播項(xiàng)為swiper-item
swiper標(biāo)簽 存在默認(rèn)樣式
1. width 100%
2. height 150px
3. swiper 高度無法實(shí)現(xiàn)內(nèi)容撐開先找出來原圖寬高比例 給swiper定寬高
原圖寬高 768 * 300 px
swiper寬度 / swiper高度 = 原圖寬度 / 原圖高度
swiper高度 = swiper寬度 * 原圖高度 / 原圖寬度
swiper高度 : height100vw * 300 / 768自動輪播 autoplay
修改自動切換時間 interval
自動循環(huán)輪播 circular
是否顯示指示點(diǎn) indicator-dots
指示點(diǎn)未選中顏色 indicator-color
-
指示點(diǎn)選中顏色 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 的哪一項(xiàng)蜕猫，從左邊算起 |
| text | string | 否 | tab 上的按鈕文字 |
| iconPath | string | 否 | 圖片路徑寂曹，icon 大小限制為 40kb，建議尺寸為 81px * 81px回右，當(dāng) postion 為 top 時稀颁，此參數(shù)無效 |
| selectedIconPath | string | 否 | 選中時的圖片路徑，icon 大小限制為 40kb楣黍，建議尺寸為 81px * 81px 匾灶，當(dāng) postion 為 top 時，此參數(shù)無效 |
| success | function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
| fail | function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
| complete | function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功租漂、失敗都會執(zhí)行） |
- 切換tabBar頁面
小程序使用wx.switchTab(OBJECT)跳轉(zhuǎn)到指定tabBat頁面,并關(guān)閉其他頁面
| 屬性名 | 類型 | 必填 | 說明 |
|---|---|---|---|
| url | String | 是 | 需要跳轉(zhuǎn)的tabBar頁面的路徑(需要在app.json的tabBar字段定義的頁面) , 路徑后不能帶參數(shù) |
| success() | Function | 否 | 接口調(diào)成功的回調(diào)函數(shù) |
| fail() | Function | 否 | 接口調(diào)成功的回調(diào)函數(shù) |
| complete() | Function | 否 | 接口調(diào)成功的回調(diào)函數(shù) |
