效果三:使用 scroll-left 思路:当前点击子元素距离左边栏的距离 - scroll-view 宽度的一半 + 当前点击子元素一半的宽度 实现居中展示 <template> <viewclass="center-cut-menu"> <scroll-viewscroll-x="true"scroll-with-animation="true"class="scroll-view":scroll-left="scrollLeft"> <viewclass="scroll-ite...
在这个示例中,我们添加了一个按钮,当点击按钮时,会调用scrollToItem方法,该方法会根据传入的索引值计算目标位置的偏移量,并设置scroll-left属性来实现滚动定位。 请注意,上述代码中的itemWidth是假设每个元素的宽度相同,实际情况中可能需要根据实际元素的宽度来调整。此外,如果元素宽度不固定,可以通过查询元素的实际宽度...
官方示例方法: scroll事件监听会监听滚动条处于的位置(e.detail),将滚动条滚动的位置保存在old.scrollTop,当点击 回到顶部时, 将old.scrollTop赋值给scrollTop,视图会发生重新渲染,当视图渲染结束,接着触发 this.$nextTick,scrollTop被赋值为0,视图会再次渲染并回到顶部 如下直接赋值也可达到同样效果 scroll : funct...
在uni-app 的官方(https://uniapp.dcloud.io/component/scroll-view) API中对scroll-view组件有详细的介绍和属性说明,今天我们主要用到的属性是:scroll-left (设置横向滚动条的位置) 一般偷懒或者常用的方式是使用 scroll-into-view 这个属性,随着当前点击元素的ID滚动,但是这个属性制作出来后会和我上面效果一一样...
<view class="tabs-line" :style="{left:lineLeft}"></view> </view> </scroll-view> </view> </template> export default { props:{ tabs: { // 支持格式: ['全部', '待付款'] 或 [{name:'全部'}, {name:'待付款'}] type: Array...
<!-- 选项卡水平方向滑动,scroll-with-animation是滑动到下一个选项时,有一个延时效果 --> <scroll-viewclass="tab-scroll"scroll-x="true"scroll-with-animation :scroll-left="scrollLeft"> <viewclass="tab-scroll_box"> <!-- 选项卡类别列表 --> ...
先把scroll-left改成动态的,在handleSwitch方法中添加index索引值传过去 <scroll-viewclass="scroll-view_H"scroll-x="true":scroll-left="scrollValue">{{ item.text }}</scroll-view> 1. 2. 3. 4. 5. 6. 使用index索引值,判断滑动位置 handleSwitch(item,index){this.navCurrent=item.valuethis.scroll...
<scroll-view class="top-menu-view display-flex position-absolute" scroll-x="true" :scroll-into-view="tabCurrent" :scroll-left="scrollLeft"> //??? scrollLeft是重点 <view class="menu-top-view" v-for="(item,index) in tabs" :key="index" @click="swichMenu(index)"> ...
this.category[i].left = data[i].left; // scroll-view 子元素组件宽度 this.category[i].width = data[i].width } }).exec() }, // 选择标题 changeTitle(index) { this.curIndex = index; // 效果一(当前点击子元素靠左展示) 局限性:子元素宽度相同 ...
需要用到scroll-view中的scroll-into-view属性[值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素)] <template> <view class="container"> <view class="scrollBox"> <view class="left"> <scroll-view scroll-y="true" ...