vant--------tab touch

今天小生主要讲的是自己在平时项目中用的最常见的几种功能,也是前端开发最需要的:

demo实例https://download.csdn.net/download/zxd1314520/10634016

1.tab选项卡是平时项目中最大众的一个,有时候根据业务需要加上touch效果

vant再简单适宜了。

首先基于依赖install

我们需要安装vant 安装方法可见我的浅谈vue.js 从配置环境到打包运行 (初学者适应),在main.js引入

import 'vant/lib/vant-css/index.css'

import { Tab, Tabs } from 'vant';

Vue.use(Tab).use(Tabs);

用法 列子

html:

 

<van-tabs v-model="active" swipeable>
            <van-tab v-for="(item,index) in navArr" :title="item.name" class="v-tab">
                <div v-if="index==0">
                    我是第一个
                </div>
                <div v-if="index==1">我是二个</div>
                <div v-if="index==2">我是第三个</div>
            </van-tab>

 </van-tabs>

 

 

js:

export default {
        name: '',
        data() {
            return {
           active: 0,
                navArr: [{
                        name: "选项一"
                    },
                    {
                        name: "选项二"
                    },
                    {
                        name: "选项三"
                    }
                ],
            }
        }

}

效果图如下 click 和手指滑动都可以

 

 

强大的swiper也可以实现此功能 也支持手滑动 这里我也写一个列子并做比较区别

1.首先我们要下载swiper.js 和swiper.css 下载地址swiper     https://www.swiper.com.cn/

然后再我们asstes/js下放入swiper.js同理在css下放入swiper.css

在我们需要用.vue引入js 和css

列子

HTML:

<div class="swiper-container">
            <div class="my-pagination">
                <ul class="my-pagination-ul"></ul>
            </div>

            <div class="swiper-wrapper" style="padding: 0.3rem;">

                <div class="swiper-slide">

                    <div class="swiper-slide-black">产品优势</div>
                    <div style="margin-right: 0.3rem;">
                        假如生活欺骗了你 假如生活欺骗了你, 不要悲伤,不要心急! 忧郁的日子里须要镇静: 相信吧,快乐的日子将会来临! 心儿永远向往着未来; 现在却常是忧郁。 一切都是瞬息,一切都将会过去; 而那过去了的,就会成为亲切的怀恋。

                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="swiper-slide-black">产品优势</div>
                    <div style="margin-right: 0.3rem;">
                        假如生活欺骗了你 假如生活欺骗了你, 不要悲伤,不要心急! 忧郁的日子里须要镇静: 相信吧,快乐的日子将会来临! 心儿永远向往着未来; 现在却常是忧郁。 一切都是瞬息,一切都将会过去; 而那过去了的,就会成为亲切的怀恋。

                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="swiper-slide-black">产品优势</div>
                    <div style="margin-right: 0.3rem;">
                        假如生活欺骗了你 假如生活欺骗了你, 不要悲伤,不要心急! 忧郁的日子里须要镇静: 相信吧,快乐的日子将会来临! 心儿永远向往着未来; 现在却常是忧郁。 一切都是瞬息,一切都将会过去; 而那过去了的,就会成为亲切的怀恋。

                    </div>
                </div>
            </div>

js:

mounted() {
            new Swiper('.swiper-container', {

                loop: true,
                // 如果需要分页器
                pagination: '.my-pagination-ul',
                disableOnInteraction: false,
                paginationClickable: true,
                observer: true, //修改swiper自己或子元素时,自动初始化swiper
                observeParents: true, //修改swiper的父元素时,自动初始化swiper
                paginationBulletRender: function(index, className) {
                    switch(index) {
                        case 0:
                            name = '产品介绍';
                            break;
                        case 1:
                            name = '品牌详情';
                            break;
                        case 2:
                            name = '招商详情';
                            break;

                        default:
                            name = '';
                    }
                    return '<li class="' + className + '">' + name + '</li>';
                }

            })

        }

 

 

css:

 

.swiper-container {
        width: 100%;
        height: 3.3rem;
    }
    
    .my-pagination .swiper-pagination-bullet {
        text-align: center;
        border-radius: 0;
        opacity: 1;
    }
    
    .my-pagination ul {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    
    .my-pagination li {
        display: block;
        background: #fff;
        overflow: hidden;
        width: 1.2rem;
        height: 0.6rem;
        line-height: 0.6rem;
        position: relative;
        font-size: 0.3rem;
    }
    
    .my-pagination li:after {
        position: absolute;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 1px;
        content: '';
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transform: scaleY(.5)
    }
    
    .my-pagination .swiper-pagination-bullet-active {
        color: #000000;
    }
    
    .my-pagination .swiper-pagination-bullet-active:after {
        opacity: 1;
        background-color: #FF6600;
        height: 0.06rem;
    }
    
    .swiper-slide-black {
        color: #000000;
        font-size: 0.28rem;
    }

效果图:

个人觉得 vant-tab更方便以上两种方法 根据个人喜欢来用吧!

 

 

 

 

 

 

展开阅读全文

没有更多推荐了,返回首页