当前位置：首页 > news >正文

uniapp 实现滑动元素并下方有滚动条显示

news 2025/7/18 7:01:38

用uniapp实现下图的样式

代码如下：

<template><view class="content"><view class="data-box" ref="dataBox" @touchend="handleEnd"><view class="data-list"><view class="data-item num1">1</view><view class="data-item num2">2</view><view class="data-item num3">3</view><view class="data-item num4">4</view><view class="data-item num5">5</view><view class="data-item num6">6</view></view></view><view class="indicator"><view class="line-bar" :style="{'transform':'translateX('+translateX + 'px)'}"></view></view></view>
</template><script>export 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的总数量},}}
</script><style lang="scss" scoped>.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;}}}
</style>

效果如下：