效果展示
Demo源码
index.wxml
<mp-tabs tabs="{{tabs}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabCLick" bindchange="onChange" activeClass="tab-bar-title__selected">
<block wx:for="{{tabs}}" wx:key="title">
<view class="tab-content" slot="tab-content-{{index}}">
<image src="{{images[index]}}"></image>
</view>
</block>
</mp-tabs>
index.wxss
page {
background-color:
height: 100%;
}
.weui-tabs-bar__wrp {
border-bottom: 1px solid
margin-top: 10px;
}
.weui-tabs-swiper {
width: 100%;
height: 100%;
}
.tab-content {
height: 100px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
box-sizing: border-box;
padding: 40rpx;
}
.weui-tabs-bar__title {
margin: 0px 10px;
}
.tab-bar-title__selected {
font-size: 20px;
font-weight: bold;
}
index.json
{
"usingComponents": {
"mp-tabs": "../../components/tabs/index"
}
}
index.js
Page({
data: {
tabs: [],
activeTab: 0,
images: ["https://wx1.sinaimg.cn/large/7139bff5ly1fjasmh731ig20dw0b04bx.gif",
"https://wx1.sinaimg.cn/large/7139bff5ly1fjasmif6rxg20dw0b0qi7.gif",
"https://wx1.sinaimg.cn/large/7139bff5ly1fjasmj6xx0g20dw0b0tjz.gif",
"https://wx1.sinaimg.cn/large/7139bff5ly1fjasmk35e2g20dw0b0dno.gif",
"https://wx1.sinaimg.cn/large/7139bff5ly1fjasmlutaig20dw0b0u0h.gif",
"https://wx1.sinaimg.cn/large/7139bff5ly1fjasmnko9ng20dw0b0h5o.gif",
"https://wx1.sinaimg.cn/large/7139bff5ly1fjasmphcu8g20dw0b07s0.gif",
"https://wx1.sinaimg.cn/large/7139bff5ly1fjasmqi1iwg20dw0b04cb.gif"
]
},
onLoad() {
const titles = ['栏目-1', '栏目-2', '栏目-3', '栏目-4', '栏目-5', '栏目-6', '栏目-7', '栏目-8']
const tabs = titles.map(item => ({
title: item
}))
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
})
}
})
components tabs index.wxml
<view class="weui-tabs">
<view class="weui-tabs-bar__wrp" style="top:{{CustomBar}}px">
<scroll-view scroll-x scroll-into-view="item_{{currentView}}" scroll-with-animation="{{animation}}">
<view class="weui-tabs-bar__content">
<block wx:for="{{tabs}}" wx:key="title">
<view id="item_{{index}}" class="weui-tabs-bar__item" style="background-color: {{tabBackgroundColor}}; color: {{activeTab === index ? tabActiveTextColor : tabInactiveTextColor}};" bindtap="handleTabClick" data-index="{{index}}">
<view class="weui-tabs-bar__title {{tabClass}} {{activeTab === index ? activeClass : ''}}" style="border-bottom-color: {{activeTab === index ? tabUnderlineColor : 'transparent'}}">
<text class="">{{item.title}}</text>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
<swiper class="{{swiperClass}}" current="{{activeTab}}" duration="{{duration}}" bindchange="handleSwiperChange">
<swiper-item wx:for="{{tabs}}" wx:key="title">
<scroll-view scroll-y="true" style="height:100%;">
<slot name="tab-content-{{index}}"></slot>
</scroll-view>
</swiper-item>
</swiper>
</view>
components tabs index.wxss
.weui-tabs {
width: 100%;
height: 100%;
}
.weui-tabs-bar__wrp {
width: 100%;
background:white
}
.weui-tabs-bar__content {
width: 100%;
white-space: nowrap;
}
.weui-tabs-bar__item {
display: inline-block;
}
.weui-tabs-bar__title {
display: inline-block;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: transparent
}
components tabs index.json
{
"component": true,
"usingComponents": {}
}
components tabs index.js
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
.
.
.
.
.
.
.
.
.
完整代码获取如下