微信小程序tabs

这种样式在我们的项目中还是比较容易遇到的

上代码

首先在wxml中写布局样式

<view class="page" data-weui-theme="{
   {theme}}">

<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" data-set="{
   {item}}" slot="tab-content-{
   {index}}" bind:tap="handleClick" >
      <image src="{
   {item.img}}" mode="widthFix"></image>
      <view class="item-title">
        {
   {item.title2}}
      </view>
      <view class="item-desc">
        {
   {item.desc}}
      </view>
    </view>
  </block>
</mp-tabs>
</view>

第二步在wxss中给出css

@import '../common.wxss';

.page{
    background-color: var(--weui-BG-2);
    height: 100%;
}

.weui-tabs-bar__wrp {
    border-bottom: 1px solid var(--weui-BG-2);
    margin-top: 10px;
}

.weui-tabs-swiper {
    width: 100%;
    height: 100%;

    background-color: var(--weui-BG-2);

}

.tab-content {
    /* height: 100px; */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 20px;
}

.weui-tabs-bar__title {
    margin: 0px 10px;
}

.tab-bar-title__selected {
    font-size: 20px;
    font-weight: bold;
}
.item-title {
    margin: 10px 10px 5px;
    font-size: 18px;
    width: 100%;
}
.item-desc {
    margin: 5px 10px 0;
    width: 100%;
    color: var(--weui-FG-1)
}
.weui-tabs-bar__item {
    background-color: var(--weui-BG-2) !important;
    color: var(--weui-FG-0) !important;
}

第三步：创建一个common.wxss

/*!
 * WeUI v2.3.0 (https://github.com/weui/weui-wxss)
 * Copyright 2020 Tencent, Inc.
 * Licensed under the MIT license
 */
/* @import '../components/weui-wxss/dist/style/weui.wxss'; */

page {
  height: 100%;
  display: flex;
  justify-content: center;
}

.page {
  min-height: 100%;
  background-color: var(--weui-BG-1);
  color: var(--weui-FG-0);
  font-size: 16px;
  font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
  max-width: 600px;
}

image {
  max-width: 100%;
  max-height: 100%
}

.link {
  display: inline;
  color: var(--weui-LINK)
}

.fadeIn {
  -webkit-animation: a .3s forwards;
  animation: a .3s forwards
}

.fadeOut {
  -webkit-animation: b .3s forwards;
  animation: b .3s forwards
}

@-webkit-keyframes a {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes a {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes b {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes b {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

.weui-msg__extra-area {
  position: static
}

.page__hd {
  padding: 40px
}

.page__bd {
  padding-bottom: 40px
}

.page__bd_spacing {
  padding-left: 15px;
  padding-right: 15px
}

.page__ft {
  padding-top: 40px;
  padding-bottom: 10px;
  padding-bottom: calc(10px + constant(safe-area-inset-bottom));
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  text-align: center
}

[data-weui-theme=dark] .page__ft image {
  -webkit-filter: invert(100) hue-rotate(180deg);
  filter: invert(100) hue-rotate(180deg)
}

.page__title {
  text-align: left;
  font-size: 20px;
  font-weight: 400
}

.page__desc {
  margin-top: 5px;
  color: var(--weui-FG-1);
  text-align: left;
  font-size: 14px
}

.weui-cell_example:before {
  left: 52px
}

@media (prefers-color-scheme: dark) {
  page {
    background-color: #1F1F1F;
  }
}

第四步：在js中写入逻辑

import CustomPage from '../../base/CustomPage'

CustomPage({
  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',
    })
  }
})

第五步：创建一个CustomPage

import themeMixin from './behaviors/theme'

const CustomPage = function (options) {
	return Page(
		Object.assign({}, options, {
			behaviors: [themeMixin].concat(options.behaviors || []),
			onLoad(query) {
				const app = getApp()
				if(this.themeChanged) {
					this.themeChanged(app.globalData.theme)
					app.watchThemeChange && app.watchThemeChange(this.themeChanged);
					options.onLoad && options.onLoad.call(this, query)
				}
			},
			onUnload() {
				const app = getApp()
				if(this.themeChanged) {
					app.unWatchThemeChange && app.unWatchThemeChange(this.themeChanged)
				options.onUnload && options.onUnload.call(this)
				}
				
			}
		})
	)
}

export default CustomPage

第六步创建一个theme

module.exports = Behavior({
    data: {
        theme: 'light'
    },
    methods: {
        themeChanged(theme) {
            this.setData({
                theme
            })
        }
    }
})

第七步：在JSON中写调用

{
  "disableScroll": true,

  "navigationBarTitleText": "tabs",
  "usingComponents": {
    "mp-tabs": "@miniprogram-component-plus/tabs"
  }
}

第八步添加@miniprogram-component-plus/tabs，在项目中创建一个package.json加入下列代码：

{
  "name": "miniprogram",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@miniprogram-component-plus/tabs": "^1.0.0",
  }
}

这样就完成了