微信小程序 - 5.組件(swiper、tabBar)

一酗宋、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文件

  1. 輪播圖外層為swiper

  2. 每個輪播項(xiàng)為swiper-item

  3. swiper標(biāo)簽 存在默認(rèn)樣式
    1. width 100%
    2. height 150px
    3. swiper 高度無法實(shí)現(xiàn)內(nèi)容撐開

  4. 先找出來原圖寬高比例 給swiper定寬高
    原圖寬高 768 * 300 px
    swiper寬度 / swiper高度 = 原圖寬度 / 原圖高度
    swiper高度 = swiper寬度 * 原圖高度 / 原圖寬度
    swiper高度 : height100vw * 300 / 768

  5. 自動輪播 autoplay

  6. 修改自動切換時間 interval

  7. 自動循環(huán)輪播 circular

  8. 是否顯示指示點(diǎn) indicator-dots

  9. 指示點(diǎn)未選中顏色 indicator-color

  10. 指示點(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

  1. 使用格式
    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"
                }]
           }
     }
    
  2. 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í)行)
  1. 切換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ù)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末阶女,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子哩治,更是在濱河造成了極大的恐慌秃踩,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件业筏,死亡現(xiàn)場離奇詭異憔杨,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)蒜胖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進(jìn)店門消别,熙熙樓的掌柜王于貴愁眉苦臉地迎上來抛蚤,“玉大人,你說我怎么就攤上這事寻狂∷昃” “怎么了?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵蛇券,是天一觀的道長缀壤。 經(jīng)常有香客問我,道長纠亚,這世上最難降的妖魔是什么塘慕? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮蒂胞,結(jié)果婚禮上苍糠,老公的妹妹穿的比我還像新娘。我一直安慰自己啤誊,他們只是感情好岳瞭,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蚊锹,像睡著了一般瞳筏。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上牡昆,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天姚炕,我揣著相機(jī)與錄音,去河邊找鬼丢烘。 笑死柱宦,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的播瞳。 我是一名探鬼主播掸刊,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼赢乓!你這毒婦竟也來了忧侧?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤牌芋,失蹤者是張志新(化名)和其女友劉穎蚓炬,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體躺屁,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡肯夏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片驯击。...
    茶點(diǎn)故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡烁兰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出余耽,到底是詐尸還是另有隱情,我是刑警寧澤苹熏,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布碟贾,位于F島的核電站,受9級特大地震影響轨域,放射性物質(zhì)發(fā)生泄漏袱耽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一干发、第九天 我趴在偏房一處隱蔽的房頂上張望朱巨。 院中可真熱鬧,春花似錦枉长、人聲如沸冀续。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽洪唐。三九已至,卻和暖如春吼蚁,著一層夾襖步出監(jiān)牢的瞬間凭需,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工肝匆, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留粒蜈,地道東北人。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓旗国,卻偏偏與公主長得像枯怖,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子能曾,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評論 2 361

推薦閱讀更多精彩內(nèi)容