网站如何添加百度地图,网站开发示例,湖南网站备案注销,引擎搜索对人类记忆的影响文章目录 需求分析安装htmlcssjs 需求分析
假设现在有这么一个需求#xff0c;页面顶部有几个tabs导航#xff0c;每一个tab下都有一个可以滑动的切换按钮。咱们就可以引入better-scroll来实现这个需求。
安装
首先下载better-scroll
npm install better-scroll/core --… 文章目录 需求分析安装htmlcssjs 需求分析
假设现在有这么一个需求页面顶部有几个tabs导航每一个tab下都有一个可以滑动的切换按钮。咱们就可以引入better-scroll来实现这个需求。
安装
首先下载better-scroll
npm install better-scroll/core --savehtml
van-tabs v-model:activedataMap.activevan-tab v-for(item, index) in dataMap.tabs :titleitem.titlediv classscrollBar :ref(el) methodMap.setItemRef(el, index)div :idscrollRefs indexdiv:class{ roundtab: true, redroundtab: item1.checked }v-for(item1, index1) in item.childrenclickchangeTabs(index, index1){{ item1.title }}/div/div/div/van-tab/van-tabscss
滚动的原理就是让滚动区域超出容器css设置如下
.scrollBar{width: 100vw;white-space: nowrap;
}.roundtab {display: inline-block;width: 3rem;
}js
import BScroll from better-scroll;setItemRef: (el, key) {if (el) {scrollRefs.value[key] el;let width dataMap.tabs[key].children.length * 80; // 动态计算出滚动区域的大小前面已经说过了产生滚动的原因是滚动区域宽度大于父盒子宽度el.children[0].style.width width px;new BScroll(el, {startX: 0, /// 配置的详细信息请参考better-scroll的官方文档这里不再赘述click: true,scrollX: true,scrollY: false, // 忽略竖直方向的滚动eventPassthrough: vertical,useTransition: false, // 防止快速滑动触发的异常回弹});}},
