Vue--mui-- 顶部滑动条实例

**## 实现图片分享列表中顶部的滑动区域**

\1. 借助于 MUI 的 tab-top-webview-main.html 控件来实现

\2. 当拿到 UI 代码片段之后，需要把 mui-fullscreen 去掉

--因为这个属性是铺满整个界面，遮盖住界面

\3. 当页面布局没有大问题之后，发现无法实现滑动效果，此时，需要使用官方推荐的形式，去初始化一下控件,具体初始化的方式，参考官方文档:http://dev.dcloud.net.cn/mui/ui/#scroll

<!-- 图片分类区域 顶部滑动条区域-->
<div id="slider" class="mui-slider">
    <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll">
            <span 
                  :class="['mui-control-item', item.id === 0 ? 'mui-active' : '' ]" 
                  v-for="item in category" 
                  :key="item.id"
                  @tap="getPhotoByCategory(item.id)">
                {{ item.title }}
            </span>
        </div>
    </div>

</div>

 

来源：https://www.cnblogs.com/fdxjava/p/11640038.html