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

一、swiper组件

例 : <swiper indicator-dots autoplay></swiper>
●上述代码表示希望实现一个带有指示点的滑块视图容器 , 并且需要自动播放 , <swiper>标签必须配合<swiper-item>组件一起使用 , 该组件是用于切换的具体内容
●在<swiper-item>中可以包含文本或图片 , 其宽、高默认为100% , 需要注意的是 , <swiper>组件可以直接放置的只有<swiper-item>组件 , 否则会导致未定义的行为
●其中只可以放置swiper-item组件 , 否则会导致未定义的行为

wxml文件

1. 轮播图外层为swiper

2. 每个轮播项为swiper-item

3. swiper标签 存在默认样式
   1. width 100%
   2. height 150px
   3. swiper 高度无法实现内容撑开

4. 先找出来原图宽高比例 给swiper定宽高
   原图宽高 768 * 300 px
   swiper宽度 / swiper高度 = 原图宽度 / 原图高度
   swiper高度 = swiper宽度 * 原图高度 / 原图宽度
   swiper高度 : height100vw * 300 / 768

5. 自动轮播 autoplay

6. 修改自动切换时间 interval

7. 自动循环轮播 circular

8. 是否显示指示点 indicator-dots

9. 指示点未选中颜色 indicator-color

10. 指示点选中颜色 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

3. 切换tabBar页面
   小程序使用wx.switchTab(OBJECT)跳转到指定tabBat页面,并关闭其他页面