使用idangerous.swiper.min.js和iscroll5.js实现横向滚动tab，并响应内容

christyleylh

于 2018-01-04 17:01:01 发布

阅读量5.6k

点赞数 2

分类专栏：前端文章标签： html swipe iscroll tab 横向

本文链接：https://blog.csdn.net/qq_34020571/article/details/78972006

版权

本文介绍了如何结合idangerous.swiper.min.js和iscroll5.js实现横向滚动的tab效果，特别是在UC浏览器上的应用。内容包括设置html页面，处理标签数量不确定和文字长度不一的问题，以及如何确保选中tab始终在屏幕中间。同时，文章提供了Chrome禁用缓存以便于调试js的方法和源码下载链接。

摘要由CSDN通过智能技术生成

1、我们先看一下效果图：（在UC浏览器上运行，忽略护眼绿，类似UC首页下UC头条新闻tab栏）

2、html页面代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商城</title>
    <link rel="stylesheet" href="../css/light7.min.css">
    <link rel="stylesheet" href="../css/light7-swiper.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <script>window.PointerEvent = void 0</script>
</head>
<body>
<div class="page" id="page-member-sale">
    <header class="bar bar-nav">
        <a class="button button-link pull-left back app-back" href="../index.html">
        </a>
        <h1 class="title">配件选购</h1>
        <a class="button button-link pull-right" href="#" data-transition="slide-in">
        </a>
    </header>
    <div class="scroll-tabs list-block" id="scroll-tabs">
        <ul>
            <li class="active">Phone</li>
            <li>IP</li>
            <li>MIFI</li>
            <li>Air conditioner</li>
            <li>Top-up card</li>
            <li>earphone</li>
            <li>X-box</li>
        </ul>
    </div>
    <div class="content">
        <div class="content-inner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="content-slide">
                            <div class="list-block goods">
                                <ul class="row no-gutter">
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="">
                                                <div class="goods-img ">
                                                    <img src="res/emoji1.jpg" alt="">
                                                </div>
                                            </div>
                                            <div class="">
                                                <div class="goods-name">OPPA 充电器 充电俩小时，通话五分钟 充电俩小时，通话五分钟 充电俩小时</div>
                                                <div class="price">
                                                    <div class="svip-price">$79</div>
                                                    <div class="vip-price">$99</div>
                                                </div>
                                                <div class="pri-price"><del>原价:$129</del></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="item-content">
                                        <div class="item-inner">