[转载]小程序scroll-view 生成 双行金刚区 底部滑块 跟随滑动 CSS

原网站：https://www.cnblogs.com/minghost/p/11941668.html

scroll组件：
<template name="scroll"><view class=""><view class="all"><scroll-view class="nav-bar" scroll-x @scroll="scroll"><!-- 要想使用flex布局实现横向滚动，就要在scroll-view里加一层容器包裹，并且使用子组件才会出现滚动效果 --><view class="nav-bar-wrap"><block v-for="(item,index) in navbarArr" :key="index"><view class="nav-bar-item" @click="onNavbarItem(item.id)" :id="item.id"><image :src="item.pic_url" /><text>{{item.name}}</text></view></block></view></scroll-view></view><view class="slider"><view class="slider-inside .slider-inside-location" :style="{left:lefts}"></view></view></view>
</template><script>export default {name: "scroll",data() {return {lefts:0}},props: {navbarArr: {type: Array},left: {type: Number}},created: function(e) {console.log(this.left,"leftinfo")},methods: {onNavbarItem(id) {console.log(id)// const id = options.currentTarget.dataset.id// wx.navigateTo({// 	url: `/pages/mysignup/mysignup?id=${id}`,// })},scroll(event) {let that = thisconsole.log(event)let scrollLeft = event.detail.scrollLeft;let scrllWidth = event.detail.scrollWidth - 375;// that.left = `${(scrollLeft) / scrllWidth * 100}%`// this.$emit("changeLeft",that.lefts)// 32是剩余要滑动的地方let newLeft = scrollLeft / scrllWidth * 32that.lefts =newLeft + 'rpx'}}}
</script><style>.all {position: relative;height: 330rpx;overflow: hidden;background: #fff;}scroll-view {white-space: nowrap;}/* 去除滚动条 */::-webkit-scrollbar {display: none;width: 0;height: 0;color: transparent;}.nav-bar-wrap {display: flex;flex-flow: column wrap;height: 330rpx;}.nav-bar-item {width: 187.5rpx;display: flex;flex-direction: column;align-items: center;padding-top: 28rpx;}.nav-bar-item image {display: block;height: 90rpx;width: 90rpx;margin: 0;}.nav-bar-item text {margin-top: 5rpx;line-height: 32rpx;font-size: 25rpx;}.slider {position: relative;margin-left: 50%;/* left: 50%; */transform: translateX(-50%);width: 64rpx;height: 6rpx;border-radius: 3rpx;background: #eee;}.slider-inside {/* transform: translateX(-50%); */width: 32rpx;height: 100%;border-radius: 3rpx;background-color: #11BEA7;}.slider-inside-location {position: absolute;/* left: 50%; */}
</style>

使用组件：
<template><view><scroll :navbarArr="navbarArr" :left="left" @changeLeft="changeLeft"></scroll></view>
</template>
<script>import scroll from "../../components/scroll.vue"export default {components:{scroll},data() {return {navbarArr: [{pic_url: '../static/images/ic_57@2x.png',name: '骨科',id: 1},{pic_url: '../static/images/ic_59@2x.png',name: '检验科',id: 2},{pic_url: '../static/images/ic_56@2x.png',name: '外壳',id: 3},{pic_url: '../static/images/ic_53@2x.png',name: '口腔科',id: 4},{pic_url: '../static/images/ic_54@2x.png',name: '猫科',id: 5},{pic_url: '../static/images/ic_52@2x.png',name: '内科',id: 6},{pic_url: '../static/images/ic_50@2x.png',name: '皮肤科',id: 7},{pic_url: '../static/images/ic_52@2x.png',name: '肾病',id: 8},{pic_url: '../static/images/ic_58@2x.png',name: '血透科',id: 9},{pic_url: '../static/images/ic_62@2x.png',name: '肾病',id: 10},{pic_url: '../static/images/ic_64@2x.png',name: '血透科',id: 11},],left:0.65625}},methods: {changeLeft(e){let that = thisthat.left = e}},}
</script>