用uniapp实现下图的样式
代码如下：
123456export default {data() {return {translateX: 0};},methods: {handleEnd(e) {// 获取滚动条所在位置let scrollLeft = this.$refs.dataBox.$el.scrollLeft;// 获取当前屏幕宽度const screenWidth = uni.getSystemInfoSync().screenWidth;// 获取item的宽度(px)let itemWidth = ((screenWidth * Number.parseInt(2250)) / 750) / 6;// 根据滚动条所在位置计算当前所在的itemlet index = scrollLeft / itemWidth;// 移动滚动条this.translateX = index * (120 / 6);// 滚动条的宽度 / item的总数量},}}.content {.data-box {width: 100%;overflow: scroll;}.data-list {width: 2250rpx;height: 100px;}.data-item {display: inline-block;width: 50vw;height: 100px;}.num1 {background-color: palegoldenrod;}.num2 {background-color: pink;}.num3 {background-color: skyblue;}.num4 {background-color: plum;}.num5 {background-color: seagreen;}.num6 {background-color: orchid;}.indicator {margin: 10rpx auto;border-radius: 10rpx;height: 4px;width: 120px;// 滚动条宽度background-color: #797979;display: flex;.line-bar {width: 40px;// (显示的item数量 / item的总数量) * 滚动条宽度background-color: pink;transition-duration: .3s;}}}效果如下：
