属性名

类型

默认值

说明

最低版本

indicator-dots

Boolean

false

是否显示面板指示点

indicator-color

Color

rgba(0, 0, 0, .3)

指示点颜色

1.1.0

indicator-active-color

Color

#000000

当前选中的指示点颜色

1.1.0

autoplay

Boolean

false

是否自动切换

current

Number

0

当前所在页面的 index

interval

Number

5000

自动切换时间间隔

duration

Number

500

滑动动画时长

circular

Boolean

false

是否采用衔接滑动

vertical

Boolean

false

滑动方向是否为纵向

bindchange

EventHandle

current 改变时会触发 change 事件，event.detail = {current: current, source: source}

<view class='section'>

<swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000" class='swiper'>

<block wx:for="{{vedioImgUrls}}" wx:key="*this">

<swiper-item id="{{index}}" catchtap="swiperItemClick" >

<image src="{{item.thumbnail.url}}" />

</swiper-item>

</block>

</swiper>

</view>

/* 轮播样式 */

.swiper{

width: 100%;

height: 240px;

}

/* 轮播图片样式 */

.swiper swiper-item image{

width: 100%;

}

属性名

类型

默认值

说明

scroll-x

Boolean

false

允许横向滚动

scroll-y

Boolean

false

允许纵向滚动

upper-threshold

Number

50

距顶部/左边多远时（单位px），触发 scrolltoupper 事件

lower-threshold

Number

50

距底部/右边多远时（单位px），触发 scrolltolower 事件

scroll-top

Number

设置竖向滚动条位置

scroll-left

Number

设置横向滚动条位置

scroll-into-view

String

值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

scroll-with-animation

Boolean

false

在设置滚动条位置时使用动画过渡

enable-back-to-top

Boolean

false

iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向

bindscrolltoupper

EventHandle

滚动到顶部/左边，会触发 scrolltoupper 事件

bindscrolltolower

EventHandle

滚动到底部/右边，会触发 scrolltolower 事件

bindscroll

EventHandle

滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

<view class='section'>

<scroll-view class="categories" scroll-x="true">

<block wx:for="{{selectedScrollItems}}" wx:key="*this">

<label class="category" id="{{index}}" bindtap='scrollMenuClick'>

<view wx:if="{{menuIndex==index}}" style='color:green; font-size: 18px;'>{{item}}</view>

<view wx:else style='color:royalblue;'>{{item}}</view>

</label>

</block>

</scroll-view>

</view>

/* 滑动菜单样式 */

.categories {

height: 40px;

line-height: 40px;

border: 1px solid #eee;

white-space: nowrap;

display: flex;

}

/* 滑动菜单item样式 */

.categories .category {

width: 80px;

height: 40px;

text-align: center;

display: inline-block;

border-right: 1px solid #eee;

color: royalblue;

font-size: 15px;

}

<view class='section' hidden='{{selectedScrollItemsHiddenSign[0]}}'>

签到

</view>

<view class='section' hidden='{{selectedScrollItemsHiddenSign[1]}}'>

课堂测试

</view>

<view class='section' hidden='{{selectedScrollItemsHiddenSign[2]}}'>

模拟测试

</view>

<view class='section' hidden='{{selectedScrollItemsHiddenSign[3]}}'>

课堂提问

</view>

<view class='section' hidden='{{selectedScrollItemsHiddenSign[4]}}'>

答问记录

</view>

data{

// 菜单选项

selectedScrollItems: ['签到', '课堂测试', '模拟测试', '课堂提问', '答问记录'],

// 菜单选项隐藏和显示标志

selectedScrollItemsHiddenSign: [false, true, true, true, true]

}

scrollMenuClick:function(e){

// 隐藏其他页面并显示当前点击的菜单页面

for (var i = 0; i < this.data.selectedScrollItemsHiddenSign.length;i++){

if (i == e.currentTarget.id) this.data.selectedScrollItemsHiddenSign[i] = false;

else this.data.selectedScrollItemsHiddenSign[i] = true;

}

this.setData({ menuIndex: e.currentTarget.id, selectedScrollItemsHiddenSign: this.data.selectedScrollItemsHiddenSign});

// 显示加载logo

wx.showToast({

title: '加载中',

icon: 'loading',

duration:10000

});

// 选中第一个菜单

if (e.currentTarget.id == 0){

setTimeout(function () {

wx.hideToast()

}, 3000);

}// 选中第二个菜单，加载课堂测试题

else if (e.currentTarget.id == 1){

setTimeout(function () {

wx.hideToast()

}, 3000);

}

// 选中第三个菜单

else if (e.currentTarget.id == 2) {

setTimeout(function () {

wx.hideToast()

}, 3000);

}

// 选中第四个菜单

else if (e.currentTarget.id == 3) {

setTimeout(function () {

wx.hideToast()

}, 3000);

}

// 选中最后一个菜单

else {

setTimeout(function () {

wx.hideToast()

}, 3000);

}

}

属性

类型

必填

默认值

描述

color

HexColor

是

tab 上的文字默认颜色

selectedColor

HexColor

是

tab 上的文字选中时的颜色

backgroundColor

HexColor

是

tab 的背景色

borderStyle

String

否

black

tabbar上边框的颜色， 仅支持 black/white

list

Array

是

tab 的列表，详见 list 属性说明，最少2个、最多5个 tab

position

String

否

bottom

可选值 bottom、top

属性

类型

必填

说明

pagePath

String

是

页面路径，必须在 pages 中先定义

text

String

是

tab 上按钮文字

iconPath

String

否

图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效

selectedIconPath

String

否

选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

{

"pages": [

"pages/main/main",

"pages/post/post",

"pages/mine/mine",

"pages/vedioPlayer/vedioPlayer",

"pages/start/start"

],

"window": {

"navigationBarTextStyle": "white",

"navigationBarBackgroundColor": "#118fff",

"navigationBarTitleText": "课堂宝",

"backgroundColor": "#fff"

},

"tabBar": {

"color": "#9BABBA",

"selectedColor": "#495056",

"borderStyle": "black",

"backgroundColor": "dark",

"list": [

{

"pagePath": "pages/main/main",

"text": "首页",

"iconPath": "static/images/tar-home.png",

"selectedIconPath": "static/images/tar-home-on.png"

},

{

"pagePath": "pages/post/post",

"text": "习题",

"iconPath": "static/sources/发帖32x32.png",

"selectedIconPath": "static/sources/发帖32x32hl.png"

},

{

"pagePath": "pages/mine/mine",

"text": "我的",

"iconPath": "static/sources/我的32x32.png",

"selectedIconPath": "static/sources/我的32x32hl.png"

}

]

},

"networkTimeout": {

"request": 10000,

"downloadFile": 10000

}

}