tab weui 页面切换_WeUI教程 - loadmore、msg、tab选项卡组件

loadmore 加载更多

Loadmore

加载更多

正在加载

暂无数据

小程序下拉刷新，下拉加载更多的教程(29、30节)

https://ke.qq.com/course/183926#tuin=4f8da6

msg 操作结果通知界面组件

1、引导按钮

Msg

提示页

成功提示页

失败提示页

js

Page({

openSuccess: function () {

wx.navigateTo({

url: 'msg_success'

})

},

openFail: function () {

wx.navigateTo({

url: 'msg_fail'

})

}

});

2、操作失败

操作失败

内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接

推荐操作

辅助操作

底部链接文本

Copyright © 2008-2016 weui.io

3、操作成功

操作成功

内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接

推荐操作

辅助操作

底部链接文本

Copyright © 2008-2016 weui.io

tab 选项卡组件

{{item}}

选项一的内容

选项二的内容

选项三的内容

jsvar sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置

Page({

data: {

tabs: ["选项一", "选项二", "选项三"],

activeIndex: 1,

sliderOffset: 0,

sliderLeft: 0

},

onLoad: function () {

var that = this;

wx.getSystemInfo({

success: function(res) {

that.setData({

sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,

sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex

});

}

});

},

tabClick: function (e) {

this.setData({

sliderOffset: e.currentTarget.offsetLeft,

activeIndex: e.currentTarget.id

});

}

});