更新记录

1.0.2（2021-05-27）

删除了md文件下的图片

1.0.1（2021-05-27）

请参考md文档或扫码体验

1.0.0（2021-05-27）

mochengchen-tabs

介绍

uniapp页面插件tabs

使用说明

本项目为页面插件，您可以复制粘贴使用，或者简单改造即可，项目预览如下

平台兼容性

不想下载插件的小伙伴 可以直接复制 注意一下img的路径即可

<template>
    <view class="wrap">
     <view class="homeBox">
      <scroll-view :enable-flex="true" scroll-with-animation :throttle="false" :scroll-left="scrollLeft" scroll-x>
        <view class="tabBox">
          <view class="tab-item"  :key="index" v-for="(item, index) in list" @click="changeIndex(index)">
            <view :class="tabIndex == index ? 'tab-choice' : ''">{{ item.title }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
        <view class="tab-content">
      <view class="MlSon" v-for="item in conList" :key="item.id">
        <view class="MlSonvBox">
          <view class="SonOfImg">
            <image class="Img" :src="item.img"></image>
          </view>
          <view class="SonOfName">
            <view class="SNTop">
              {{item.title}}
            </view>
            <view class="SNBom">
              <view class="SBleft">
                {{list[tabIndex].title}}
              </view>
              <view class="SBright">
                  右边信息
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    </view>
</template>

<script>
    export default {
    name:"tab-莫成尘-vue2.0",
        data() {
            return {
                tabIndex:0, //当前访问的 index 默认为0
        list: [
            { title: '关于我们'},
            { title: '你好'},
            { title: '文字长度自定义'},
            { title: '底部下划线使用伪元素生成'},
            { title: '可无限多个'},
            { title: '三个字'},
            { title: '待收货'},
            { title: '带付款'},
            { title: '待评价'},
        ],
        tabList:[], //tab dom节点集合
        scrollLeft: 0, //scrollview需要滚动的距离
        conList:[
          {id:1,img:"../../static/logo.png",title:"底部展示信息一般是通过不同接口判断的，您也可以使用 v-if='tabIndex'来设置",msg:"这是提示信息"},
          {id:2,img:"../../static/logo.png",title:"这是标题超出部分会被作为省略号隐藏",msg:"这是提示信息"},
        ]
            }
        },
    mounted() {
      this.init();
    },
        methods: {
      init() {
        const query = uni.createSelectorQuery().in(this);
        query.selectAll('.tab-item').fields({ rect: true, size: true }, data => {
          // TODO 第一步 获取当前所以子元素 并插入到 tabList 列表中
            data.forEach(item => {
                this.tabList.push({ width: item.width, left: item.left });
            });
        });
        query.exec();
      },
            changeIndex(index){ 
        //改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
        this.tabIndex = index
        //当前滚动的位置  
        //this.tabList[index].left 会使当前选中的距离左边为0 
        //然后 用屏幕宽度减去当前元素的宽度 / 2  则会让他处于中间位置
        this.scrollLeft = this.tabList[index].left - ((345-this.tabList[index].width) / 2)
      },
        }
    }
</script>

<style lang="scss" scoped>
 $tabChoiceColor:#f40; //设置选中文字和底部下划线背景颜色
 $max:100%;
 // 这是最外层盒子
 .wrap{
   position: relative;
   background: #f7f7f7;
 }
.homeBox{
 // 对此盒子进行 sticky 粘性定位
  position: sticky;
  top: 0;
  background: #fff; //设置背景 否则会透明
  /* #ifdef H5 */
  //粘性定位 在h5下 加 原生头部高度 44px
  top: 44px;
  /* #endif */
  .tabBox{
    position: relative;
    white-space: nowrap;
    height: 88rpx;
    /* #ifdef MP-TOUTIAO */
    /* #endif */
    .tab-item{
      padding:15rpx 20rpx;
      position: relative;
      display: inline-block;
      text-align: center;
      transition-property: background-color, width;
    }
    .tab-choice{ //当前选中 基于此类名给与底部选中框
      position: relative;
      color: $tabChoiceColor;
    }
    .tab-choice:before {
      content: "";
      position: absolute;
      left: 0;
      bottom: -12rpx;
      width: 100%;
      height: 4rpx;
      border-radius: 2rpx;
      background: $tabChoiceColor;
    }
  }
}

// // 删除 底部滚动条
/* #ifndef APP-NVUE */
::-webkit-scrollbar,
::-webkit-scrollbar,
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
/* #endif */
/* #ifdef H5 */
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
scroll-view ::v-deep ::-webkit-scrollbar {
    display: none;
}
/* #endif */

// 底部内容站位区域  此处内容请自定义  以下为内容区域 样式
.tab-content{
  height: 100vh;
  padding: 10rpx 0;
  background: #f7f7f7;
}
.MlSon {
  border-radius: 12rpx;
  .MlSonvBox {
    padding: 24rpx 32rpx;
    height: 168rpx;
    display: flex;
    justify-content: space-around;
    background: #fff;
    margin-top:10px;
    .SonOfImg {
      border:1px solid red;
      width: 164rpx;
      height: $max;
      border-radius: 12rpx;
      overflow: hidden;
      .Img {
        width: $max;
        height: $max;
      }
    }
    .SonOfName {
      width: 420rpx;
      margin-left: 8rpx;
      height: $max;
      .SNTop {  //这部分是标题 我将其设置为超出两行隐藏掉您可根据需求设置为一行
        width: $max;
        height: 88rpx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 44rpx;
        color: #06121E;
        font-size: 28rpx;
      }
      .SNBom {
        width: $max;
        height: 34rpx;
        line-height: 34rpx;
        font-size: 24rpx;
        display: flex;
        justify-content: space-between;
        margin-top: 18rpx;
        .SBleft {  //这里预留了底部左右信息的样式处理
        }
        .SBright {
        }
        }
      }
    }
  }
</style>