选项卡组件。
成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站建设、网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的红古网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
{{item.title2}}
{{item.desc}}
Page({
onShareAppMessage() {
return {
title: 'tabs',
path: 'page/weui/example/tabs/tabs'
}
},
data: {
tabs: [],
activeTab: 0,
},
onLoad() {
const tabs = [
{
title: '技术开发',
title2: '小程序开发进阶',
img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEV5QjxLDJaL6ibHLSZ02TIcve0ocPXrdTVqGGbqAmh5Mw9V7504dlEiatSvnyibibHCrVQO2GEYsJicPA/0?wx_fmt=jpeg',
desc: '本视频系列课程,由腾讯课堂NEXT学院与微信团队联合出品,通过实战案例,深入浅出地进行讲解。',
},
{
title: '产品解析',
title2: '微信小程序直播',
img: 'http://mmbiz.qpic.cn/sz_mmbiz_png/GEWVeJPFkSHALb0g5rCc4Jf5IqDfdwhWJ43I1IvriaV5uFr9fLAuv3uxHR7DQstbIxhNXFoQEcxGzWwzQUDBd6Q/0?wx_fmt=png',
desc: '微信小程序直播系列课程持续更新中,帮助大家更好地理解、应用微信小程序直播功能。',
},
{
title: '运营规范',
title2: '常见问题和解决方案',
img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGqys4ibO2a8L9nnIgH0ibjNXfbicNbZQQYfxxUpmicQglAEYQ2btVXjOhY9gRtSTCxKvAlKFek7sRUFA/0?wx_fmt=jpeg',
desc: '提高审核质量',
},
{
title: '营销经验',
title2: '流量主小程序',
img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSH2Eic4Lt0HkZeEN08pWXTticVRgyNGgBVHMJwMtRhmB0hE4m4alSuwsBk3uBBOhdCr91bZlSFbYhFg/0?wx_fmt=jpeg',
desc: '本课程共四节,将分阶段为开发者展示如何开通流量主功能、如何接入广告组件、不同类型小程序接入的建议,以及如何通过工具调优小程序变现效率。',
},
{
title: '高校大赛',
title2:'2020中国高校计算机大赛',
img: 'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg',
desc: '微信小程序应用开发赛',
},
]
this.setData({ tabs })
},
onTabClick(e) {
const index = e.detail.index
this.setData({
activeTab: index
})
},
onChange(e) {
const index = e.detail.index
this.setData({
activeTab: index
})
},
handleClick(e) {
wx.navigateTo({
url: './webview',
})
}
})
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
tabs | Array | [] | 是 | 数据项格式为 {title} |
tab-class | String | 否 | 选项卡样式 | |
swiper-class | String | 否 | 内容区域 swiper 的样式 | |
active-class | String | 否 | 选中项样式 | |
tab-underline-color | String | #07c160 | 否 | 选中项下划线颜色 |
tab-active-text-color | String | #000000 | 否 | 选中项字体颜色 |
tab-inactive-text-color | String | #000000 | 否 | 未选中项字体颜色 |
tab-background-color | String | #ffffff | 否 | 选项卡背景颜色 |
active-tab | Number | 0 | 否 | 激活 tab 索引 |
duration | Number | 500 | 否 | 内容区域切换时长 |
bindtabclick | eventhandle | 否 | 点击 tab 时触发,e.detail={index} | |
bindchange | eventhandle | 否 | 内容区域滚动导致 tab 变化时触发, e.detail={index} |
网页名称:创新互联小程序教程:微信小程序扩展组件·选项卡组件
网站路径:http://www.shufengxianlan.com/qtweb/news38/243988.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联