精华内容
下载资源
问答
  • 解决vant 框架 tab切换插件标题样式不能自定义问题 找到源码:node_modules/vant/es/tabs/Title.js 修改如下代码: return h(div, { attrs: { role: tab, aria-selected: this.isActive }, class: [bem({ ...
  • 我的需求:(和头条的tab栏类似 ,单击查看头条tab栏) 点击tab栏,下方展示出来当前tab栏下的内容列表(A页面),点击列表进入详情内容(B页面),但是返回(A页面)的时候,需要显示刚才被点击的tab栏高亮显示。...
  • vant tab list 下拉刷新及分页加载数据问题

    今天同事遇到一个问题:vant list组件下拉刷新会加载2次数据。

    我开始以为是一个很简单的问题,就去帮她处理,但是处理起来就发现问题很诡异,每次切换tab之后会自动加载load事件,直到把所有分页数据加载完毕才停止。。。

    开始想了很多办法,也重复查看了几遍官方下拉刷新组件和list组件的API,但是都没解决这个问题,不是这里出现问题就是那里出问题,一脸懵逼。。。

    坐在那里静静的想了很久,最后发现问题应该是tab下的list组件共用了控制变量,每个tab下的list应该是独立的,应该有独立的变量来控制其刷新和加载数据及状态显示情况。

    找到问题的原因,这个情况就很好处理了,以下是缓存列表的做法,如果不做缓存列表可以直接公用控制变量,那样每次切换tab就要重新加载数据:

    <template>
      <div class="sf-layout">
        <div class="sf-layout-content">
          <van-tabs
            v-model="tabsActive"
            animated
            @click="tabClick"
          >
            <van-tab
              v-for="(item, index) in tabsList"
              :title="item.name"
              :key="index"
            >
              <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-empty v-if="!item.list.length" description="未查询到数据" />
                <van-list
                  v-else
                  v-model="item.loading"
                  :finished="item.finished"
                  :immediate-check="false"
                  finished-text="没有更多了"
                  @load="onLoad"
                >
                  <div
                    v-for="(item2, index2) in item.list"
                    :key="index2"
                  >
                    <van-swipe-cell></van-swipe-cell>
                </div>
                </van-list>
              </van-pull-refresh>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </template>
    
    <script>
    const page = 1
    const pageSize = 10
    const loading = false
    const finished = false
    
    export default {
      data() {
        return {
          tabsActive: 0,
          refreshing: false,
          tabsList: [
            {name: 'Tab1', list: [], loading, finished, page, pageSize},
            {name: 'Tab2', list: [], loading, finished, page, pageSize},
            {name: 'Tab3', list: [], loading, finished, page, pageSize},
          ]
        }
      },
      created() {
        this.loadData()
      },
      methods: {
        loadData(){
          let obj = this.tabsList[this.tabsActive]
          obj.loading = true
          let param = {
            isPage: true,
            page: obj.page,
            pageSize: obj.pageSize,
          }
          API(param)
          .then(data => {
            if(!data) return;
            let list = data.records || []
            if (obj.page === 1) {
              obj.list = list
            } else {
              obj.list = [...obj.list, ...list]
            }
    
            if(obj.page < data.pages){
              obj.page++
              obj.finished = false
            } else {
              obj.finished = true
            }
          })
          .finally(() => {
            obj.loading  = false
            this.refreshing = false
          })
        },
    
        onRefresh() {
          this.tabsList[this.tabsActive].page = 1
          this.refreshing = true
          this.loadData()
        },
    
        onLoad(){
          this.loadData()
        },
    
        tabClick(index){
          this.tabsActive = index
          if(this.tabsList[index].list.length) return
          this.loadData()
        }
      }
    }
    </script>
    
    
    展开全文
  • 蘑菇街移动端项目,使用vant框架中的list组件还有tab组件,完成了tabbar-control组件 ![tab栏切换](https://img-blog.csdnimg.cn/20200923235804481.png#pic_center) 问题描述: 提示:这里描述项目中遇到的问题:...

    项目场景:

    蘑菇街移动端项目,使用vant框架中的list组件还有tab组件,完成了tabbar-control组件

    问题描述:

    tab栏切换时保存当前页面卷起的长度: 在浏览器中使用方法window.scroll = 当前页超出容器的长度,在浏览器中使用这个方法可以实现这个效果,但是放入tab标签的点击事件中处理就无效了。

    在这里插入图片描述


    原因分析:

                    //这里必须设置一个定时器,要不然没法跳转
                    setTimeout(()=> {
                          window.scroll(0,this.postionY(这里就是要跳转到的位置));
                    },50);
    

    猜测是当时跳转的时候图片没有渲染出来,高度没有撑开,如果是文字的话可能不用设置定时间


    vant中有个疑问

    在这里插入图片描述

    使用vant中tab组件中这个before-change属性,在data中写入了处理事件,文档写了返回false可以阻止tab切换,可是我返回了false却没有阻止跳转。

    展开全文
  • 使用小程序时,某些分类名称可能会过长,导致tab组件显示就会出现下图显示不全的问题。 方法步骤 1. 增加tab-class标签样式类 <!--增加tab-class定义--> <van-tabs tab-class="tab-class" sticky class=...

    使用小程序时,某些分类名称可能会过长,导致tab组件显示就会出现下图显示不全的问题。

    方法步骤

    1. 增加tab-class标签样式类

    <!--增加tab-class定义-->
    <van-tabs tab-class="tab-class" sticky class="nav" active="{{ active }}" bind:change="onCateChange"> 
    	<van-tab wx:for="{{cate_list}}" wx:key="index" title="{{item.name}}"></van-tab>
    </van-tabs>
    

    2. 增加样式设置

    .tab-class {
      flex: none !important;
    }
    

    参考文档

    tab 文字过长显示不全

    展开全文
  • 用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项。 (页面加载完成后默认会自动加载一次,可以:immediate-check="false" 这样设置一下,页面加载...
  • vanttab贴切业务使用

    2021-03-14 13:21:24
    1.取消下划线 // 取消下划线 .van-tabs__line { background-color: transparent; ...van-tab title-class="screen"> <template #title>筛选 </template> 筛选 </van-tab>

    1.取消下划线

    // 取消下划线
    .van-tabs__line {
      background-color: transparent;
    }
    

    在这里插入图片描述

    2.设置某个便签为自定义色

         <!-- title-class自定义类名 -->
          <van-tab title-class="screen">
            <template #title>筛选 </template>
            筛选
          </van-tab>
          <style lang="less">
           // 自定义筛选的颜色
           .screen {
               color: red;
           }
    </style>
    

    在这里插入图片描述

    3.自定义选中时

    // 选中时颜色
    .van-tab--active {
      color: royalblue;
    }
    

    在这里插入图片描述

    4.标签加入图片

     <van-tab title-class="screen">
            <template #title>
              <div class="flex_">
                <div>
                  <img src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="" />
                </div>
                <div>筛选</div>
              </div>
            </template>
            筛选
          </van-tab>
       // 自定义类名
    .screen {
      color: red;
      .flex_ {
        display: flex;
        align-items: center;
      }
      img {
        width: 26px;
        height: 26px;
      }
    }
    

    在这里插入图片描述

    5.tab嵌套list,及所有代码

    <template>
      <div>
        <van-tabs v-model="active">
          <van-tab :title="item" v-for="(item, index) in list" :key="index"
            >内容{{ index }}</van-tab
          >
          <!-- title-class自定义类名 -->
          <van-tab title-class="screen">
            <template #title>
              <div class="flex_">
                <div>
                  <img src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="" />
                </div>
                <div>筛选</div>
              </div>
            </template>
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-cell v-for="item in listNum" :key="item" :title="item" />
            </van-list>
          </van-tab>
        </van-tabs>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          active: 2, //选择的哪一个标签
          //   以下模拟标签数据
          list: ["全部", "待确定", "已同意", "已拒绝", "已取消"],
          listNum: [],
          loading: false,
          finished: false,
        };
      },
      methods: {
        onLoad() {
          // 异步更新数据
          // setTimeout 仅做示例,真实场景中一般为 ajax 请求
          setTimeout(() => {
            for (let i = 0; i < 10; i++) {
              this.listNum.push(this.listNum.length + 1);
            }
            // 加载状态结束
            this.loading = false;
    
            // 数据全部加载完成
            if (this.listNum.length >= 40) {
              this.finished = true;
            }
          }, 1000);
        },
      },
    };
    </script>
    
    <style lang="less">
    // 取消下划线
    .van-tabs__line {
      background-color: transparent;
    }
    // 自定义类名
    .screen {
      color: red;
      .flex_ {
        display: flex;
        align-items: center;
      }
      img {
        width: 26px;
        height: 26px;
      }
    }
    // 选中时颜色
    .van-tab--active {
      color: royalblue;
    }
    </style>
    

    在这里插入图片描述

    展开全文
  • vue vant组件库 tab样式调整

    千次阅读 2021-04-24 20:25:38
    van-tabs v-model="active" class="vant-tab-wrap" swipeable animated sticky> <van-tab title="标签 1">内容 1</van-tab> <van-tab title="标签 2">内容 2</van-tab> <van-tab ...
  • 首先他确实能够显示我想实现的效果,其作用是获取到所有的宿舍列表但看着报错就很难受 所以百度翻译了一下报错原因 其原因是我数据库存放的roomid是int类型的而要使用该插件这里必须是字符串类型的,不然就会...
  • Vant Tab标签页+下拉刷新+上拉加载 安装v-viewer npm install v-viewer --save 在main.js当中加入以下代码 vue代码块 <template> <div class="invoicePickupBox"> <div class="headerBox"> &...
  • 使用vanttab切换双重循环

    千次阅读 2020-07-15 14:19:54
    1.js定义tab循环的内容 wxss: 根据id循环第一个第二个。。。。
  • van-tab title="标签 1">内容 1</van-tab> <van-tab title="标签 2">内容 2</van-tab> <van-tab title="标签 3">内容 3</van-tab> <van-tab title="标签 4">内容 4</...
  • vanttab使用组件,并且手势滑动

    千次阅读 2020-02-27 16:13:18
    vant中的tab手势滑动又必须是索引值才生效 一直以为:鱼与熊掌不能兼得,直到今天!!! ( ̄︶ ̄)↗  以前的代码 <van-tabs v-model="tabName" swipeable title-active-color="#0084FF" color="#0084FF">...
  • 一、Page中使用vant组件 pages/home.wxml <view class="page-home__article"> <van-tabs active="{{ active }}" bind:change="onChange"> <van-tab title="标签 1">内容 1</van-tab> &...
  • vant-list加上tab之后分页异常

    千次阅读 2019-06-19 14:47:33
    忍不住要来写一下vant-list分页之后的加载问题 想破脑袋也不知道为什么带有切换tab的list组件,每次会自动加载load事件 问题大概就是:将一个页面拉到底,切换tab之后会自动加载load事件 问题解决:在tab切换的时候...
  • vant tab选项卡 左右滑动 且保留数据

    千次阅读 2020-12-30 14:01:02
    onClick() { this.$nextTick(() => { document.documentElement.scrollTop = document.body.scrollTop = this.list[this.active].scrollTop }) if (this.list[this.active].products.length >...
  • 如何自定义Vant中的tab组件的标题
  • 在vue中使用vant 实现下拉刷新,上拉加载 下面我先粘贴我的项目代码: html部分的代码 <van-pull-refresh v-model="isDownLoading" @refresh="onRefresh"> <van-list v-model="isUpLoading" :finished=...
  • template模块代码固定栏@click="onClick":sticky="true":duration="0":swipe-threshold="5":offset-top="this.heightall"class="seckilling-tab">内容{{index}}js模块代码export default {data() {return {height...
  • vant 解决tab切换插件标题样式自定义

    千次阅读 2020-07-02 10:03:36
    解决vant 框架 tab切换插件标题样式不能自定义问题 找到源码:node_modules/vant/es/tabs/Title.js 修改如下代码: render: function render() { var h = arguments[0]; return h("div", { "attrs": { "role":...
  • 修改vantTab标签页的高度

    千次阅读 2021-04-30 16:06:15
    需要在van-tabs中加上 class="selectTab", <van-tabs v-model="active" title-active-color="#268EFF" color="#268EFF" line-width="100px" ...van-tab> <template #title> <div style="font-si.
  • vanttab栏标题宽度设置

    千次阅读 2021-07-26 14:29:06
    在wxss 中设置 //宽度就不在等宽,现在就自适应文字宽度 .van-tab{ flex:none!important; }
  • 修改vant框架组件,实现tab组件增加自定义事件修改vant框架组件,实现tab组件增加自定义事件在使用vant组件中,项目需要我们把框架的组件修改,加多一个按钮,用做用户的偏好设置需求:要求按钮不能影响组件的欢动...
  • 实现vantUI-tab组件选项卡 - 戴向天

    千次阅读 2020-01-19 10:24:20
    vantUI-TAB组件实现选项卡 只是初步实现,关于一些van-tabs组件的其它API我目前还没有写。不过其它的API也挺简单的。 有时间的话,我会将其它的API进行实现。 代码如下 van-tabs.vue组件文件 <template> <...
  • 制作小程序 时使用vant tab功能,当渲染tab时,tab底部栏出现错位。 <p><img alt="" height="44" src="https://img-ask.csdnimg.cn/upload/1618389753049.png" width="366" /></p> ...
  • vant组件库渲染tab时出现底部栏错位问题 今天在写页面的时候出现了底部栏错位的问题,问题如图所示: ![在这里插入图片描述](https://img-blog.csdnimg.cn/70dbe365b95e49bda92ed45b630b3c1b.png#pic_center) ...
  • vantweapp小程序组件库如tab样式修改

    千次阅读 2020-08-14 14:18:38
    在组件最下面有一个外部样式类 使用方法:例tab wxml wxss 效果图
  • 下面是实现双重tab栏切换功能 css样式 .active { color: red; } .black{ color: black; } 标签部分 <ul> <li v-for="(item, index) in screen.lis" @click="lisBtn(index)" :class="{ active: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,808
精华内容 723
关键字:

tabvant

友情链接: AD7606.zip