前言
在 uni-app 开发中 scroll-view 组件用到几率也是比较大滴，存在问题主要是：点击子元素，子元素在什么位置展示？
今天我们来好好总结一下 0.0~
Part.1 可能出现的需求
效果一：当前点击子元素靠左展示
效果二：当前点击子元素靠左留一展示
效果三：当前点击子元素居中展示
应该常见的用户体验效果就这三种了，我们看看怎么实现？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" 4 class="content-scroll" 5 scroll-with-animation 6 :scroll-left="scrollLeft"> 7 <view v-for="(item, index) in category" 8 :key="index" 9 class="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> 2 export default { 3 data() { 4 return { 5 category: [ 6 { 7 id: 1, 8 name: ‘星期一‘ 9 }, 10 { 11 id: 2, 12 name: ‘星期二‘ 13 }, 14 { 15 id: 3, 16 name: ‘星期三‘ 17 }, 18 { 19 id: 4, 20 name: ‘星期四‘ 21 }, 22 { 23 id: 5, 24 name: ‘星期五‘ 25 }, 26 { 27 id: 6, 28 name: ‘星期六‘ 29 }, 30 { 31 id: 7, 32 name: ‘星期七‘ 33 }, 34 { 35 id: 8, 36 name: ‘星期八‘ 37 }, 38 { 39 id: 9, 40 name: ‘星期九‘ 41 }, 42 { 43 id: 10, 44 name: ‘星期十‘ 45 } 46 ], 47 48 contentScrollW: 0, // 导航区宽度 49 curIndex: 0, // 当前选中 50 scrollLeft: 0, // 横向滚动条位置 51 } 52 }, 53 mounted() { 54 // 获取标题区域宽度，和每个子元素节点的宽度 55 this.getScrollW() 56 }, 57 methods: { 58 // 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离 59 getScrollW() { 60 const query = uni.createSelectorQuery().in(this); 61 62 query.select(‘.content-scroll‘).boundingClientRect(data => { 63 // 拿到 scroll-view 组件宽度 64 this.contentScrollW = data.width 65 }).exec(); 66 67 query.selectAll(‘.scroll-item‘).boundingClientRect(data => { 68 let dataLen = data.length; 69 for (let i = 0; i < dataLen; i++) { 70 // scroll-view 子元素组件距离左边栏的距离 71 this.category[i].left = data[i].left; 72 // scroll-view 子元素组件宽度 73 this.category[i].width = data[i].width 74 } 75 }).exec() 76 }, 77 78 79 // 选择标题 80 changeTitle(index) { 81 this.curIndex = index; 82 83 // 效果一(当前点击子元素靠左展示) 局限性：子元素宽度相同 84 this.scrollLeft = index * this.category[index].width 85 86 // 效果一(当前点击子元素靠左展示) 子元素宽度不相同也可实现 87 /* this.scrollLeft = 0; 88 for (let i = 0; i < index; i++) { 89 this.scrollLeft += this.category[i].width 90 }; */ 91 92 93 // 效果二(当前点击子元素靠左留一展示) 局限性：子元素宽度相同 94 /* this.scrollLeft = (index - 1) * this.category[index].width */ 95 96 // 效果二(当前点击子元素靠左留一展示) 子元素宽度不相同也可实现 97 /* this.scrollLeft = 0; 98 for (let i = 0; i < index - 1; i++) { 99 this.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 { 3 width: 100%; 4 height: 100rpx; 5 margin-top: 50rpx; 6 box-sizing: border-box; 7 .content-scroll { 8 height: 100rpx; 9 white-space: nowrap; 10 .scroll-item { 11 height: 100rpx; 12 padding: 0 20rpx; 13 display: inline-block; 14 text-align: center; 15 .item-text { 16 font-size: 30rpx; 17 line-height: 100rpx; 18 &.active { 19 color: #1468FF; 20 } 21 } 22 } 23 } 24 } 25 </style>