网站空间就是服务器吗,吉安网站推广徽hyhyk1,传奇国度网页游戏,郑州网站制作哪家招聘文章目录 方案踩坑1.scroll-view 横向失败2.点击item不滚动?3. scrollLeft从哪里来? 效果图 方案
官方scroll-view 进行封装
配合属性 scroll-left Number/String 设置横向滚动条位置 即可
scroll-into-view 属性尝试过,方案较难实现
踩坑
1.scroll-view 横向失败
安装… 文章目录 方案踩坑1.scroll-view 横向失败2.点击item不滚动?3. scrollLeft从哪里来? 效果图 方案
官方scroll-view 进行封装
配合属性 scroll-left Number/String 设置横向滚动条位置 即可
scroll-into-view 属性尝试过,方案较难实现
踩坑
1.scroll-view 横向失败
安装官网的解释 使用竖向滚动时需要给 scroll-view 一个固定高度通过 css 设置 height使用横向滚动时需要给scroll-view添加white-space: nowrap;样式。
实际上,还需要再 v-for的子item上添加 display: inline-block;
那有人要说, 我要用display:flex怎么办?
那就在item外层再套个view, 给他设置 display: inline-block;即可
scroll-view classscroll-top-tab-bar-box scroll-with-animationtrue scroll-xtrueenable-flextrue :scroll-leftscrollLeft!-- 为了保scroll-top-tab-item的flex布局, 在外部套一个scroll-top-tab-item-box的inline-block布局 --view classscroll-top-tab-item-box v-for(item,index) in tabs :keyitem.idview classscroll-top-tab-itemview :iditem.id classscroll-top-tab-item-title:classcurrentTagindex?scroll-top-tab-item-title-selected:tapchoose(index){{item.title}}/viewimage srchttps://cdn.froglesson.com/static/cert/top_tab_bar_selected.pngv-ifindexcurrentTag/imageview classscroll-top-tab-item-bottom-placeholder v-else/view/view/view/scroll-view2.点击item不滚动?
切记要配合 scroll-with-animation动画开启才有用, 这个好像官网没讲, 也是百度才知道的…
3. scrollLeft从哪里来?
data() {return {scrollLeft: 0}},methods: {choose(index) {this.idd this.tabs[index].idthis.getScrollLeft(index)},getScrollLeft(index) {let query uni.createSelectorQuery().in(this)query.selectAll(.scroll-top-tab-item).boundingClientRect(data {this.scrollLeft data[index].left - 100}).exec()},},};
