uni-appscroll-view 点击实现元素居中（） _uni-app

莫道桑榆晚，为霞尚满天。这篇文章主要讲述uni-appscroll-view 点击实现元素居中？相关的知识，希望能为你提供帮助。
前言在 uni-app 开发中 scroll-view 组件用到几率也是比较大滴，存在问题主要是：点击子元素，子元素在什么位置展示？
今天我们来好好总结一下 0.0~
Part.1 可能出现的需求【uni-appscroll-view 点击实现元素居中（）】效果一：当前点击子元素靠左展示

文章图片

效果二：当前点击子元素靠左留一展示

文章图片

效果三：当前点击子元素居中展示

文章图片

应该常见的用户体验效果就这三种了，我们看看怎么实现？go~

Part.2 我的思路在 uni-app 的官方( https://uniapp.dcloud.io/component/scroll-view ) API中对 scroll-view 组件有详细的介绍和属性说明，今天我们主要用到的属性是：scroll-left (设置横向滚动条的位置)
一般偷懒或者常用的方式是使用 scroll-into-view 这个属性，随着当前点击元素的ID滚动，但是这个属性制作出来后会和我上面效果一一样靠左展示，这种展示方式体验不是太好(从前往后点击可能还好，但是从后往前就很...)，这种方式配合 swiper 或者其它组件做长列表或者其它还可勉强接受，因为不用去点击，直接手动滑动就可切换。但是假如不存在手可滑动的话，就会很糟糕。
接下来我们具体来看看，这三种效果如何实现：

效果一：可直接使用 scroll-into-view 属性实现或者也可使用 scroll-left
思路：第一种， scroll-into-view 绑定一个动态 ID，子元素循环产出ID，点击时进行绑定(这次就不做代码产出了)
第二种，计算每个子元素的宽度，点击时获取当前点击元素前面的元素宽度之和

效果二：使用 scroll-left
思路：计算每个子元素的宽度，点击时获取当前点击元素索引 - 1 的前面元素宽度之和，相比于效果一的第二种情况，这里少算当前点击元素前面的一个元素的宽度，实现留一

效果三：使用 scroll-left
思路：当前点击子元素距离左边栏的距离 - scroll-view 宽度的一半 + 当前点击子元素一半的宽度实现居中展示

Part.3 代码实现

1 < template> 2< view class="lxy-content"> 3< scroll-view scroll-x="true" 4class="content-scroll" 5scroll-with-animation 6:scroll-left="scrollLeft"> 7< view v-for="(item, index) in category" 8:key="index" 9class="scroll-item" 10@click="changeTitle(index)"> 11< text class="item-text" 12:class="curIndex == index? \'active\' : \'\'"> {{item.name}}< /text> 13< /view> 14< /scroll-view> 15< /view> 16 < /template>

1 < script> 2export default { 3data() { 4return { 5category: [ 6{ 7id: 1, 8name: \'星期一\' 9}, 10{ 11id: 2, 12name: \'星期二\' 13}, 14{ 15id: 3, 16name: \'星期三\' 17}, 18{ 19id: 4, 20name: \'星期四\' 21}, 22{ 23id: 5, 24name: \'星期五\' 25}, 26{ 27id: 6, 28name: \'星期六\' 29}, 30{ 31id: 7, 32name: \'星期七\' 33}, 34{ 35id: 8, 36name: \'星期八\' 37}, 38{ 39id: 9, 40name: \'星期九\' 41}, 42{ 43id: 10, 44name: \'星期十\' 45} 46], 47 48contentScrollW: 0, // 导航区宽度 49curIndex: 0, // 当前选中 50scrollLeft: 0, // 横向滚动条位置 51} 52}, 53mounted() { 54// 获取标题区域宽度，和每个子元素节点的宽度 55this.getScrollW() 56}, 57methods: { 58// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离 59getScrollW() { 60const query = uni.createSelectorQuery().in(this); 61 62query.select(\'.content-scroll\').boundingClientRect(data =https://www.songbingjia.com/android/> { 63// 拿到 scroll-view 组件宽度 64this.contentScrollW = data.width 65}).exec(); 66 67query.selectAll(/'.scroll-item\').boundingClientRect(data =https://www.songbingjia.com/android/> { 68let dataLen = data.length; 69for (let i = 0; i < dataLen; i++) { 70//scroll-view 子元素组件距离左边栏的距离 71this.category[i].left = data[i].left; 72//scroll-view 子元素组件宽度 73this.category[i].width = data[i].width 74} 75}).exec() 76}, 77 78 79// 选择标题 80changeTitle(index) { 81this.curIndex = index; 82 83// 效果一(当前点击子元素靠左展示)局限性：子元素宽度相同 84this.scrollLeft = index* this.category[index].width 85 86// 效果一(当前点击子元素靠左展示)子元素宽度不相同也可实现 87/* this.scrollLeft = 0; 88for (let i = 0; i < index; i++) { 89this.scrollLeft += this.category[i].width 90}; */ 91 92 93// 效果二(当前点击子元素靠左留一展示)局限性：子元素宽度相同 94/* this.scrollLeft = (index - 1)* this.category[index].width */ 95 96// 效果二(当前点击子元素靠左留一展示)子元素宽度不相同也可实现 97/* this.scrollLeft = 0; 98for (let i = 0; i < index - 1; i++) { 99this.scrollLeft += this.category[i].width 100}; */ 101 102 103// 效果三(当前点击子元素居中展示)不受子元素宽度影响 104/* this.scrollLeft = this.category[index].left - this.contentScrollW / 2 + this.category[index].width / 2; */ 105 106} 107} 108} 109 < /script>

1 < style lang="scss" scoped> 2.lxy-content { 3width: 100%; 4height: 100rpx; 5margin-top: 50rpx; 6box-sizing: border-box; 7.content-scroll { 8height: 100rpx; 9white-space: nowrap; 10.scroll-item { 11height: 100rpx; 12padding: 0 20rpx; 13display: inline-block; 14text-align: center; 15.item-text { 16font-size: 30rpx; 17line-height: 100rpx; 18& .active { 19color: #1468FF; 20} 21} 22} 23} 24} 25 < /style>