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

一、swiper组件

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

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

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 的哪一项，从左边算起
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	否	接口调用结束的回调函数（调用成功、失败都会执行）

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

属性名	类型	必填	说明
url	String	是	需要跳转的tabBar页面的路径(需要在app.json的tabBar字段定义的页面) , 路径后不能带参数
success()	Function	否	接口调成功的回调函数
fail()	Function	否	接口调成功的回调函数
complete()	Function	否	接口调成功的回调函数